Создание выпадающего меню видимо только при зависании

Question

Я искал в Интернете. Этот вопрос Hovering <a> in CSS without href о переполнении стека не затрагивает мою проблему так, как я могу понять.

Я пытаюсь создать «основное» меню без ссылок.

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

Я хотел был бы сделать это с CSS только.

У меня возникла путаница. Я пробовал различные перестановки с z-индексом, позиционированием и видимостью. Тем не менее, мне трудно достичь нужного мне результата. Я также попытался иметь ссылки во внешних элементах списка.

Это мой код:

HTML:

<ul> 
     <li>Name 1 
      <ul> 
      <li><a href="a.html" title="a">anteater</a></li> 
      <li><a href="b.html" title="b">bee</a></li> 
      <li><a href="c.html" title="c">cat</a></li> 
      <li><a href="d.html" title="d">dog</a></li> 
      </ul> 
     </li> 
     <li>Name 2 
      <ul> 
      <li><a href="e.html" title="e">egg</a></li> 
      <li><a href="f.html" title="f">fern</a></li> 
      <li><a href="g.html" title="g">goose</a></li> 
      <li><a href="h.html" title="h">house</a></li> 
      </ul> 
     </li> 
</ul> 

CSS:

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
li { 
    float: left; 
    padding: 30px 15px 20px 15px; 
    border-right: dotted #FFFFFF 1px; 
    color: #FFFFFF; 
    font-size: 11px; 
    position: relative; 
    z-index: 3; 
} 
li.end { 
    float: right; 
} 
a { 
    display: block; 
    text-decoration: none; 
} 
a:link { 
    color: #FFFFFF; 
} 
a:visited { 
    color: #FFFFFF; 
} 
a:hover { 
    color: #0099FF; 
} 
a:active { 
    color: #FFFFFF; 
    overflow: visible; 
} 
ul li:active ul, ul ul { 
    visibility:visible; 
} 
ul li:active ul, ul ul li { 
    visibility:visible; 
} 
ul li:hover ul, ul ul { 
    visibility: visible; 
} 
ul li:hover ul, ul ul li { 
    visibility:visible; 
} 
ul ul { 
    list-style-type: none; 
    margin: 0; 
    position: absolute; 
    visibility: hidden; 
    z-index:-1; 
} 
ul ul li { 
    float: left; 
    padding: 5px 10px; 
    border-right: dotted #0000FF 1px; 
    background-color: #000000; 
    color: #FFFFFF; 
    font-size: 11px; 
    position: relative; 
    visibility:hidden; 
} 

ul ul li a { 
    display: block; 
    text-decoration: none; 
} 
ul ul li a:link { 
    color: #0000FF; 
} 
ul ul li a:visited { 
    color: #0000FF; 
} 
ul ul li a:hover { 
    color: #FFFFFF; 
    visibility:visible; 
} 
ul ul li a:active { 
    color: #FFFFFF; 
    overflow: visible; 
    visibility:visible; 
} 

Answer 1

Смотрите этот пример http://jsfiddle.net/La2L8/

Я думаю, у вас есть чрезмерное CSS код