个人中心
gpt4 book ai didi

html - 如何自定义我的导航栏，如下图所示

转载 作者：行者123 更新时间：2023-11-28 02:06:51 25 4
gpt4 key购买 nike

我想使用以下导航设计来设计我的导航栏。但是代码不能正常工作。

问题:1.“复合”子菜单下的子菜单不缩进，因为它继承了父padding。2. 如何在菜单激活时使不透明颜色变为蓝色。

How to custom my Nav Bar Like in the image

This is my current nav bar 

body{
  background-color: rgb(232, 235, 239);
}
/*Top Header*/
section .header{
  background-color: gray;
  height:50px;
  max-width: 100%;
}



.side-menu ul.menu-item{
     list-style-type: none;
     margin-top: 30px;
     padding: 0;
     background-color: white;

}

.side-menu ul.menu-item li.item a{
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    padding-left: 60px;
}

.side-menu ul.menu-item li.item a:hover{
  background-color: blue;
}

ul.child-menu{
   list-style-type: none;
   padding-left: 0;
}

ul.child-menu li a{
  display: block;
  color: #000;
  text-decoration: none;
  padding-left: 300px;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
        <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>

  <section>
    <div class="header">
    </div>
  </section>

  <section>
    <div class="col-sm-3 col-md-3 col-lg-3">
      <div class="side-menu">
          <ul class="menu-item">
            <li class="item"><a href="" class="active">Dashboard</a></li>
            <li class="item"><a href="">Insolvensy</a></li>
            <li class="item">
              <a href="">Compound</a>
              <ul class="child-menu">
                <li><a href="">Active Compound</a></li>
                <li><a href="">Active Compound</a></li>
              </ul>

            </li>
          </ul>
      </div>
    </div>
  </section>

  <section>
    <div class="col-sm-9 col-md-9 col-lg-9">
      sdsdsds
    </div>
  </section>

    <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

最佳答案

要达到预期结果，请使用以下选项

ul.child-menu 的左填充将显示为子菜单，悬停时蓝色突出显示，使用 border-left 看起来与图像相似

body{
  background-color: rgb(232, 235, 239);
}
/*Top Header*/
section .header{
  background-color: gray;
  height:50px;
  max-width: 100%;
}



.side-menu ul.menu-item{
     list-style-type: none;
     margin-top: 30px;
     padding: 0;
     background-color: white;

}

.side-menu ul.menu-item li.item a{
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    padding-left: 60px;
}

.side-menu ul.menu-item li.item a:hover{
  border-left: 2px solid blue
}

ul.child-menu{
   list-style-type: none;
   padding-left: 20px;
  display:none
}

ul.child-menu li a{
  display: block;
  color: #000;
  text-decoration: none;
  padding-left: 300px;

}

.side-menu ul.menu-item li:hover > .child-menu{
  display:block
}

codepen- https://codepen.io/nagasai/pen/PQdyRg

关于html - 如何自定义我的导航栏，如下图所示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48970241/

25 4 0
文章推荐： javascript - .data() 没有按预期工作
文章推荐： javascript - 如何在 iOS uiautomation 中使用两个按钮处理警报
文章推荐： html - 获取 FAN 页面上的好友列表，而不是个人页面
文章推荐： javascript - JSFiddle : Please us POST request