Не удается заставить раскрывающееся меню CSS работать

0

Я пробовал несколько примеров кода, никто из них не работает... Я создал пустой документ HTML и CSS, только для тестирования. Это то, что у меня есть сейчас; он, похоже, не работает:

HTML:

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title>Test</title>
 </head>
 <body>
 <nav id="nav">
   <ul>
    <li>Home</li>
   <li>Menu1
    <ul>
     <li>Sub1</li>
     <li>Sub2</li>
    </ul>
  </li>
  <li>Menu2
   <ul>
    <li>Sub1</li>
    <li>Sub2</li>
  </ul>
 </li>
 </ul>
</nav>
</body>
</html>

CSS:

nav ul li {
   display:  block;
   float: left;
   width: relative;
}
nav ul ul {
   display: none;  
}
nav ul li:hover > ul {
   display: block;
   position: absolute;
   margin-left: -30px;}

nav ul ul li {
 display: block; 
   float: none;
}
  • 0
    Это похоже на работу в Chrome. Вот JSFiddle для этого: jsfiddle.net/f2xs7
  • 0
    работал на меня? jsfiddle.net/cbrickhouse/PX3mN
Показать ещё 1 комментарий
Теги:

1 ответ

0
Лучший ответ

Вы должны изменить width в правиле nav ul li чтобы быть position. См. Этот JSFiddle.

nav ul li {
   display:  block;
   float: left;
   position: relative;
}
Поделиться
  • 0
    Это не исправит это; хотя я не знаю, почему у меня была ширина: относительная, а не позиция ... Во всяком случае. РЕДАКТИРОВАТЬ: Обратите внимание, моя мышь даже не над любым из пунктов меню. Это то, что я получаю в Chrome: imgur.com/Fxg7FBs
  • 0
    Тогда ваш файл CSS может даже не быть включен / загружен. Вы знаете, что такое console (или инструменты разработчика) в браузере?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню