时间戳

首页 > 解决方案 > 带下拉菜单的等宽导航栏链接

css - 带下拉菜单的等宽导航栏链接

问题描述

我想将帮助链接转换为悬停时的下拉菜单。我必须将其转换为无序列表还是可以使用现有结构。提前致谢。

 <div class="navbar-project">
   <a href="#">Details</a> 
   <a href="#">Forms</a> 
   <a href="#">Documents</a> 
   <a href="#">Help</a> 
 </div>

CSS

 .navbar-project {
   width: 100%;
   background-color: #fff;
   overflow: auto;
   margin-top: 25px;
   margin-bottom: 25px;
 }

 .navbar-project a {
   float: left;
   padding: 12px;
   color: #000;
   text-decoration: none;
   font-size: 20px;
   width: 25%; /* Four links of equal widths */
   text-align: center;
   border-bottom: 3px solid white;
 }

 .navbar-project a:hover {
   border-bottom: 3px solid black;
 }

 .navbar-project a.active {
   background-color: #fff;
   border-bottom: 3px solid red;
 }

 @media screen and (max-width: 500px) {
   .navbar-project a {
     float: none;
     display: block;
     width: 100%;
     text-align: left;
   }
 }

标签： cssnav

解决方案

您只需要在 a 中打开 Help 项目ul，创建li项目然后使用display: none;隐藏它，之后您可以使用hoverinul并指定您希望li项目使用display: block;.

.navbar-project {
   width: 100%;
   background-color: #fff;
   overflow: auto;
   margin-top: 25px;
   margin-bottom: 25px;
 }

 .navbar-project a {
   float: left;
   padding: 12px;
   color: #000;
   text-decoration: none;
   font-size: 20px;
   width: 25%; /* Four links of equal widths */
   text-align: center;
   border-bottom: 3px solid white;
 }

 .navbar-project a:hover {
   border-bottom: 3px solid black;
 }

 .navbar-project a.active {
   background-color: #fff;
   border-bottom: 3px solid red;
 }

.navbar-project ul{
  display: flex;
  flex-direction: column;
  
}

.navbar-project ul li{
  display: none;
}

.navbar-project ul:hover li{
  display: block;
}


 @media screen and (max-width: 500px) {
   .navbar-project a {
     float: none;
     display: block;
     width: 100%;
     text-align: left;
   }
 }
 <div class="navbar-project">
   <a href="#">Details</a> 
   <a href="#">Forms</a> 
   <a href="#">Documents</a> 
   <ul><a href="#">Help</a>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     
   </ul> 
 </div>

注意：我相信为了语义起见，最好始终使用ul或 ol在您nav menu的Kai在另一条评论中解释的那样，所以您只需要在第一个列表中创建另一个列表，就像我演示的那样。

编辑：我做了一些修改，这次 25% 的宽度起作用了，这就是例子

推荐阅读