固定下拉按钮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>

菜单
Roti
Nasi
Sayur
Buah
Sereal
燕麦粥
Telur

---

有人能告诉我我的问题在哪里吗？

试试这个……靠近点的

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

菜单
Roti
Nasi
Sayur
Buah
Sereal
燕麦粥
Telur

.mb{
字体系列：MyriadWebPro；
颜色：#F93；
}
.mb ul{
列表样式类型：无；
} 
ul.mb li.item{
显示：无；
}
ul.mb：悬停项{
显示：块；
边框：1px实心#F93；
背景色：#F60；
}

同一页面中不能有重复的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>

.item{
字体系列：MyriadWebPro；
颜色：#F93；
}
#菜单按钮ul{
列表样式类型：无；
}
#菜单按钮ul li.item{
显示：无；
}
#菜单按钮ul：悬停li.item{
显示：块；
边框：1px实心#F93；
背景色：#F60；
}

菜单
Roti
Nasi
Sayur
Buah
Sereal
燕麦粥
Telur

---

我刚刚重新使用了您的代码，删除了多个id，并将id应用于div，以匹配您编写的css。希望这有帮助。

您的代码没有任何作用，因为id在页面上必须是唯一的，并且在第一个“菜单按钮”中没有ul来触发悬停效果。您需要发布足够的代码来重现您的问题，并删除重复的ID。感谢您的回复，我已经尝试了您的解决方案，但问题仍然存在，每当我将鼠标悬停在菜单上时，它只会在显示像这样的下拉菜单后“跳转”，这可能是因为其他元素的样式可能会使菜单跳转。在您能够提供更多代码或在JSFIDLE中复制该问题并向我们展示之前，无法确定任何事情。