无法创建垂直菜单

Question

我正在尝试创建一个垂直菜单，但最终结果如下所示：这是我的代码：$("#example-one").append("<li id='magic-line'></li>");/* Cache it */var $magicLine = $("#magic-line");$magicLine  .width($(".current_page_item").width())  .css("left", $(".current_page_item a").position().left)  .data("origLeft", $magicLine.position().left)  .data("origWidth", $magicLine.width());$("#example-one li")  .find("a")  .hover(    function() {      $el = $(this);      leftPos = $el.position().left;      newWidth = $el.parent().width();      $magicLine.stop().animate({        left: leftPos,        width: newWidth      });    },    function() {      $magicLine.stop().animate({        left: $magicLine.data("origLeft"),        width: $magicLine.data("origWidth")      });    }  );.nav-wrap {  margin: 50px auto;  background-color: rgba(0, 0, 0, 0.6);  border-top: 2px solid white;  border-bottom: 2px solid white;}/* Clearfix */.group:after {  visibility: hidden;  display: block;  content: "";  clear: both;  height: 0;}*:first-child+html .group {  zoom: 1;}/* IE7 *//* Example One */#example-one {  margin: 0 auto;  list-style: none;  position: relative;  width: 200px;}#example-one li {  display: inline-block;}#example-one a {  color: #bbb;  font-size: 14px;  float: left;  padding: 6px 10px 4px 10px;  text-decoration: none;  text-transform: uppercase;}#example-one a:hover {  color: white;}#magic-line {  position: absolute;  bottom: -2px;  left: 0;  width: 100px;  height: 2px;  background: #fe4902;}.current_page_item a {  color: white !important;}.ie6 #example-one li,.ie7 #example-one li {  display: inline;}.ie6 #magic-line {  bottom: -3px;}本质上我希望将所有项目都作为垂直菜单，如下所示： https: //www.w3schools.com/howto/howto_css_vertical_menu.asp我尝试添加特定宽度，但得到相同的结果我怎样才能做到这一点？

Answer 1

请将您的 CSS 代码替换为这些行。

 .nav-wrap {

      margin: 50px auto;

      background-color: rgba(0, 0, 0, 0.6);

      border-top: 2px solid white;

      border-bottom: 2px solid white;

    }

    

    /* Clearfix */

    .group:after {

      visibility: hidden;

      display: block;

      content: "";

      clear: both;

      height: 0;

    }

    

    *:first-child+html .group {

      zoom: 1;

    }

    

    /* IE7 */

    

    /* Example One */

    #example-one {

        list-style: none;

        position: relative;

        display: grid;

        max-width: 200px;

        background: #F1F1F1;

        padding: 0px;

    }

    

    #example-one li {

      display: inline-block;

    }

    

    #example-one a {

        color: #000;

        font-family: sans-serif;

        font-size: 14px;

        width: 100%;

        float: left;

        padding: 11px;

        text-decoration: none;

        text-transform: capitalize;

    }

    

    #example-one a:hover {

        color: #818181;

    }

    

    #magic-line {

      position: absolute;

      bottom: -2px;

      left: 0;

      width: 100px;

      height: 2px;

      background: #fe4902;

    }

    .current_page_item {

        background: #4CAF50;

    }

    .current_page_item a { 

      color:white;

    }

<div class="menu">

  <ul class="group" id="example-one">

    <li class="current_page_item" data-target="home" data-posmenu="-35px"><a href="index.php#home">hello</a></li>

    <li class="" data-target="about"><a href="index.php#about">About</a></li>

    <li class="" data-target="product"><a href="index.php#product">PRODUCTS</a></li>

    <li class="" data-target="news"><a href="index.php#news">News</a></li>

    <li class="" data-target="contact"><a href="index.php#contact">Contact</a></li>

    <li class="" data-target="policy_privacy"><a href="<?php echo ABSOLUTE_PATH.BASE_PAGE; ?>?<?php echo PAGE_PARAM_KEY; ?>=privacy_policy">Privacy</a></li>

  </ul>

</div>

Answer 2

您正在使用float和display: inline-block。只需删除这些属性即可。

.nav-wrap {

  margin: 50px auto;

  background-color: rgba(0, 0, 0, 0.6);

  border-top: 2px solid white;

  border-bottom: 2px solid white;

}

/* Clearfix */

.group:after {

  visibility: hidden;

  display: block;

  content: "";

  clear: both;

  height: 0;

}

*:first-child+html .group {

  zoom: 1;

}

/* IE7 */

/* Example One */

#example-one {

  margin: 0 auto;

  list-style: none;

  position: relative;

  width: 200px;

}

#example-one a {

  color: #bbb;

  font-size: 14px;

  padding: 6px 10px 4px 10px;

  text-decoration: none;

  text-transform: uppercase;

}

#example-one a:hover {

  color: white;

}

#magic-line {

  position: absolute;

  bottom: -2px;

  left: 0;

  width: 100px;

  height: 2px;

  background: #fe4902;

}

.current_page_item a {

  color: white !important;

}

.ie6 #magic-line {

  bottom: -3px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="menu">

  <ul class="group" id="example-one">

    <li class="current_page_item" data-target="home" data-posmenu="-35px"><a href="index.php#home">hello</a></li>

    <li class="" data-target="about"><a href="index.php#about">About</a></li>

    <li class="" data-target="product"><a href="index.php#product">PRODUCTS</a></li>

    <li class="" data-target="news"><a href="index.php#news">News</a></li>

    <li class="" data-target="contact"><a href="index.php#contact">Contact</a></li>

    <li class="" data-target="policy_privacy"><a href="<?php echo ABSOLUTE_PATH.BASE_PAGE; ?>?<?php echo PAGE_PARAM_KEY; ?>=privacy_policy">Privacy</a></li>

  </ul>

</div>