CSS를 사용하여 호버에 표시되는 HTML 태그

Question

페이지에 다음 div가 있습니다. nav id를 사용하면 li 위에 마우스를 올리면 하위 메뉴가 하위 메뉴 항목으로 표시됩니다. CSS 사용. 모든

<div id="nav"> 
      <ul> 
       <li class="first">ABOUT US</li> 
       <li id="showsub">LABEL 
       <div id="submenu"> 
        <table cellpadding="0" cellspacing="0"> 
         <tr> 
          <td class="lister"> 
           <ul> 
            <li onmouseover="showsubcon('subclothes')">CLOTHES</li> 
            <li onmouseover="showsubcon('subshoes')">SHOES</li> 
            <li onmouseover="showsubcon('subacces')">ACCESSORIES</li> 
           </ul> 
          </td> 
          <td style="box-shadow: 0px 0px 100px #B60101 inset; width: 100%; padding:5px;"> 
           <div id="subcloths"> 
            <p> CLOTHES </p>      
           </div> 
           <div id="subshoes"> 
            <p>SHOES</p> 
           </div> 
           <div id="subacces"> 
            <p>ACCESSORIES</p> 
           </div> 
          </td> 
         </tr> 
        </table> 
       </div> 
      </li> 
      <li>OFFERS</li> 
      <li>SPECIAL DISCOUNTS</li> 
      <li>CONTACT US</li> 
      </ul> 
     </div> 

Answer 1

먼저 ID의 사용을 중지 - 이러한 스타일 중 일부는 대신 클래스에 ID 년대를 전환해야 반복 될 수 있다는 큰 가능성이 있기 때문에.

<div id="nav"> 
      <ul> 
       <li class="first">ABOUT US</li> 
       <li class="showsub">LABEL 
       <div class="submenu"> 
        <table cellpadding="0" cellspacing="0"> 
         <tr> 
          <td class="lister"> 
           <ul> 
            <li onmouseover="showsubcon('subclothes')">CLOTHES</li> 
            <li onmouseover="showsubcon('subshoes')">SHOES</li> 
            <li onmouseover="showsubcon('subacces')">ACCESSORIES</li> 
           </ul> 
          </td> 
          <td style="box-shadow: 0px 0px 100px #B60101 inset; width: 100%; padding:5px;"> 
           <div id="subcloths"> 
            <p> CLOTHES </p>      
           </div> 
           <div id="subshoes"> 
            <p>SHOES</p> 
           </div> 
           <div id="subacces"> 
            <p>ACCESSORIES</p> 
           </div> 
          </td> 
         </tr> 
        </table> 
       </div> 
      </li> 
      <li>OFFERS</li> 
      <li>SPECIAL DISCOUNTS</li> 
      <li>CONTACT US</li> 
      </ul> 
     </div> 

지금 ... 지금까지 CSS로, 여기

div.submenu { display: none; } 

li.showsub:hover div.submenu { display: block; } 

Answer 2

예 CSS는이 제한 기능 ... 당신이 필요로하는 기능의 제한 예입니다. CSS를 사용하는 간단한 예입니다.

HTML

ul li { 
    float:left; 
    padding:20px; 
} 
ul li ul { 
    display:none; 
    position:absolute; 

} 
ul li:hover ul{ 
    display:block; 
} 

ul li ul li{ 
    float:left; 
    clear:both; 
} 

나쁜 생각이 정말이 테이블을 사용하여 여기 http://jsfiddle.net/8E52m/3/