无法创建垂直菜单

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 代码替换为这些行。&nbsp;.nav-wrap {&nbsp; &nbsp; &nbsp; margin: 50px auto;&nbsp; &nbsp; &nbsp; background-color: rgba(0, 0, 0, 0.6);&nbsp; &nbsp; &nbsp; border-top: 2px solid white;&nbsp; &nbsp; &nbsp; border-bottom: 2px solid white;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; /* Clearfix */&nbsp; &nbsp; .group:after {&nbsp; &nbsp; &nbsp; visibility: hidden;&nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; content: "";&nbsp; &nbsp; &nbsp; clear: both;&nbsp; &nbsp; &nbsp; height: 0;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; *:first-child+html .group {&nbsp; &nbsp; &nbsp; zoom: 1;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; /* IE7 */&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; /* Example One */&nbsp; &nbsp; #example-one {&nbsp; &nbsp; &nbsp; &nbsp; list-style: none;&nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; display: grid;&nbsp; &nbsp; &nbsp; &nbsp; max-width: 200px;&nbsp; &nbsp; &nbsp; &nbsp; background: #F1F1F1;&nbsp; &nbsp; &nbsp; &nbsp; padding: 0px;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; #example-one li {&nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; #example-one a {&nbsp; &nbsp; &nbsp; &nbsp; color: #000;&nbsp; &nbsp; &nbsp; &nbsp; font-family: sans-serif;&nbsp; &nbsp; &nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; padding: 11px;&nbsp; &nbsp; &nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; &nbsp; &nbsp; text-transform: capitalize;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; #example-one a:hover {&nbsp; &nbsp; &nbsp; &nbsp; color: #818181;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; #magic-line {&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; bottom: -2px;&nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp; &nbsp; width: 100px;&nbsp; &nbsp; &nbsp; height: 2px;&nbsp; &nbsp; &nbsp; background: #fe4902;&nbsp; &nbsp; }&nbsp; &nbsp; .current_page_item {&nbsp; &nbsp; &nbsp; &nbsp; background: #4CAF50;&nbsp; &nbsp; }&nbsp; &nbsp; .current_page_item a {&nbsp;&nbsp; &nbsp; &nbsp; color:white;&nbsp; &nbsp; }<div class="menu">&nbsp; <ul class="group" id="example-one">&nbsp; &nbsp; <li class="current_page_item" data-target="home" data-posmenu="-35px"><a href="index.php#home">hello</a></li>&nbsp; &nbsp; <li class="" data-target="about"><a href="index.php#about">About</a></li>&nbsp; &nbsp; <li class="" data-target="product"><a href="index.php#product">PRODUCTS</a></li>&nbsp; &nbsp; <li class="" data-target="news"><a href="index.php#news">News</a></li>&nbsp; &nbsp; <li class="" data-target="contact"><a href="index.php#contact">Contact</a></li>&nbsp; &nbsp; <li class="" data-target="policy_privacy"><a href="<?php echo ABSOLUTE_PATH.BASE_PAGE; ?>?<?php echo PAGE_PARAM_KEY; ?>=privacy_policy">Privacy</a></li>&nbsp; </ul></div>

Answer 2

您正在使用float和display: inline-block。只需删除这些属性即可。.nav-wrap {&nbsp; margin: 50px auto;&nbsp; background-color: rgba(0, 0, 0, 0.6);&nbsp; border-top: 2px solid white;&nbsp; border-bottom: 2px solid white;}/* Clearfix */.group:after {&nbsp; visibility: hidden;&nbsp; display: block;&nbsp; content: "";&nbsp; clear: both;&nbsp; height: 0;}*:first-child+html .group {&nbsp; zoom: 1;}/* IE7 *//* Example One */#example-one {&nbsp; margin: 0 auto;&nbsp; list-style: none;&nbsp; position: relative;&nbsp; width: 200px;}#example-one a {&nbsp; color: #bbb;&nbsp; font-size: 14px;&nbsp; padding: 6px 10px 4px 10px;&nbsp; text-decoration: none;&nbsp; text-transform: uppercase;}#example-one a:hover {&nbsp; color: white;}#magic-line {&nbsp; position: absolute;&nbsp; bottom: -2px;&nbsp; left: 0;&nbsp; width: 100px;&nbsp; height: 2px;&nbsp; background: #fe4902;}.current_page_item a {&nbsp; color: white !important;}.ie6 #magic-line {&nbsp; bottom: -3px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="menu">&nbsp; <ul class="group" id="example-one">&nbsp; &nbsp; <li class="current_page_item" data-target="home" data-posmenu="-35px"><a href="index.php#home">hello</a></li>&nbsp; &nbsp; <li class="" data-target="about"><a href="index.php#about">About</a></li>&nbsp; &nbsp; <li class="" data-target="product"><a href="index.php#product">PRODUCTS</a></li>&nbsp; &nbsp; <li class="" data-target="news"><a href="index.php#news">News</a></li>&nbsp; &nbsp; <li class="" data-target="contact"><a href="index.php#contact">Contact</a></li>&nbsp; &nbsp; <li class="" data-target="policy_privacy"><a href="<?php echo ABSOLUTE_PATH.BASE_PAGE; ?>?<?php echo PAGE_PARAM_KEY; ?>=privacy_policy">Privacy</a></li>&nbsp; </ul></div>