Question

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

问题： 1.“复合”子菜单下的子项不会缩进，因为它继承了父级填充。 2.当菜单处于活动状态时，如何制作蓝色不透明度颜色。

How to custom my Nav Bar Like in the image

var count = 0;

var input = document.forms["ShoppingForm"]["choiceTxt"].value;

function listChoice(){

    count++;
    var arr = new Array();
    arr[count] = document.forms["ShoppingForm"]["choiceTxt"].value + "\n";
    for(var i = 0; i <= arr.length; i++){
        document.forms["ShoppingForm"]["listDisplay"].value = count + ". " + 
        arr[i] + "\n";
    }
}

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

Answer 1

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

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

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

1 个答案: