gpt4 book ai didi

html - 当前菜单颜色跨越整个下拉菜单

转载 作者:行者123 更新时间:2023-11-28 12:07:06 25 4
gpt4 key购买 nike

我有一个用于我们公司网站的下拉菜单,我正在尝试将其设置为当您在特定页面上时,导航/菜单中文本的颜色是不同的颜色。它部分起作用。目前我的 HTML 和 CSS 文件改变了当前主标题的颜色,但同样的颜色也扩散到我的下拉菜单中,改变了所有链接的颜色。我能得到一些帮助吗?

CSS:

.menu{
padding:0;
margin:25px 0 0 0;
}
.menu {
list-style: none;
display: block;
float: right;
}
.menu > li {
position:relative;
width:auto;
line-height:40px;
text-align:center;
padding:0 10px;
float:left;
display:block;
border-right: 1px solid #d8d8d8;
z-index:300;
}
.menu li ul{
padding: 10px 10px;
position:absolute;
background-color:white;
left:0;
width:auto;
display:none;
}
.menu li:hover > ul{
display:block;
}
.menu li ul li{
line-height:20px;
white-space:nowrap;
text-transform:capitalize;
margin-bottom:2px;
}
.menu li ul li:hover{
color:#f15c22;
}
/*.menu li{
float:left;
padding:12px;
border-right: 1px solid #d8d8d8;
}*/
.menu li.last-menu-item{
border: none;
padding-right:0;
}
.last-menu-item p{
font-size: 15px;
color: #132d3c;
font-family: 'sansationbold';
margin: 0em;
}
.menu a{
color:#132d3c;
font-size:15px;
font-family: 'sansationbold';
text-transform: uppercase;
text-decoration: none;
font-weight:lighter;
}
.menu a:hover{
color:#f15c22;
}
#current-menu-item a{
color:#f15c22;
}

HTML:

<ul class="menu alignright">
<li><a href="index.html">Home</a></li>
<li id="current-menu-item"><a href="about.html">About</a>
<ul>
<li><a href="about.html">Who We Are</a></li>
<li><a href="about.html">Values</a></li>
<li><a href="message.html">Owners Message</a></li>
<li><a href="#">Infotek Blog</a></li>
<li><a href="stories.html">Success Stories</a></li>
<li><a href="partners.html">Partners</a></li>
</ul>
</li>
<li><a href="products.html">Products &amp; Solutions</a>
<ul>
<li><a href="security.html">Security Solutions</a></li>
<li><a href="data.html">Data Solutions</a></li>
<li><a href="communication.html">Communication Solutions</a></li>
<li><a href="connect.html">Connectivity Solutions</a></li>
<li><a href="infra.html">Infrastructure Solutions</a></li>
<li><a href="resources.html">Resources</a></li>
</ul>
</li>
<li class="last-menu-item"><a href="contact.html">Contact</a>
<ul>
<li><p>Phone:</p></li>
<li><p>281-296-3160</p></li>
<br />
<li><a href="mailto:sales@infotek-solutions.net">Sales</a></li>
<li><a href="mailto:techsupport@infotek-solutions.net">Support</a></li>
<li><a href="mailto:hr@infotek-solutions.net">HR</a></li>
<li><a href="#">Blog</a></li>
<li><a href="contact.html">Contact Form</a></li>
</ul>
</li>
</ul>

我知道我的代码很困惑和草率,但我对 HTML 和 CSS 还很陌生,实际上这学期在网页设计 1 课上。提前致谢!

Here is a jsFiddle of the code above

最佳答案

只要改变这个:

#current-menu-item a {
color:#f15c22;
}

对此:

#current-menu-item > a {
color:#f15c22;
}

问题是原始代码带有#current-menu-item a正在选择所有 a那是#current-menu-item的后代,当您只想将其应用于直接子级时。 >选择器就是这样做的,防止级联进一步a后代。

Here is the updated jsFiddle

关于html - 当前菜单颜色跨越整个下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19668115/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com