Question

我已经为导航栏编写了代码。我有菜单，子菜单和子子菜单。菜单和子菜单工作正常。子子菜单不起作用。它们垂直扩展而不是水平扩展。

html代码是：

<div id="topbar">
  <div class="wrapper">
    <div id="topnav">
      <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="#">Products</a>
          <ul>
            <li><a href="#">Laptop & Notebooks</a>
                <ul>
                    <li><a href="#">Acer</a></li>
                    <li><a href="#">Apple</a></li>
                </ul>
                </li>     
            <li><a href="#">Smartphone & Tablets</a></li>
            <li><a href="#">Desktop</a></li>
            <li><a href="#">Accessories</a>
                <ul>
                    <li><a href="#">RAM</a></li>
                    <li><a href="#">Casing</a></li>
                    <li><a href="#">Ups & IPS</a></li>
                </ul>
                </li>
            <li><a href="#">Brand PC</a></li>
            <li><a href="#">Clone PC</a></li>
            <li><a href="#">Camera</a></li>      
          </ul>
        </li>

        <li><a href="#">IT Solutions</a>
            <ul>
                <li><a href="#">Web Developmnet & Hosting</a></li>
                <li><a href="#">Mobile Application Development</a>
                    <ul>
                        <li><a href="#">Android Platform</a></li>
                        <li><a href="#">Windows Platform</a></li>
                     </ul>
                </li>     
                <li><a href="#">Software Developement</a></li>

            </ul>
         <li><a href="#">Portfolio</a></li>   
         <li><a href="#">Contact Us</a></li>   
      </li>
      </ul>         
    </div>
    </div>

并且CSS在这里：

#topnav{
    display:block;
    float:left;
    width:660px;
    margin:0;
    padding:0;
    list-style:none;
    font-size:13px;
    font-weight:normal;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    background-color:#000000;
    }

#topnav ul, #topnav li{
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    }

#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
    display:block;
    margin:0;
    padding:15px 20px;
    color:#FFFFFF;
    background-color:#000000;
    }

#topnav ul ul li a:link, #topnav ul ul li a:visited{
    border:none;
    }

#topnav li.last a{
    margin-right:0;
    }

#topnav li a:hover, #topnav ul li.active a{
    color:#FFFFFF;
    background-color:#059BD8;
    }

#topnav li li a:link, #topnav li li a:visited{
    width:150px;
    float:none;
    margin:0;
    padding:7px 10px;
    font-size:12px;
    font-weight:normal;
    color:#FFFFFF;
    background-color:#000000;
    }

#topnav li li a:hover{
    color:#FFFFFF;
    background-color:#059BD8;
    }

#topnav li ul{
    background:#FFFFFF;
    z-index:9999;
    position:absolute;
    left:-999em;
    height:auto;
    width:170px;
    border-left:1px solid #FFFFFF;
    border-bottom:1px solid #FFFFFF;
    }

#topnav li ul a{width:140px;}

#topnav li ul ul{margin:-32px 0 0 0;}

#topnav li:hover ul ul{left:-999em;}

#topnav li:hover ul, #topnav li li:hover ul{left:auto;}

#topnav li:hover{position:static;}

#topnav li.last a{margin-right:0;}

/* ----------------------------------------------Column Navigation-------------------------------------*/

#column .subnav{display:block; width:250px; padding:25px; background-color:#F9F9F9; margin-bottom:30px;}

#column .subnav h2{
    margin:0 0 20px 0;
    padding:0 0 14px 0;
    font-size:20px;
    font-weight:normal;
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#666666;
    background-color:#F9F9F9;
    line-height:normal;
    border-bottom:1px dotted #666666;
}

#column .subnav ul{
    margin:0;
    padding:0;
    list-style:none;
    }

#column .subnav li{
    margin:0 0 3px 0;
    padding:0;
    }

#column .subnav ul ul, #column .subnav ul ul ul, #column .subnav ul ul ul ul, #column .subnav ul ul ul ul ul{border-top:none; padding-top:0;}

#column .subnav a{
    display:block;
    margin:0;
    padding:5px 10px 5px 20px;
    color:#777777;
    background:url("../images/blue_file.gif") no-repeat 10px center #F9F9F9;
    text-decoration:none;
    border-bottom:1px dotted #666666;
    }

#column .subnav a:hover{color:#059BD8; background-color:#F9F9F9;}

#column .subnav ul ul a, #column .subnav ul ul ul a, #column .subnav ul ul ul ul a, #column .subnav ul ul ul ul ul a{background:url("../images/black_file.gif") no-repeat #F9F9F9;}
#column .subnav ul ul a{padding-left:40px; background-position:30px center;}
#column .subnav ul ul ul a{padding-left:50px; background-position:40px center;}
#column .subnav ul ul ul ul a{padding-left:60px; background-position:50px center;}
#column .subnav ul ul ul ul ul a{padding-left:70px; background-position:60px center;}

Jsfiddle链接：http://jsfiddle.net/98TRb/

Answer 1

#topnav li ul ul li {display:inline-block; margin-left:40px; background-position:40px; text-align:center; border: 1px red solid; background-color: silver;}

随意尝试这一点。我改变了颜色，因此它会为你突出。

Answer 2

尝试将此添加到您的CSS：

#topnav ul ul li:hover ul {left:170px}

查看实际操作：http://jsfiddle.net/98TRb/1/

CSS导航栏的子子菜单没有向右扩展

2 个答案: