html下拉框怎么设置-HTML CSS 添加下拉菜单

bendan520 html

2023-09-18 0 932 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

我有一个菜单和其中一个元素的子菜单。代码在这里：。我希望你告诉我如何从我的项目中的元素实现垂直下拉菜单，因为现在它并不好。

header.html

    <header>
  <div class="main">
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/projects">My projects</a>
        <ul class="my-projects-dropdown">
          <li><a href="/projects/endlessblow">Endless Blow</a>
          <li><a href="#">Sub-2</a></li>
          <li><a href="#">Sub-3</a></li>
        </ul>
      </li>
      <li><a href="https://play.google.com/store/apps/dev?id=6173561253714763017">My Google Play link</a></li>
      <li><a href="/about">About</a></li>
      <li><input type="submit" class="a-login" value="Login" (click)="navigateToLogin()"></li>
    </ul>
  </div>
</header>

header.css

    #container {
    margin: 0 auto;
}
 
ul {
  float: right;
  list-style-type: none;
  margin-top: 25px;
  margin-right: 115px;
}
ul li {
  display: inline-block;
  vertical-align: middle;
}
ul li a {
  text-decoration: none !important;
  padding: 5px 20px;
  border: 1px solid #000;
  color: #000;
  transition: 0.4s ease;
  font-size: 20px !important;
}
ul li a:hover {
  background-color: cyan;
}
ul li a.li-login {
  text-decoration: none !important;
  position: relative;
  margin-left: 10px;
  padding: 5px 10px;
  color: #000;
  transition: 0.4s ease;
  font-size: 16px !important;
  border: none;
  vertical-align: middle;
  line-height: normal;
}
ul li:hover > ul {
  visibility: visible;
  opacity: 1;
  display: block;
 
}
ul li:nth-child(5){
  margin-left: 20px;
  vertical-align: middle;
  line-height: normal;
}
ul ul {
    display: none;
    position: absolute; 
}
ul ul li {
    float:none;
    display:list-item;
    position: relative;
}