Исправлена ​​выпадающая кнопка HTML

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. См. Измененный код ниже.

.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> 

Я просто повторно код, удалил несколько идентификаторов и прикладной идентификатор в DIV, чтобы соответствовать CSS у вас есть written.Hope это помогает.