固定下拉按钮HTML

-1

嗨，我想创建一个下拉按钮。我的问题是每当我悬停它只需在列表中上升我想是对的位置保持固定和其他列表上出现了底侧固定下拉按钮HTML

，这里是我的CSS

#Menu-Button { 
font-family: MyriadWebPro; 
color: #F93; 
} 
#Menu-Button ul { 
list-style-type:none; 
} 
#Menu-Button ul li.item{ 
display:none; 
} 
#Menu-Button ul:hover .item{ 
display:block; 
border:1px solid #F93; 
background-color:#F60; 
}

和我的html看起来像这样

<ul> 
     <li>Menu</li> 
     <li class="item" id="Menu-Button">Roti</li> 
     <li class="item" id="Menu-Button">Nasi</li> 
     <li class="item" id="Menu-Button">Sayur</li> 
     <li class="item" id="Menu-Button">Buah</li> 
     <li class="item" id="Menu-Button">Sereal</li> 
     <li class="item" id="Menu-Button">Oatmeal</li> 
     <li class="item" id="Menu-Button">Telur</li> 
    </ul>

谁能告诉我我的问题在哪里？

来源

2013-06-23 Edbert Suryadi

您的代码不做任何事情，因为ID必须在页面上唯一，并且在第一个“菜单 - 按钮”内没有ul触发悬停效果。您需要发布足够的代码来重现您的问题，并删除重复的ID。 –

尝试......一些接近...

<ul class="mb"> 
    <li>Menu</li> 
    <li class="item " id="Men">Roti</li> 
    <li class="item " id="Menu-Btton">Nasi</li> 
    <li class="item " id="Menu-tton">Sayur</li> 
    <li class="item " id="Mentton">Buah</li> 
    <li class="item " id="Menu-Buttn">Sereal</li> 
    <li class="item" id="Menu-Butto">Oatmeal</li> 
    <li class="item" id="Menu-">Telur</li> 
</ul> 

.mb { 
font-family: MyriadWebPro; 
color: #F93; 
} 
.mb ul { 
list-style-type:none; 
} 

ul.mb li.item{ 
display:none; 
} 
ul.mb:hover .item{ 
display:block; 
border:1px solid #F93; 
background-color:#F60; 
}

来源

2013-06-23 10:43:04 mohkhan

你不能有重复的ID在同一页上，ID的应该是唯一的。所以请尝试删除重复的ID。请参阅下面的修改代码。

.item{ 
      font-family: MyriadWebPro; 
      color: #F93; 
     } 
    #Menu-Button ul { 
      list-style-type:none; 
      } 
    #Menu-Button ul li.item{ 
     display:none; 
      } 
     #Menu-Button ul:hover li.item{ 
      display:block; 
      border:1px solid #F93; 
      background-color:#F60; 
       } 

    <div id="Menu-Button"> 
     <ul> 
     <li>Menu</li> 
     <li class="item" >Roti</li> 
     <li class="item" >Nasi</li> 
     <li class="item" >Sayur</li> 
     <li class="item" >Buah</li> 
     <li class="item" >Sereal</li> 
     <li class="item" >Oatmeal</li> 
     <li class="item" >Telur</li> 
    </ul> 
<div>

我刚才重用你的代码，去掉了多个ID和应用ID到div，以符合您written.Hope的CSS这会有所帮助。

来源

2013-06-23 10:51:49 Pbk1303

感谢您的答复，我已经尝试过您的解决方案，并且问题仍然存在，只要我将鼠标悬停在菜单上，只需“跳转”即可显示下拉菜单，如http://i301.photobucket.com/albums/ nn42/nara_ninjutsu/Untitled-5.png –

这可能是因为其他元素的样式可能会让菜单跳跃。直到您可以提供更多代码或在jsfiddle中复制问题并向我们展示之前，无法确定任何事情。 – Pbk1303

固定下拉按钮HTML

回答

相关问题