Question

＆＃13;

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;
    }

＆＃13;

<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>

＆＃13;

我试图用下拉列表制作一个CSS菜单，但当我将鼠标悬停在选项卡上时，我无法让菜单下拉＆＃34; Informatie＆＃34;，子菜单只会在＆＃34; Informatie＆＃34;之后显示。也许你们中的一些人能够帮助我完成我的菜单。

Answer 1

您需要将ul放在li。

中

Answer 2

修正了你的代码

＆＃13;

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;
    }

＆＃13;

<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>

＆＃13;

您的错误是，您在ul的结束标记li之外写了</li>。您必须在ul代码结束标记a结束后立即添加</a>代码

从现有的css菜单中选择下拉菜单

2 个答案: