javascript - 无法创建垂直菜单

我正在尝试创建一个垂直菜单，但最终结果如下所示：



这是我的代码：

$("#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;
}

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

本质上，我希望所有项目都像这样的垂直菜单：https://www.w3schools.com/howto/howto_css_vertical_menu.asp

我尝试添加特定的宽度，但得到的结果相同

我该如何实现？

最佳答案

您正在使用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>

但这实际上就是您所需要的。其余的都是不必要的：

#example-one {
  margin: 0 auto;
  align-self: center;
  list-style: none;
  position: relative;
}

#example-one a {
  color: #bbb;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
}

#example-one li {
  padding: 6px 10px 4px 10px;
}

#example-one a:hover {
  color: white;
}

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

我也会重做您的橙色线。您不需要JS / jQuery。只需使用CSS。

关于javascript - 无法创建垂直菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61138449/