文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >CSS:设置下拉菜单列表的样式，但链接样式不会从主导航样式更改

问CSS:设置下拉菜单列表的样式，但链接样式不会从主导航样式更改
EN

Stack Overflow用户
提问于 2018-07-19 05:53:54
回答 2查看 574关注 0票数 0

我是HTML/CSS的新手，也没有接受过正式的培训，只是在一起学习一些科学的东西。现在，我在主导航菜单的末尾有一个下拉菜单。问题是下拉菜单中的链接-我需要它们是较深的颜色，但它们不会从主导航菜单的浅色改变。不管我怎么尝试，颜色总是一样的！出于某些原因，我甚至可以更改列表上项目符号的颜色(我也需要去掉它，但这样更容易)，但文本保持不变。

感谢任何人的帮助。:-)

​

代码语言：javascript
复制
/* (1/3) MAIN NAVIGATION BAR */

#navbar {
  overflow: hidden;
  background-color: #999900;
  font-family: caviar-dreams;
}


/* (2/3) NAVIGATION LINKS */

#navbar a {
  float: left;
  color: #f2f2f2;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 20px;
  padding-left: 15px;
  text-transform: uppercase;
  text-decoration: none;
}


/* (3/3) NAVIGATION LINKS */

#navbar a:hover {
  text-decoration-line: underline;
  text-decoration-style: solid;
}


/* (1/7) DROPDOWN MENU CONTAINER */

.dropdown {
  overflow: hidden;
}


/* (2/7) DROPDOWN MENU BUTTON */

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  padding-top: 5px;
  vertical-align: middle;
  background-color: inherit;
  font-family: inherit;
  /* Important for vertical align on mobile phones */
  margin: 0;
  /* Important for vertical align on mobile phones */
}


/* (3/7) DROPDOWN BUTTON HOVER COLOR */

.dropdown:hover .dropbtn {
  background-color: #8d7b8a;
}


/* (4/7) DROPDOWN CONTENT (HIDDEN UNTIL HOVERED) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFFFFF;
  border: 1px dashed #b89abe;
  width: auto;
}


/* (5/7) DROPDOWN LINKS */

.dropdown-content a {
  float: none;
  color: black;
  background-color: #FFFFFF;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* (6/7) DROPDOWN LINKS HOVER */

.dropdown-content a:hover {
  background-color: #8d7b8a;
}


/* (7/7) SHOW DROPDOWN MENU ON HOVER */

.dropdown:hover .dropdown-content {
  display: block;
}


/* AT LEAST THIS DID /SOMETHING/ ?
.dropdown-content ul li a
    {color:green;
    background-color: blue;
    list-style-type: none;
    } */
代码语言：javascript
复制
<!DOCTYPE html>
<div class="wrapper">
  <link href="style.css" rel="stylesheet" type="text/css">
  <!--| NAVIGATION BAR (1/2) |-->
  <div id="navbar">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">News</a>
    <a href="#">Contact</a>
    <!--| DROPDOWN MENU IN NAV BAR (2/2) |-->
    <div class="dropdown">
      <button class="dropbtn">Drop Down Menu</button>
      <div class="dropdown-content">
        <ul>
          <li><a href="#">Art Education</a></li>
          <li><a href="#">Graphic Design</a></li>
          <li><a href="#">Custom Projects</a></li>
          <li><a href="#">Events and Parties</a></li>
          <li><a href="#">Studio Work</a></li>
          <li><a href="#">Photo Gallery</a></li>
          <li><a href="#">CV</a></li>
          <li><a href="#">Shop</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

​

html
css
drop-down-menu
navigation
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-19 06:07:22

问题是id在css层次结构中比类更高。因此，#navbar a将始终覆盖.dropdown-content a。

你可以试试这个：#navbar .dropdown-content a。

或者，您可以重写为#navbar > a。这将仅针对作为导航栏的直接子标记的锚标记。所以它应该忽略下拉菜单中的锚标签。

或者更好的是，不要使用id。使用id而不是类并没有太多的好处，而且它往往会导致这种层次化的问题。

票数 1
EN

Stack Overflow用户

发布于 2018-07-19 06:12:35

这对你来说应该是可行的。您所需要的只是一个更具体的选择器来覆盖id。

​

代码语言：javascript
复制
/* (1/3) MAIN NAVIGATION BAR */

#navbar {
  overflow: hidden;
  background-color: #999900;
  font-family: caviar-dreams;
}


/* (2/3) NAVIGATION LINKS */

#navbar a {
  float: left;
  color: #f2f2f2;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 20px;
  padding-left: 15px;
  text-transform: uppercase;
  text-decoration: none;
}


/* (3/3) NAVIGATION LINKS */

#navbar a:hover {
  text-decoration-line: underline;
  text-decoration-style: solid;
}


/* (1/7) DROPDOWN MENU CONTAINER */

.dropdown {
  overflow: hidden;
}


/* (2/7) DROPDOWN MENU BUTTON */

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  padding-top: 5px;
  vertical-align: middle;
  background-color: inherit;
  font-family: inherit;
  /* Important for vertical align on mobile phones */
  margin: 0;
  /* Important for vertical align on mobile phones */
}


/* (3/7) DROPDOWN BUTTON HOVER COLOR */

.dropdown:hover .dropbtn {
  background-color: #8d7b8a;
}


/* (4/7) DROPDOWN CONTENT (HIDDEN UNTIL HOVERED) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFFFFF;
  border: 1px dashed #b89abe;
  width: auto;
}


/* (5/7) DROPDOWN LINKS */

#navbar .dropdown-content a {
  float: none;
  color: black;
  background-color: #FFFFFF;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* (6/7) DROPDOWN LINKS HOVER */

#navbar .dropdown-content a:hover {
  background-color: #8d7b8a;
}


/* (7/7) SHOW DROPDOWN MENU ON HOVER */

.dropdown:hover .dropdown-content {
  display: block;
}


/* AT LEAST THIS DID /SOMETHING/ ?
.dropdown-content ul li a
    {color:green;
    background-color: blue;
    list-style-type: none;
    } */
代码语言：javascript
复制
<!DOCTYPE html>
<div class="wrapper">
  <link href="style.css" rel="stylesheet" type="text/css">
  <!--| NAVIGATION BAR (1/2) |-->
  <div id="navbar">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">News</a>
    <a href="#">Contact</a>
    <!--| DROPDOWN MENU IN NAV BAR (2/2) |-->
    <div class="dropdown">
      <button class="dropbtn">Drop Down Menu</button>
      <div class="dropdown-content">
        <ul>
          <li><a href="#">Art Education</a></li>
          <li><a href="#">Graphic Design</a></li>
          <li><a href="#">Custom Projects</a></li>
          <li><a href="#">Events and Parties</a></li>
          <li><a href="#">Studio Work</a></li>
          <li><a href="#">Photo Gallery</a></li>
          <li><a href="#">CV</a></li>
          <li><a href="#">Shop</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51411520

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档