Creating custom vertical menu

首先，很抱歉我的英语不好，但这不是我的母语，所以我会尽可能地解释我的问题。

我想使用Walker\\u Nav\\u菜单创建一个自定义菜单，该菜单应如下所示：

----------------------------------
Section 1 | Section 2 | Section 3
----------------------------------
          | SubMenu 1 |
          | SubMenu 2 |
               | Sub SubMenu 1 |
               | Sub SubMenu 2 |
          | SubMenu 3 |
          | SubMenu 4 |

子菜单1和；子菜单2上的2只应在鼠标悬停/单击链接时出现，如果没有，则消失。我正在搜索，下面的链接显示了我想适应WordPress的菜单。问题是我无法在ul和li上设置类标签：http://codepen.io/WhiteWolfWizard/pen/MYQGQQ

我试图用WordPress默认菜单类来调整它，但没有成功。我拥有的代码：

菜单：

    <div id="menubar-menu">
<ul id="menu" class="menu"><li id="menu-item-100" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-100"><a href="#">Home</a></li>
<li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-103"><a href="#">Section 1</a>
<ul class="sub-menu">
    <li id="menu-item-127" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-127"><a href="#">Subsection 1</a></li>
    <li id="menu-item-140" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-140"><a href="#">Subsection 2</a></li>
<ul class="sub-menu">
        <li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="#">SUB subsection 1</a></li>
        <li id="menu-item-121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121"><a href="#">SUB subsection 2</a></li>
</ul>
    <li id="menu-item-141" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-141"><a href="#">Subsection 3</a></li>
</ul>
</li>
</ul></div>

<script>
$(document).ready(function () {
  $(\'#menu .menu-item.menu-item-has-children .trigger-sub-menu i\').on(\'click\', function () {
    $(this).toggleClass(\'fa-flip-vertical\');
    $(this).parent().toggleClass(\'active\');
    $(\'#menu .menu-item.menu-item-has-children .sub-menu\').toggle();
    $(\'#menu .menu-item.menu-item-has-children .sub-menu .trigger-sub-menu i\').removeClass(\'fa-flip-vertical\').parent().removeClass(\'active\');
    $(\'#menu .menu-item.menu-item-has-children .sub-menu\').slideUp();
    return false;
  });
  $(\'#menu .menu-item.menu-item-has-children .sub-menu .sub-menu i\').on(\'click\', function () {
    $(this).toggleClass(\'fa-flip-vertical\');
    $(this).parent().toggleClass(\'active\');
    $(\'#menu .menu-item.menu-item-has-children .sub-menu\').slideToggle(150);
    return false;
  });
});
</script>

CSS：

#menu .menu-item {
  float: left;
  margin: 10px 0 10px 5px;
}
#menu .menu-item a {
  position: relative;
  height: 30px;
  padding: 0 10px;
  border-radius: 2px;
  display: block;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
  color: #8aa4bb;
  line-height: 30px;
  white-space: nowrap;
}
#menu .menu-item a:hover, #menu .menu-item a:active {
  background: #8aa4bb;
  color: #fff;
}
#menu .menu-item a:active {
  background: #758b9f;
}
#menu .menu-item a[class*="trigger-"] {
  padding-right: 40px;
}
#menu .menu-item a i {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
#menu .menu-item a i:after {
  content: \'\';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 50%;
  margin: auto;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
}
#menu .menu-item.menu-item-has-children {
  position: relative;
}
#menu .menu-item.menu-item-has-children .sub-menu {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 2px;
  background: #fff;
  display: none;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -webkit-transform: translateY(35px);
          transform: translateY(35px);
}
#menu .menu-item.menu-item-has-children .sub-menu li {
  float: none;
  margin: 0;
}
#menu .menu-item.menu-item-has-children .sub-menu li a {
  border-radius: 0;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  background: #758b9f;
  display: none;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li {
  width: 100%;
  display: table;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li a {
  height: 25px;
  font-size: 8pt;
  color: #fff;
  line-height: 25px;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li:first-child a {
  margin-top: 5px;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li:last-child a {
  margin-bottom: 5px;
}

任何帮助都将不胜感激！提前感谢！：）

小码农CODE

相关推荐

Two menus show up