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样式在子菜单中不起作用

回答

相关问题