Как создать навигацию с подразделами?

Question

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

HTML

<ul> 
    <li id="one">Primary One</li> 
    <li id="two">Primary Two</li> 
    <li id="three">Primary Three</li> 
    <li id="hidden-one">Secondary One</li> 
    <li id="hidden-one">Secondary Two</li> 
</ul> 

SASS

#hidden-one { 
    display: none; 
} 

#one:hover ~ #hidden-one { 
    display: inline; 
} 

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

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

Было бы здорово, если бы у кого-то была идея, как это сделать.

Answer 1

Вы хотели бы иметь подраздел в своем собственном неупорядоченном списке. Вставьте подраздел < ul> внутри родительского списка < li>

изменить ваши HTML к этому:

<ul> 
    <li id="one">Primary One 
     <ul> 
      <li class="hidden-one"><a href="#">Secondary One</a></li> 
      <li class="hidden-one"><a href="#">Secondary Two</a></li> 
     </ul> 
    </li> 
    <li id="two">Primary Two</li> 
    <li id="three">Primary Three</li> 
</ul> 

CSS:

.hidden-one { 
    display: none; 
} 
#one:hover > ul > .hidden-one { 
    display: inline; 
} 

JSFiddle Demo