从现有的 CSS 菜单制作下拉菜单

Question

ul li ul.dropdown{
	min-width: 125px;
    background: #f2f2f2;
    display: none;
    position: absolute;
    z-index: 999;
    left: 0;
}
ul li:hover ul.dropdown{
    display: block;
}
ul li ul.dropdown li{
	display: block;
    }

<div class="navigation">
 


	<ul>
	<li><a href = 'index.html'>Home</a></li>
	<li><a href = 'media.html'>Media Design</a></li>
	<li><a href = 'innovatie.html'>Innovatieroutes</a></li>
	<li><a href = 'info.html'>Informatie</a></li>
	        <ul class="dropdown">
            <li><a href="#">Open dagen</a></li>
            <li><a href="#">Beroepen</a></li>
            <li><a href="#">Studie</a></li>
			</ul>
	<li><a href = 'contact.html'>Contact</a></li>
</ul>

我正在尝试制作一个带有下拉菜单的 CSS 菜单，但是当我将鼠标悬停在“Informatie”选项卡上时，我无法让菜单下拉菜单，子菜单只会在“Informatie”之后显示.也许你们中的一些人可以帮我做菜单。

Answer 1

修正了你的代码

ul li ul.dropdown{
	min-width: 125px;
    background: #f2f2f2;
    display: none;
    position: absolute;
    z-index: 999;
    left: 0;
}
ul li:hover ul.dropdown{
    display: block;
}
ul li ul.dropdown li{
	display: block;
    }

<div class="navigation">
 


	<ul>
	<li><a href = 'index.html'>Home</a></li>
	<li><a href = 'media.html'>Media Design</a></li>
	<li><a href = 'innovatie.html'>Innovatieroutes</a>
	<li><a href = 'info.html'>Informatie</a>
	        <ul class="dropdown">
            <li><a href="#">Open dagen</a></li>
            <li><a href="#">Beroepen</a></li>
            <li><a href="#">Studie</a></li>
			</ul>
     </li>
	<li><a href = 'contact.html'>Contact</a></li>
</ul>

您的错误是，您将ul 写在li 的结束标签</li> 之外。你必须把ul的代码放在a标签的结束标签</a>结束之后

Answer 2

您需要将ul 放在li 中。