CSS Sub Navigation Issue

Question

Я пытаюсь реализовать вспомогательное навигационное меню в разделе «Ювелирные изделия». Проблема в том, что я хочу пространство между двумя меню, когда они открываются. Для этого я добавил «margin-top: 5px;» к подводной навигации. Тем не менее, он создает пространство, так как вы можете видеть, как только я привожу указатель мыши к суб-навигации, он становится не выбранным.

Каков правильный способ достижения этого?

nav ul ul { 
margin-top:5px; 
background-color: #101010; 
color: #FFF; 


} 

Ссылка на jsfiddle

http://jsfiddle.net/2mpcQ/4/

Answer 1

Вы должны использовать padding-top:5px и черные подменит внутри этого проложенного DOM Element

Answer 2

пограничного-топ: 5px твердого #FFF;

Это даст пространство между меню и подменю. и будет по-прежнему обеспечивать его функциональность.

Answer 3

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

.rowheight {background: #fff; font-size: 5px;} 

<ul> 
    <li> 
    <div class="rowheight">&nbsp;</div> 
    <ul><li>Item</li></ul> 
    </li> 
</ul> 

jsfiddle ссылка -

http://jsfiddle.net/2mpcQ/25/

или может использовать border-top: 5px solid #fff; для вложенной ул но не управляема. Это повлияет на все вложенные теги UL.

надеюсь, что это поможет!

Answer 4

Если вы хотите просто решить эту проблему, попробуйте добавить border-top в .nav ul ul (border-top:5px solid #fff;). Хотя, ваш вопрос: «Каков правильный способ достичь этого?». Я думаю, что правильный путь - это стилизовать элемент «а», как сказал Диодеус.