Question

子子菜单Youtube1不显示。当我将鼠标悬停在Youtube1上然后Featured时，如何显示Youtube？这是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;
}

Answer 1

这里是您的问题的解决方案

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

Answer 2

使用简单的：

 <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 个答案: