how to display dropdown menu correctly - html

Question

I want to dsiplay menu when hover but not working.
HTML code pour afficher:
<nav>
<ul class="menu">
<li>home</li>
<li class="current">other</a></li>
<li>
services
<ul class="drop">
<li>s1</li>
<li>s2</li>
</ul>
</li>
</ul>
</nav>
CSS code to display menu and drop:
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

Please check below code for your reference.
ul.drop{display:none;}
nav ul li a:hover{background:#ccc;}
nav ul li:hover ul.drop{display:block;}
<nav>
<ul class="menu">
<li>home</li>
<li>other</li>
<li>services
<ul class="drop">
<li>s1</li>
<li>s2</li>
</ul>
</li>
</ul>
</nav>

Answer 2

<nav>
<ul class="menu">
<li>home</li>
<li class="current">other</a></li>
<li>
services
<ul class="drop">
<li>s1</li>
<li>s2</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

Several issues:
unnested </a> tag for "other" menu item.
extraneous </ul> tag at the end
black is not a valid value for the display property, use list-item instead.
Edit: see Nick De Jaeger's answer above for the corrected code. Using display: block also works, but list-item is more appropriate in this case (<li>).

Answer 4

Bart look here this is all css when I hover on drop all auther menu item hided
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>home</li>
<li>contact</li>
<li>
<?php echo $lang['MENU_OUR_PRODUCTS']; ?>
<ul class="drop">
<li><?php echo $lang['MENU_History']; ?></li>
<li><?php echo $lang['MENU_CONTACT_US']; ?></li>
<li><?php echo $lang['MENU_History']; ?></li>
<li><?php echo $lang['MENU_CONTACT_US']; ?></li>
</ul>
</li>
</ul>
</ul>
</nav>

Answer 5

see here jsfiddle
you have some problems in your code
first in your HTML you have a closing tag </a> on the li.current but you don't have any <a> there. so that closing tag is not required
also you have and extra closing tag </ul> , you have only 2 ul to close , ul.menu and ul.drop so you need only 2 </ul> not 3.
second in your CSS , you have a space between li and :hover , you need to write them together like li:hover .
also display:black doesn't exist, i guess you wanted to write display:block
Updated code HTML :
<ul class="menu">
<li>home</li>
<li class="current">other</li>
<li>
services
<ul class="drop">
<li>s1</li>
<li>s2</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;
}
let me know if it helps.
NOTE : there are so many questions about this on stackoverflow, you should be able to find your answer very quickly , also you might want to check this CSS Dropdowns

Answer 6

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>home</li>
<li class="current">other</li>
<li>services
<ul class="drop">
<li>s1</li>
<li>s2</li>
</ul>
</li>
</ul>
</nav>