Html 导航栏中的下拉菜单不工作
我试图在导航栏的右侧获得一个下拉导航,但是我的下拉项根本没有出现,我的按钮给了我一条蓝线,好像它是一个链接,当鼠标悬停在上面时 HTML:Html 导航栏中的下拉菜单不工作,html,css,visual-studio,Html,Css,Visual Studio,我试图在导航栏的右侧获得一个下拉导航,但是我的下拉项根本没有出现,我的按钮给了我一条蓝线,好像它是一个链接,当鼠标悬停在上面时 HTML: <div> <div class="dropdown "> <nav class="navbar navbar-expand-md bg-dark navbar- dark py-3"> <a id="name" href="index.html"> <img src="
<div>
<div class="dropdown ">
<nav class="navbar navbar-expand-md bg-dark navbar-
dark py-3">
<a id="name" href="index.html">
<img src="images/headericon.png" width="40" height="40" class="d-inline-block align-top" alt="">
</a>
<h5 style="font-size: 22px" class="ml-2 text-info mt-2">webname</h5>
</div>
<ul>
<li><a href="#">User12345</a>
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Favourite</a></li>
<li> <a href="#">Sign Out</a></li>
</ul>
</li>
</ul>
</div>
</nav>
body {
font-family: arial;
margin: 0;
padding: 0;
}
.dropdown {
margin: 0 auto;
}
ul {
transform: translateY(-110%);
padding: 0;
margin: 0 auto;
float: right;
margin-right:30px;
}
ul li {
position: relative;
list-style: none;
display: inline-block;
box-sizing: border-box;
}
ul li a {
display: block;
padding: 0 15px;
color: #D3D3D3;
text-decoration: none;
line-height: 60px;
font-size: 20px;
}
ul li a:hover {
background: #494c4e;
}
ul ul {
position: absolute;
top: 60px;
display: none;
}
您的CSS缺少显示下拉菜单“打开”状态的方法 可以通过在父li上使用:悬停选择器来更改其显示属性来完成此操作
li:hover ul {
display: block;
}
您还需要解决代码中的一些其他问题
你的HTML是无效的,我建议通过它来获得一些关于哪里不太正确的线索
您也可能会遇到与此CSS块相关的问题:
ul {
transform: translateY(-110%);
padding: 0;
margin: 0 auto;
float: right;
margin-right:30px;
}
您正在对页面上的所有ul
元素执行转换:translate
,这意味着它也将影响下拉菜单的位置