Question

我是新来的,并试图使这项工作达到无uck的状态。

从根本上说,如果选择“MENU”的话,就会出现下降,但似乎这里的情况是我的奇迹:

#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

一旦我确定了几个字体。我确信,你没有将次菜单放在海保会的<条码>和>;li>内。

here s the new list html, the css is fine for now:

<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>

Edit:

您需要使<代码><ul>在编码中显得绝对,例如:

#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>

另外,当你想将规则列入第一个名单时,记住使用选编的标码<>>:

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

友情链接