Создание раскрывающегося меню CSS - не удается найти ошибку

Попытка сделать меню, очень новое для CSS. Я думаю, что ошибка где-то вСоздание раскрывающегося меню CSS - не удается найти ошибку

.nav ul li:hover > ul li a { color: purple; min-width:150px;} 
    .nav ul li:hover > ul li a:hover { color:pink;}

, но я не могу понять, что, и не имеют опыта, чтобы выяснить, если это в другом месте. Все остальное, кроме раскрывающегося списка, похоже, работает.

Я использую http://www.wikihow.com/Create-a-Dropdown-Menu-in-HTML-and-CSS в качестве ссылки.

Большое спасибо за помощь.

<!DOCTYPE html!> 
<html lang="en"> 
    <head> 
    <! css link goes here !> 
    <style type="text/css"> 
    body { 
     background-color:orange} 


    .nav ul ul {    /* the . in front on nav is critical! */ 
     display:none; 
     } 

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

    .nav ul { 
     padding: 0 20px; 
     border-radius: 10px; 
     list-style: none; 
     position: relative; 
     display: inline-block; 
     background: green} 

    .nav ul li { 
     float:left} 

    .nav ul li a{ 
     padding: 5px 10px 5px 10px; 
     display:block; 
     color: red; /* heading text color */ 
     text-decoration: none; 
     } 

    .nav ul li:hover { 
     background: orange; /* hover over menu and color changes */ 
     } 

    .nav ul li:hover a { 
     color:blue; /* hover over menu and text color changes */ 
     } 

    .nav ul li:hover > ul { margin:0px; padding:0px;} 
    .nav ul li:hover > ul li { float:none; display:block;} 
    .nav ul li:hover > ul li a { color: purple; min-width:150px;} 
    .nav ul li:hover > ul li a:hover { color:pink;} 

    .nav ul li { position:relative; } 
    .nav ul li ul { position: absolute; top:30px; left:0px; } 

    } 

    </style> 
    </head> 

    <body> 
    <div class="nav"> 
     <ul> 
      <li><a href="media">Media</a></li> 
      <li><a href="previous expeditions">Previous Expeditions</a> 

       <ul> 
         <li><a href="morocco">Morocco</a></li> 
         <li><a href="iceland">Iceland</a></li> 
         <li><a href="tajikistan">Tajikistan</a></li> 
       </ul> 
      </li> 
      <li> <a href="sponsors">Sponsors</a></li> 
     </ul> 



    </div> <! end of nav div!> 
    </body> 
</html>

источник

2013-12-02 user2036368

Нет ничего плохого в коде как таковой.

Посмотрите эту строку:

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

Заметили ли вы пропуск перед hover. Просто удалите это, и он будет работать. Всякий раз, когда вы пишете селектор такого типа, не должно быть пробелов между : и псевдоселектором.

После изменения:

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

См working demo.

источник

2013-12-02 04:05:37 Aniket

Огромное спасибо, он отсортирован благодаря вашей помощи! – user2036368

Обновление после CSS. и он отобразит раскрывающееся меню.

.nav ul li:hover > ul { margin:0px; padding:0px; display:block;}

Fiddle Here

Решает ли это проблему?

источник

2013-12-02 03:59:47 Kishori

Большое спасибо, получили его отсортированным благодаря вашей помощи! – user2036368

Создание раскрывающегося меню CSS - не удается найти ошибку

ответ

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