как правильно отображать выпадающее меню

Question

Я хочу использовать меню dsiplay, когда наведите курсор, но не работаем.

HTML код налить afficher: код

<nav> 
    <ul class="menu"> 
     <li><a href="index.html">home</a></li> 
     <li class="current">other</a></li> 
     <li> 
      <a href="index-2.html">services</a> 
      <ul class="drop"> 
       <li><a href="index-2.html">s1</a></li> 
       <li><a href="index-4.html">s2</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

CSS для отображения меню и падение:

nav .menu li:hover > a { 
    background: #e2782e; 
    transition: all 0.5s; 
    color: white; 
    font-weight:bold; 
} 

.drop{ 
    display:none; 
} 

li :hover > .drop{ 
    display:black; 
} 

Answer 1

nav .menu li:hover > a { 
 
    background: #e2782e; 
 
    transition: all 0.5s; 
 
    color: #FFF; 
 
    font-weight: bold; 
 
} 
 

 
.drop{ 
 
    display: none; 
 
} 
 

 
li:hover > .drop{ 
 
    display: block; 
 
}

<nav> 
 
    <ul class="menu"> 
 
    <li><a href="index.html">home</a></li> 
 
    <li class="current"><a href="#">other</a></li> 
 
    <li><a href="index-2.html">services</a> 
 
     <ul class="drop"> 
 
     <li><a href="index-2.html">s1</a></li> 
 
     <li><a href="index-4.html">s2</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 2

<nav> 


    <ul class="menu"> 


            <li><a href="index.html">home</a></li> 
            <li class="current">other</a></li> 


            <li> 
             <a href="index-2.html">services</a> 
             <ul class="drop"> 

            <li><a href="index-2.html">s1</a></li> 
            <li><a href="index-4.html">s2</a></li> 

             </ul> 
            </li> 

           </ul> 

    </ul> 

</nav> 


nav .menu li:hover .drop li a { 
    background: #e2782e; 
    transition: all 0.5s; 
    color: white; 
    font-weight:bold; 
} 

.drop{ 
    display:none; 
} 

li :hover > .drop{ 
    display:block; 
} 

Please try this code. 

Answer 3

Несколько вопросов:

• неуместный </a> тег для "other" пункт меню.
• постороннее </ul> тег в конце
• black не является допустимым значением для display свойства используйте list-item вместо этого.

Редактировать: см. Ответ Ника Де Жагера выше для исправленного кода. Использование display: block также работает, но list-item является более подходящим в этом случае (<li>).

Answer 4

Bart посмотреть здесь это все CSS, когда я парить на Отбросьте все Автор развивает пункт меню спрятан

nav .menu { 
     height: 60px; 
     background: #8d8989; 
     border-radius: 5px; 
     padding: 0; 
     margin: 0; 
     text-align: center; /* center the li */ 

    } 

    nav .menu li { 
     display: inline-block; 
    } 

    nav .menu li a{ 
     font-family: arial, sans-serif; 
     color: #fff; 
     text-decoration: none; 
     text-transform: uppercase; 
     line-height: 60px; 
     font-weight:bold; 
     vertical-align: middle; 
     padding: 20px; 
     transition: all 0.5s; 
    } 
    nav .menu li:hover > a { 
     background: #e2782e; 
     transition: all 0.5s; 
     color: #FFF; 
     font-weight: bold; 
    } 

    .drop{ 
     display: none; 
    } 

    li:hover > .drop{ 
    display: list-item; 
     background-color:red; 
    } 

HTML

<nav> 


    <ul class="menu"> 


            <li><a href="index.html">home</a></li> 
            <li><a href="index.html">contact</a></li> 
            <li> 
             <a href="index-2.html"><?php echo $lang['MENU_OUR_PRODUCTS']; ?></a> 
             <ul class="drop"> 

            <li><a href="index-2.html"><?php echo $lang['MENU_History']; ?></a></li> 
            <li><a href="index-4.html"><?php echo $lang['MENU_CONTACT_US']; ?></a></li> 
            <li><a href="index-2.html"><?php echo $lang['MENU_History']; ?></a></li> 
            <li><a href="index-4.html"><?php echo $lang['MENU_CONTACT_US']; ?></a></li> 
             </ul> 
            </li> 

           </ul> 

    </ul> 

</nav> 

Answer 5

посмотреть здесь jsfiddle

у вас есть какие-то проблемы ваш код

сначала в вашем HTML у вас есть закрывающий тег </a> на li.current, но у вас нет <a>. так что закрывающий тег не требуется

также у вас есть и дополнительный закрывающий тег </ul>, у вас есть только 2 ul закрыть, ul.menu и ul.drop поэтому вам нужно только 2 </ul> не 3.

второе место в вашем CSS , у вас есть пробел между li и :hover, вам нужно написать их вместе, как li:hover.

также display:black не существует, я предполагаю, что вы хотите написать display:block

обновленный код HTML:

<ul class="menu"> 


           <li><a href="index.html">home</a></li> 
           <li class="current">other</li> 


           <li> 
            <a href="index-2.html">services</a> 
            <ul class="drop"> 

           <li><a href="index-2.html">s1</a></li> 
           <li><a href="index-4.html">s2</a></li> 

            </ul> 
           </li> 



    </ul> 

CSS:

nav .menu li:hover > a { 
    background: #e2782e; 
    transition: all 0.5s; 
    color: white; 
    font-weight:bold; 
} 

.drop{ 
    display:none; 
} 

li:hover > .drop{ 
    display:block; 
} 

дайте мне знать, если это помогает.

Примечание: Есть так много вопросов по этому поводу на StackOverflow, вы должны быть в состоянии найти ответ очень быстро, и вы можете проверить это CSS Dropdowns

Answer 6

Пожалуйста, проверьте ниже код для вашей ссылки ,

ul.drop{display:none;} 
 
nav ul li a:hover{background:#ccc;} 
 
nav ul li:hover ul.drop{display:block;}

<nav> 
 
    <ul class="menu"> 
 
    <li><a href="#">home</a></li> 
 
    <li><a href="#">other</a></li> 
 
    <li><a href="#">services</a> 
 
     <ul class="drop"> 
 
     <li><a href="#">s1</a></li> 
 
     <li><a href="#">s2</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>