-1

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

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

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

4

2 回答 2

0

试试这个......接近的东西......

<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-23T10:43:04.067 回答
0

您不能在同一页面中有重复的 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。希望这会有所帮助。

于 2013-06-23T10:51:49.450 回答