导航栏子菜单答案

【问题标题】：Nav bar sub menus导航栏子菜单
【发布时间】：2015-04-15 05:59:06
【问题描述】：

子子菜单Youtube1 不显示。当我将鼠标悬停在Featured 然后Youtube 上时，如何使Youtube1 显示？这是 HTML：

    <ul>
       <li>About</a></li>
       <li>Featured</a>
          <ul>
              <li>Youtube</a>
                  <ul>
                      <li>Youtube1</a></li>
                  </ul>
              </li>
          </ul>
      </li>
      <li>Contact</li>
      <li>Facebook</li>
    </ul>

CSS：

 ul {
  display: inline;
  margin-left: 0;
  overflow: hidden;
  padding-right: 17px;
  padding-top: 10px;
  list-style-type: none;
  z-index: 1;
}
ul li {
  font-weight: bold;
  display: inline-block;
  margin-right: -4px;
  position: relative;
}

ul li ul {
  padding: 0;
  position: absolute;
  top: 50px;
  left: 2px;
  display: none;
}

ul li:hover ul {
  display: block;
}

ul li ul li ul{
  padding: 0;
  position: absolute;
  left: 100%;
  top: 0;
  display: none;
}

ul li ul li:hover ul {
  display: block;
}

a:link, a:visited {
    display: block;
    width: 174px;
    font-weight: bold;
    line-height: 50px;
    color: #FFFFFF;
    background-color: #000000;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

}
a:hover, a:active {
    background-color: gray;
}

【问题讨论】：

请提及你想要什么，据我了解，我建议删除 margin-right: -4px;从 ul li 和 top: 50px;来自 ul li ul

标签： html css menu navigation navbar

【解决方案1】：

使用简单的：

 <ul>
   <li><a>About</a></li>
     <li><a>Featured</a>
        <ul>
          <li><a>Youtube</a>
            <ul>
              <li><a>Youtube1</a></li>
            </ul>
          </li>
        </ul>
   </li>
   <li>Contact</li>
   <li>Facebook</li>
 </ul>

还有css：

ul li{
 list-style-type:none;
 position:relative;
 float:left;
 display:block;
 padding:5px 10px; /* adjust your padding */
 background:#fff; /*adjust your color */
}
ul li ul{
 position:absolute;
 top:100%;
 left:-999999em;
}
ul li ul li{float:none;position:relative;}
ul li:hover ul{
 left:0;
}
ul li ul li ul{position:absolute; top:0; left:-999999em;}
ul li ul li:hover ul{left:100%;}

【讨论】：

【解决方案2】：

这里是您问题的解决方案

HTML

  <ul>
           <li><a>About</a></li>
           <li><a>Featured</a>
              <ul>
                  <li><a>Youtube</a>
                      <ul>
                          <li><a>Youtube1</a></li>
                      </ul>
                  </li>
              </ul>
          </li>
          <li>Contact</li>
          <li>Facebook</li>
        </ul>

CSS

 ul {
  display: inline;
  margin-left: 0;
  padding-right: 17px;
  padding-top: 10px;
  list-style-type: none;
  z-index: 1;
}
ul li {
  font-weight: bold;
  display: inline-block;
  position: relative;
    padding:10px
}

ul > li > ul {
  position: absolute;
  display: none;
    left:0;
    padding:0;
}

ul > li:hover > ul {
  display: block;
}

ul > li > ul > li > ul{
  position: absolute;
  display: none;
}

ul > li > ul > li:hover > ul {
  display: block;
}

a:link, a:visited {
    display: block;
    width: 174px;
    font-weight: bold;
    line-height: 50px;
    color: #FFFFFF;
    background-color: #000000;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

}
a:hover, a:active {
    background-color: gray;
}

jsfiddle

【讨论】：