帮助与下拉菜单的CSS菜单

我是新来的CSS，并试图使这项工作了一段时间，没有运气帮助与下拉菜单的CSS菜单

基本上我想要当选择“菜单”下显示下降，但似乎没有发生在这里是我的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>

来源

2011-09-12 userORTXD97HS

那么一旦我固定的几个错别字。我意识到你没有把子菜单放在菜单的<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;  
     }

来源

2011-09-12 02:05:57

你好感谢你，哎出来的菜单和保留菜单项之间..怎么能我让它显示在下面..像一个下拉？ – userORTXD97HS

伟大的这是工作很好，只是最后一个问题..嘿现在显示在菜单顶部，有没有办法将它移动一点点？比如margin-top或者其他东西..我在#tabs> ul>里尝试了margin top，但它将整个菜单向下移动 – userORTXD97HS

@ userORTXD97HS是的，你需要使用#tabs> ul> li> ul，然后margin-top应该工作 –

你需要把你的菜单中的第二个列表，如下所示：

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

此外，请记住，当你想要把规则只在第一个列表上使用的CSS选择器>：

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

来源

2011-09-12 02:28:50 v42

嗨，谢谢你，它旁边的菜单，是否有无论如何，我可以让它显示在下面？ – userORTXD97HS

帮助与下拉菜单的CSS菜单

回答

相关问题