скрыть подменю на nav

Question

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

<nav id="nav"> 
<ul> 
    <li class="subNav"><a href="somePage1.php">Some Page1</a> 
    <ul> 
     <li><a href="relatedPage1">Related Page1</a><li> 
     <li><a href="relatedPage2">Related Page2</a><li> 
    </ul> 
    <li> 
</ul> 
</nav> 

Мой CSS выглядит следующим образом:

#nav li.subNav ul{ 
display: none; 
} 

#nav li.subNav:hover ul{ 
display: block; 
} 

У меня есть три CSS файлы, которые относятся к этой странице. Один из них в основном представляет собой веб-комплект для шрифта, а два других - bowlerplate.css и мой пользовательский файл customFile.css. Тег < #nav li.subNav: hover ul> отображается в customFile.css и < #nav li.subNav ul> diplays в бою пользовательский и шаблонный, когда я проверяю вычисленные стили.

Есть две вещи, которые я хочу исправить; подменю выравнивается горизонтально (мне нужно, чтобы он был вертикальным), и подменю не скрыто. Мне нужно было вставить/li тег вокруг ul, так что позаботилась об одной проблеме (теперь они выровнены под родительским тегом).

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

Answer 1

Вот мое решение вышеуказанной проблемы

#nav li.subNav:hover ul li { 
     visibility: visible; 
     width: 171px; 
     padding: 0; 
     cursor: pointer; 
     float: none !important; 
     display: block !important; 
    }