2013-07-15 2 views
0

Я создал меню 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, иллюстратор, веб-дизайн в моем примере) я могу изменить цвет фона с помощью CSS

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

Но я не понимаю, почему цвет шрифта не меняется? Пожалуйста, помогите с проблемой

+0

цвет шрифта уже работает - см http://jsfiddle.net/danield770/7TAqe/ - видеть, что цвет белый – Danield

ответ

1

попробуйте добавить a:visited вместо простого в CSS-селектор.

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

+0

Это работал, спасибо за помощь. Пожалуйста, не могли бы вы объяснить, почему он не работал раньше только с nav ul ul li a что nav ul ul li a: visited сделал affact? –

+0

это URL-адреса, которые вы уже посетили, что заставляет браузер отображать их в разных цветах. – SangeethK

0

Самый простой способ, чтобы получить это, как показано ниже:

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

Попробуйте это будет решить вашу проблему, пожалуйста, поделитесь, я могу помочь вам с большим количеством опций.

1

Просто добавьте a:visited вместо тега привязки

например: nav ul ul li a, nav ul ul li a:visited

Смежные вопросы