我将这个CSS代码用于水平菜单:
* {
margin: 0 auto;
padding: 0;
}
a{
text-decoration: none;
}
#nav ul {
list-style-type: none;
height: 32px;
background:#F36F25;
width: auto;
}
#nav ul li {
float: left;
height: 32px;
position: relative;
}
#nav ul li a {
float:left;
line-height: 32px;
color:#fff;
width: 86px;
padding: 0 7px;
text-align: center;
}
#nav ul li:hover {
background:#FFFFFF;
}
#nav ul li a:hover {
color:#000;
}
#nav ul li:hover > ul {
display: block;
}
#nav ul li ul {
display: none;
position: absolute;
top: 32px;
left: 0;
width: 100px;
height: auto;
}
#nav ul li ul li, #nav ul li ul li a {
float: none;
display: block;
}
#nav ul li ul li ul {
top: 0;
left: 100px;
}
当我将鼠标悬停在子项上时,我试图让父链接保持相同的文本颜色。我该怎么做呢?我在这里也创造了一个小提琴:
答案 0 :(得分:3)
当父<li>
为:hover
时,您可以设置为链接的颜色:
<强> Updated Example 强>
#nav ul li:hover > a {
color: #000;
}
* {
margin: 0 auto;
padding: 0;
}
a{
text-decoration: none;
}
#nav ul {
list-style-type: none;
height: 32px;
background:#F36F25;
width: auto;
}
#nav ul li {
float: left;
height: 32px;
position: relative;
}
#nav ul li a {
float:left;
line-height: 32px;
color:#fff;
width: 86px;
padding: 0 7px;
text-align: center;
}
#nav ul li:hover {
background:#FFFFFF;
}
#nav ul li:hover > a {
color:#000;
}
#nav ul li:hover > ul {
display: block;
}
#nav ul li ul {
display: none;
position: absolute;
top: 32px;
left: 0;
width: 100px;
height: auto;
}
#nav ul li ul li, #nav ul li ul li a {
float: none;
display: block;
}
#nav ul li ul li ul {
top: 0;
left: 100px;
}
<div id="nav">
<ul>
<li><a href="home" class="active">Home</a></li>
<li><a href="#">Account</a>
<ul>
<li><a href="companydetails">Company Details</a></li>
<li><a href="contacts">Contacts</a></li>
<li><a href="pricetariffs">My Price Tariffs</a></li>
</ul>
</li>
<li><a href="#">Billing</a>
<ul>
<li><a href="billinginfo">Billing Info</a></li>
<li><a href="invoices">Invoices</a></li>
</ul>
</li>
<li><a href="#">Tickets</a>
<ul>
<li><a href="tickets">View Tickets</a></li>
<li><a href="openticket">Open Ticket</a></li>
</ul>
</li>
<li><a href="logout">Logout</a></li>
</ul>
</div>