html - 从现有的 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>