CSS樣式在子菜單中不起作用

我使用樣式表創建了一個css菜單和子菜單。代碼和樣式表如下所示CSS樣式在子菜單中不起作用

<style type="text/css"> 
*{ 
padding:0px; 
margin:0px; 
} 

#navdiv 
{ 
border: 1px solid black; 
text-align:center; 
background:#FF0000; 
border-radius: 10px; 
width: 50%; 
margin: 10px; 
} 

nav ul ul 
{ 
    display:none; 
    width:auto; 
} 

nav ul li:hover >ul 
{ 
    display:block; 
} 

nav ul 
{ 
    background: #ff0000; 
    padding: 0px; 
    border-radius: 0px; 
    list-style: none; 
    position: relative; 
    display: inline-table; 
    font-size: 12px; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-weight: bold; 
    text-transform:uppercase; 
} 

    nav ul li 
{ 
    float:left; 
    background: #ff0000; 
    border: 0px solid black; 
} 

nav ul li:hover 
{ 
    background: #DDDDDD; 
    } 

nav ul li a 
{ 
    display:block; 
    padding: 10px 25px; 
    text-decoration: none; 
    color:#FFFFFF; 
} 

nav ul li:hover a 
{ 
    color:#000000; 
} 

nav ul ul 
{ 
    background: #ff0000; 
    position: absolute; top: 100%; 
} 

nav ul ul li 
{ 
    float: none; 
    border: 1px solid #000000; 
    position: relative; 
    color:#FFFFFF; 
} 

nav ul ul li a 
{ 
    background-color: #FFFFFF; 
    color: #FFFFFF; 
} 

nav ul ul li a:hover 
{ 
    background: #000000; 
    color:#FFFFFF; 
} 

nav ul ul ul 
{ 
    position: absolute; left: 100%; top:0; 
} 

</style> 
<div id="navdiv"> 
<nav> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Tutorials</a> 
     <ul> 
      <li><a href="#">Photoshop</a></li> 
      <li><a href="#">Illustrator</a></li> 
      <li><a href="#">Web Design</a> 
       <ul> 
        <li><a href="#">HTML</a></li> 
        <li><a href="#">CSS</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Articles</a> 
     <ul> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">User Experience</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Inspiration</a></li> 
</ul> 
</nav> 
</div>

我想改變子菜單的顏色（即包括Photoshop，Illustrator，在我的例子網頁設計）我能夠改變使用 CSS

背景顏色

nav ul ul li a 
{ 
    background-color: #FFFFFF; 
    color: #FFFFFF; 
}

但我不明白爲什麼字體顏色沒有變化？請幫我解決問題

來源

2013-07-15 Sumit P Makwana

字體顏色已經作品 - 看http://jsfiddle.net/danield770/7TAqe/ - 看到的顏色是白色 – Danield

嘗試添加a:visited，而不是隻是一個CSS選擇器。

nav ul ul li a, nav ul ul li a:visited

來源

2013-07-15 07:13:19 SangeethK

它工作，感謝您的幫助。請你可以告訴爲什麼它以前不工作只有 nav ul ul li a what nav ul ul li a：visited did affact？ –

這些是您已經訪問的URL，這會導致瀏覽器以不同的顏色顯示它們。 – SangeethK

得到最簡單的方法是如下：

nav ul ul ul li, 
nav ul ul li 
{ 
    background-color: #FFFFFF; 
    color: #FFFFFF; 
}

試試這個它能夠解決您的問題，請您分享我可以幫你更多的選擇。

來源

2013-07-15 07:20:48

只需添加a:visited代替錨標記

如：nav ul ul li a, nav ul ul li a:visited

來源

2013-07-15 07:20:51

CSS樣式在子菜單中不起作用

回答

相關問題