从现有 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 中。

Answer 2

已修复您的代码

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>

您的错误是，您在 li 的结束标记 </li> 之外写了 ul。您必须在 a 标签的结束标签 </a>

结束后立即放置 ul 的代码

从现有 css 菜单制作下拉菜单

Make dropdown menu from existing css menu

html

css

drop-down-menu

menu

dropdown