时间戳

首页 > 解决方案 > 导航栏中的下拉菜单不起作用

html - 导航栏中的下拉菜单不起作用

问题描述

我试图在导航栏的右侧获得一个下拉导航，但是我的下拉项目根本没有出现，当悬停在我的按钮上时，我的按钮给了我一条蓝线，就好像它是一个链接。

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

CSS：

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

标签： htmlcssvisual-studio

解决方案

您的 CSS 缺少显示下拉菜单“打开”状态的方法。

您可以通过在父 li 上使用 :hover 选择器来更改其显示属性来做到这一点。

li:hover ul {
  display: block;
}

您的代码还有一些其他问题需要解决。

您的 HTML 无效，我建议通过https://validator.w3.org/传递它以获取一些关于它不完全正确的线索。

你也可能对这段 CSS 有问题：

ul {
  transform: translateY(-110%);
  padding: 0;
  margin: 0 auto;
  float: right;
  margin-right:30px;
}

您实际上是在页面transform: translate上的所有ul元素上执行操作，这意味着它也会影响下拉菜单的位置。

推荐阅读