2013-06-23 4 views
-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은 다음과 같습니다.

아무도 내 문제가있는 곳을 말해 줄 수 있습니까?

+0

ID는 페이지에서 고유해야하며 첫 번째 '메뉴 버튼'내에는 ul이 없어야 호버링 효과가 나타나기 때문에 코드는 아무런 효과가 없습니다. 문제를 재현 할 수있는 코드를 게시하고 중복 된 ID를 제거해야합니다. –

답변

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

같은 페이지에 중복 된 아이디의를 가질 수 없습니다, 아이디의는 고유해야합니다. 따라서 중복 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> 

난 그냥 코드를 재사용 한 여러 아이디의를 제거하고이 도움이 written.Hope이있는 CSS를 일치하도록 사업부에 ID를 적용했다.

+0

답장을 보내 주셔서 감사합니다, 나는 당신의 솔루션을 시도하고 문제가 여전히 거기에, 내가 그냥 "점프"이 메뉴와 같은 드롭 다운 메뉴를 보여줍니다 후 http://i301.photobucket.com/albums/ nn42/nara_ninjutsu/Untitled-5.png –

+0

다른 요소의 스타일이 메뉴를 점프하게 만들 수 있기 때문일 수 있습니다. 더 많은 코드를 제공하거나 jsfiddle에서 이슈를 복제하고 우리에게 보여줄 때까지는 아무 것도 말할 수 없습니다. – Pbk1303