1
Я пытаюсь создать раскрывающееся меню с помощью CSS, но оно не работает. Может ли кто-нибудь сказать мне, почему? Я попробовал несколько способов, и он не хочет отказываться от каких-либо меню.Может кто-нибудь сказать мне, почему это не работает? Css выпадающее меню
<nav id="primary_nav_wrap">
\t \t \t <ul>
\t \t \t \t <li class="current-menu-item"><a href="index.html">Home</a></li>
\t \t \t \t <li><a href="#">About</a></li>
\t \t \t \t <li><a href="#">Blog</a></li>
\t \t \t \t <li id="performDrop"><a href="#">The Performer</a></li>
\t \t \t \t \t <ul id="perform">
\t \t \t \t \t \t <li class="subList"><a href="#">Resume</a></li>
\t \t \t \t \t \t <li class="subList"><a href="#">Photos</a></li>
\t \t \t \t \t \t <li class="subList"><a href="#">Videos</a></li>
\t \t \t \t \t </ul>
\t \t \t \t <li id="drinkDrop"><a href="#">The Drink-Smith</a></li>
\t \t \t \t \t <ul id="drinks">
\t \t \t \t \t \t <li class="subList"><a href="#">Wine of the Week</a></li>
\t \t \t \t \t \t <li class="subList"><a href="#">Videos</a></li>
\t \t \t \t \t </ul>
\t \t \t \t <li><a href="#">Contact</a></li>
\t \t \t </ul>
\t \t </nav>и вот CSS, который, кажется, где проблема
#primary_nav_wrap
{
\t margin:0;
\t text-align: left;
\t width:600px;
\t float:right;
\t padding: 35px 20px 20px 0;
}
#primary_nav_wrap ul
{
\t list-style:none;
\t position:relative;
\t float:right;
\t margin:0;
\t padding:0
}
#primary_nav_wrap ul a
{
\t display:block;
\t color:#333;
\t text-decoration:none;
\t font-weight:700;
\t font-size:12px;
\t line-height:32px;
\t padding:0 15px;
\t font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
\t position:relative;
\t float:left;
\t margin:0;
\t padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
\t background:#ddd
}
#primary_nav_wrap ul li:hover
{
\t background:#f6f6f6
}
#primary_nav_wrap ul ul
{
\t display:none;
\t position:absolute;
\t top:100%;
\t left:0;
\t background:#fff;
\t padding:0
}
#primary_nav_wrap ul ul li
{
\t float:none;
\t width:200px
}
#primary_nav_wrap ul ul a
{
\t line-height:120%;
\t padding:10px 15px
}
#primary_nav_wrap ul li:hover > ul
{
\t display:block
}Спасибо за любую помощь вы можете предложить!
Для переключения выпадающего списка вам необходимо использовать JavaScript/jQuery. Чистый css также возможен, но вам нужно использовать переходы. –
Как вы можете надеяться, что кто-то еще приложит все усилия, чтобы помочь, если вы даже не приложите усилий, чтобы правильно отложить свой код и сделать его доступным для чтения таким образом? – connexo
Кроме того, единственным разрешенным элементом прямого потомка в 'ul' является' li'. – connexo