0
我一直在一個CSS下拉菜單,但我正在努力與子菜單的文字顏色。CSS下拉菜單 - 子菜單懸停文字顏色繼承
正如所料,子菜單背景顏色保持懸停顏色,但文本恢復爲非懸停狀態。
例如,徘徊項目9時,我需要在文本「菜單,第3項和第6項」是相同的(白)作爲第9項
我想,這是一個繼承問題,但似乎無法弄清楚。
這裏是CSS
.clearboth {
margin: 0;
padding: 0;
clear: both;
}
#nav {
font-family: sans-serif;
font-size: 12pt;
color: #666666;
line-height: 1.0;
}
#nav a {
display: block;
padding: 6px 8px;
}
#nav a:link {
color: #666666;
text-decoration: none;
}
#nav a:visited {
color: #666666;
text-decoration: none;
}
#nav a:hover {
color: white;
text-decoration: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
left: -1px;
}
#nav ul ul {
position: absolute;
visibility: hidden;
border: solid 1px gray;
}
#nav ul ul ul {
position: absolute;
visibility: hidden;
left: 100%;
top: -2px;
border: solid 1px gray;
}
#nav li.menu {
float: left;
background-color: white;
margin-right: 0px;
position: relative;
border: solid 1px gray;
border-radius: 10px;
width: 100px;
text-align: center;
}
#nav li.menu:hover {
background-color: #66a3e0;
border-radius: 0px;
text-align: left;
}
#nav li {
float: left;
position: relative;
background-color: white;
width: 100px;
margin-top: 0px;
margin-right: 0px;
}
#nav li li {
float: left;
position: relative;
background-color: white;
width: 100px;
margin-top: 0px;
margin-right: 0px;
}
#nav li:hover {
background-color: #66a3e0;
color: white; /* No effect. Inheritance? */
}
#nav li li:hover {
background-color: #66a3e0;
color: white; /* No effect. Inheritance? */
}
#nav li:hover > ul {
visibility: visible;
}
.right-arrow {
float: right;
}
和HTML
<div id="nav">
<ul>
<li class="menu"><a href="#">Menu</a>
<ul>
<li><a href="#">Item 1</a>
</li>
<li><a href="#">Item 2</a>
</li>
<li><a href="#">Item 3<span class="right-arrow">►</span></a>
<ul>
<li><a href="#">Item 4</a>
</li>
<li><a href="#">Item 5</a>
</li>
<li><a href="#">Item 6<span class="right-arrow">►</span></a>
<ul>
<li><a href="">Item 7</a>
</li>
<li><a href="">Item 8</a>
</li>
<li><a href="">Item 9</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br class="clearboth" />
</div>
任何幫助,意見或其他建議將不勝感激。謝謝。
http://jsfiddle.net/tinkering/WD7xY/
謝謝。 IOS和iPhone(最新版本爲7.2)和列表元素之間的透明度存在一些問題。但我相信這是一個Safari錯誤。 Mac的IOS很好。否則它工作得很好。再次感謝。 – Tinker