我正在嘗試創建一個垂直菜單，但最終結果如下所示：這是我的代碼：$("#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我嘗試添加特定寬度，但得到相同的結果我怎樣才能做到這一點？