Question

您好我正在尝试创建一个下拉按钮。我的问题是每当我徘徊到它时，列表就会上升我想要的是保持固定的位置而另一个列表出现在底部

这是我的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>

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

Answer 1

试试这个......接近......

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

Answer 2

您不能在同一页面中拥有重复的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，以匹配您编写的CSS。希望这会有所帮助。

修复了下拉按钮HTML

2 个答案: