水平子菜单

时间：2016-07-29 10:09:20

标签： html css menu submenu

我想创建水平子菜单。 Hovewer现在我只创建了dopdown子菜单。我有以下css和html代码，请参阅演示：

你能帮我改进代码吗？谢谢。

HTML 

<ul id="menu-main-menu" class="top_big_menu"><li id="menu-item-4192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-4192"><a href="#">Home</a></li>
<li id="menu-item-4159" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4159"><a href="#">Football</a><ul>
        <li><a href="#">News</a></li>
        <li><a href="#">Interviews</a></li>
        <li><a href="#">Comments</a></li>
        </ul></li>
<li id="menu-item-4160" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4160"><a href="#">Football 2</a><ul>
        <li><a href="#">News 2</a></li>
        <li><a href="#">Interviews 2</a></li>
        </ul></li>
<li id="menu-item-4161" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-4161"><a href="#">Football 3</a><ul>
        <li><a href="http://www.example.com/child1.com">News 3</a></li>
        <li><a href="http://www.example.com/child2.com">Interviews 3</a></li>
        </ul></li>
<li id="menu-item-4190" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4190"><a href="#">Menu 4</a></li>
<li id="menu-item-4189" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4189"><a href="#">Menu 5</a></li>
</ul>

CSS 

.top_big_menu li{
    display: inline-block;
    float: none;
    position: relative;
    bottom: -10px;
    float: left;
    margin-left:1px;
}

.top_big_menu li a{
    font-family: 'Calibri',sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: #212121;
    text-transform: uppercase;
    display: block;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 50px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

.top_big_menu li a:hover{
    background-color: #E31E24;
    color: #fff;
    text-decoration: none;
}

.top_big_menu  .current-menu-item a, .top_big_menu .current_page_item a{
    background-color: #E31E24;
    color: #fff;
}

.top_big_menu li ul{
display: none;
position:absolute;
z-index:2;
padding-bottom:13px;
}

.top_big_menu li:hover ul{ display:inline;
color:white;
background:#E31E24;
height:auto; 
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;  }

https://jsfiddle.net/mart01/8vbnhxx0/

2 个答案:

答案 0 :(得分：1)

#menu-main-menu{
position: relative;
}

应用上述代码，而不是将position:relative应用于.top_big_menu li{}，请检查此link。

答案 1 :(得分：-2)

示例Fiddle垂直和水平菜单。在您的示例中，您需要使用直接样式继承并使用：从那里悬停而不是从链接on this fiddle。

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.sub-menu {
  display: none;
  /* position: absolute; */
  top: 100%;
  background-color: green;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sub-menu > li {
  position: relative;
}

.sub-menu > li > a {
  display: block;
  padding: 5px 10px;
}

.menu > li {
  /* position: relative; */
  padding: 5px;
}

.menu li:hover > .sub-menu {
  display: block;
}

.menu > li > a {
  display: block;
  text-decoration: none;
  padding: 5px 10px;
  background-color: tomato;
}

.sub-menu .sub-menu {
  padding-left: 20px;
  left: 100%;
  top: 0;
  min-width: 120px;
}

.menu-inline > li {
  display: inline-block;
}

.menu-inline .sub-menu {
  position: absolute;
}

.menu-inline .sub-menu .sub-menu {
  padding-left: 0;
}
<ul class="menu">
  <li>
    <a href="#">menu-link</a>
    <ul class="sub-menu">
      <li>
        <a href="#">sub-menu-link</a>
        <ul class="sub-menu">
          <li>
            <a href="#">sub-menu-link</a>
            <ul class="sub-menu">
              <li><a href="#">sub-menu-link</a>
              </li>
              <li><a href="#">sub-menu-link</a>
              </li>
              <li><a href="#">sub-menu-link</a>
              </li>
              <li><a href="#">sub-menu-link</a>
              </li>
            </ul>
          </li>
          <li><a href="#">sub-menu-link</a>
          </li>
          <li><a href="#">sub-menu-link</a>
          </li>
          <li><a href="#">sub-menu-link</a>
          </li>
        </ul>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">menu-link</a>
    <ul class="sub-menu">
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>

    </ul>
  </li>
  <li>
    <a href="#">menu-link</a>
    <ul class="sub-menu">
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">menu-link</a>
    <ul class="sub-menu">
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
    </ul>
  </li>
</ul>





<ul class="menu menu-inline">
  <li>
    <a href="#">menu-link</a>
    <ul class="sub-menu">
      <li>
        <a href="#">sub-menu-link</a>
        <ul class="sub-menu">
          <li><a href="#">sub-menu-link</a>
          </li>
          <li>
            <a href="#">sub-menu-link</a>
            <ul class="sub-menu">
              <li><a href="#">sub-menu-link</a>
              </li>
              <li><a href="#">sub-menu-link</a>
              </li>
              <li><a href="#">sub-menu-link</a>
              </li>
              <li><a href="#">sub-menu-link</a>
              </li>
            </ul>
          </li>

          <li><a href="#">sub-menu-link</a>
          </li>
          <li><a href="#">sub-menu-link</a>
          </li>
        </ul>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">menu-link</a>
    <ul class="sub-menu">
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>

    </ul>
  </li>
  <li>
    <a href="#">menu-link</a>
    <ul class="sub-menu">
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">menu-link</a>
    <ul class="sub-menu">
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
      <li><a href="#">sub-menu-link</a>
      </li>
    </ul>
  </li>
</ul>

相关问题
最新问题