Как добиться эффекта подменю?

Question

Я пытаюсь добиться эффекта подменю, когда пользователь наводит курсор на F.A.Q. ссылка и подменю опускается вниз и отображает еще два варианта - но я не могу даже представить HTML правильно (неважно, jQuery), может ли кто-нибудь помочь мне? По некоторым причинам элементы списка в подменю не отображаются на отдельных строках, несмотря на то, что я добавил элемент «display: block», и я не могу заставить подменю фактически отображаться под F.A.Q. ссылка = \

http://jsfiddle.net/Kk8uw/

<nav id="navigation"> 
    <ul> 
     <li><a href="/">Home</a> 

     </li> 
     <li><a href="/catalog.php">Catalog</a> 

     </li> 
     <li><a href="/build.php">Create A Sword</a> 

     </li> 
     <li><a href="/about.php">About Us</a> 

     </li> 
     <li><a href="/faq.php">F.A.Q.</a> 

     </li> 
     <ul id="submenu"> 
      <li><a href="/measurement.php">Measuring</a> 

      </li> 
      <li><a href="/terminology.php">Terminology</a> 

      </li> 
     </ul> 
     <li><a href="/contact.php">Contact Us</a> 

    </ul> 
</nav> 

CSS

#navigation { 
    background: #000; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    position: relative; 
    height: 36px; 
} 
#navigation ul { 
    list-style-type: none; 
    margin-left: 10px; 
    padding: 0px; 
} 
#navigation ul li { 
    float: left; 
    display: block; 
    border-right: 1px solid #444; 
} 
#navigation ul li a { 
    display: block; 
    padding: 10px; 
    font-size: 13px; 
    text-decoration: none; 
    color: #ffffff; 
    text-transform: uppercase; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
} 
#navigation ul li a:hover { 
    color: maroon; 
} 
#navigation ul li:first-child a { 
    padding-left: 0px; 
} 
#submenu { 
    position: absolute; 
    left: 90px; 
    list-style: none; 
    top: 30px; 
    background: #222222; 
} 
#navigation ul#submenu li a { 
    display: block; 
    padding: 5px 5px 13px 0px; 
} 
#navigation ul#submenu li { 
    display: block; 
    border: none; 
} 

Answer 1

Проверить это демо: http://jsfiddle.net/kP4jt/

HTML код

<ul> 
    <li><a href='#'>One</a></li> 
    <li><a href='#'>Two</a></li> 
    <li><a href='#'>Three</a></li> 
    <li><a href='#'>Four</a></li> 
    <li><a href='#'>Five</a> 
     <ul> 
      <li><a href='#'>Sub Menu 1</a></li> 
      <li><a href='#'>Sub Menu 2</a></li> 
      <li><a href='#'>Sub Menu 3</a></li> 
     </ul> 
    </li> 
</ul> 

CSS код

* { padding: 0; margin : 0; } 
ul li { 
    float : left; 
    list-style-type : none; 
    position : relative; 
} 
ul li a { 
    display : block; 
    padding : 5px 20px; 
    background-color : #eee; 
    text-decoration : none; 
    border-right : 1px solid #ccc; 
    border-bottom : 1px solid #ccc; 
} 
ul ul { 
    display : none; 
    position : absolute; 
    left : -1px; 
} 
ul ul li { float : none; } 
ul li:hover ul { display : block; } 
ul ul a { 
    border-left : 1px solid #ccc; 
    width : 80px; 
} 

В вашем HTML нужно поместить в подменю - <ul> внутри <li> тега.

Добавить эффекты по мере необходимости.

Answer 2

Добавьте к этому вашим стилям, должны получить вы двигаетесь в правильном направлении:

#navigation ul#submenu{ 
display:none; 
} 
#navigation ul:hover ul#submenu 
{ 
display:block; 
} 

Answer 3

Проблема заключается ваше наследование имущества поплавка от селектора LI #navigation ул. Селектор нацелен на любой элемент li, содержащийся в контейнере #navigation. Таким образом, вы можете добавить новый селектор, чтобы установить значение float равным none.

#navigation #submenu li { 
    float: none; 
} 

Однако, используя идентификаторы для укладки приведет к раздуванию таблицы стилей и важно! Директива переопределяет. Я рекомендую использовать селектор классов, чтобы избежать установки специфичности ваших селекторов css и максимального повторного использования кода.

Еще одна вещь, которую я заметил, это то, что в последнем пункте меню отсутствует тег закрытия. Я сделал быстрый jsfiddle для вас:

http://jsfiddle.net/beyondhyper/wMpgJ/3/