Question

我是css的新手，并试图让这项工作暂时没有运气

基本上我想在选择“MENU”时显示一个下拉菜单，但这里似乎没有发生任何事情是我的css：

#tabs {
    margin-top:-12ex;
    float:left;
    width:100%;
    font-size:100%;
    line-height:10px;
    vertical-align:top;
    margin-left:20px;
    position:static;
    }

#tabs ul {
    margin:0;
    padding:1px 1px 0 20px;
    list-style:none;
    }

#tabs li {
    display:inline;
    margin:0;
    padding:5;
    }

#tabs a {
    float:left;
    background:url("../images/tableft.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 3px;
    text-decoration:none;
    }

#tabs a span {
    float:left;
    display:block;
    background:url("../images/tabright.gif") no-repeat right top;
    padding:10px 10px 10px 10px;
    color:#FFF;
    }

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}

/* End IE5-Mac hack */
#tabs a:hover span {
    color:#FFF;
    }

#tabs a:hover{
    background-position:0% -42px;
    }

#tabs a:hover span {
    background-position:100% -42px;
    }

div#tabs ul ul,
div#tabs ul li:hover ul ul,
div#tabs ul ul li:hover ul ul
{display: none;}

div#tabs ul li:hover ul,
div#tabs ul ul li:hover ul,
div#tabs ul ul ul li:hover ul
{display: block;}

这是我的HTML

<body>
<div id="wrapper">
  <table height="860px">
   <tr>
        <td colspan="2" width="710px" height="150px">
        </td>
   </tr>
      <tr>
        <td colspan="2" width="710px" height="50px" valign="bottom">
        <div id="tabs">
      <ul>
        <li><a href="#"><span>HOME</span></a></li>
        <li><a href="#"><span>CATERING</span></a></li>
        <li><a href="#"><span>MENU</span></a></li>
         <ul>
           <li>
           <a href="#"><span>hey</span></a> //i want this to pop when hovering menu
           <li>
         </ul>
        <li><a href="#"><span>RESERVATIONS</span></a></li>
        <li><a href="#"><span>EVENTS</span></a></li>
        <li><a href="#"><span>ABOUT US</span></a></li>
        <li><a href="#"><span>CONTACT US</span></a></li>
     </ul>
       </div>

        </td>
   </tr>
</table>
</body>

Answer 1

好吧，我修好了几个拼写错误。我意识到您没有将子菜单放在MENU的<li>内。

这里是新列表html，现在css很好：

<div id="tabs">
    <ul>
        <li><a href="#"><span>HOME</span></a></li>
        <li><a href="#"><span>CATERING</span></a></li>
        <li><a href="#"><span>MENU</span></a>
            <ul>
                <li>
                    <a href="#"><span>hey</span></a>
                </li>
            </ul>
        </li>
        <li><a href="#"><span>RESERVATIONS</span></a></li>
        <li><a href="#"><span>EVENTS</span></a></li>
        <li><a href="#"><span>ABOUT US</span></a></li>
        <li><a href="#"><span>CONTACT US</span></a></li>
    </ul>
</div>

编辑：

你需要让内部<ul>在css中显示为绝对，如下所示：

#tabs {
    width:100%;
}
    #tabs>ul>li {   
        display:block; position:relative;
            float:left;
        list-style:none outside;
            margin:0 10px;
    }
        #tabs>ul>li:hover ul{display:block}
        #tabs>ul>li>a{
                display:block;
        }
        #tabs>ul>li ul{
            position:absolute; display:none;
            list-style:none;    
        }

Answer 2

您需要将该辅助列表放在菜单中，如下所示：

<li>
    <a href="#"><span>MENU</span></a></li>
    <ul>
       <li>
           <a href="#"><span>hey</span></a>
       </li>
    </ul>
</li>

另外，如果您只想在第一个列表中添加规则，请记得使用css选择器>：

#tabs>ul>li{
    /* css */
}

帮助css菜单与下拉菜单

2 个答案: