CSS 메가 드롭 다운 메뉴

Question

메가 드롭 다운 메뉴를 만들고 있습니다. 그것은 모두 HTML과 CSS에 의해 수행됩니다. 내 문제는 LI 중 하나를 선택하면 다른 LI를 희생하여 최대화됩니다.

어디에 문제가 있는지 알 수 없지만 해결 방법을 제안 해 주시겠습니까?

HTML

<div id="wrapper"> 
    <div id="menu2"> 
    <ul id="menu2_ul"> 
     <li class="list"><a href="#">Domů</a> 

     <div class="sub"> 
      <div class="submenu"> 
      <ul class="submenu_left_menu"> 
       <li><a href="#">Domů</a></li> 
       <li><a href="#">Pojištění</a></li> 
       <li><a href="#">Půjčky</a></li> 
       <li><a href="#">Hypotéky</a></li> 
       <li><a href="#">Účty a spoření</a></li> 
       <li><a href="#">Energie</a></li> 
       <li><a href="#">Investice</a></li> 
       <li><a href="#">Slevy</a></li> 
      </ul> 
      </div> 

      <div class="submenu_content"> 
      <h2>Lorem ipsum</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat risus leo, id placerat massa malesuada in. Vestibulum venenatis diam vel cursus dignissim. Aenean ac leo nunc. Fusce erat mauris, commodo at faucibus non, eleifend id nibh. Aliquam non ligula dignissim, venenatis nisi in, lacinia velit. Maecenas pharetra urna metus, nec dictum mauris suscipit et. Donec posuere massa vitae magna tempus, eu interdum nulla consectetur. Mauris consequat fringilla turpis, eu venenatis felis viverra sed. Fusce a placerat lectus. Sed vel sem sodales, eleifend nunc ac, viverra felis. Donec egestas ante nec enim semper dictum. Aenean mollis sodales lorem, sed pharetra leo sollicitudin id. Cras nulla neque, gravida nec rutrum sed, mattis quis nisl. Duis vulputate tempus diam eget tincidunt. Nunc elementum eu ante iaculis laoreet.</p> 
      </div> 

      <div class="submenu_poll"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat risus leo, id placerat massa malesuada in. Vestibulum venenatis diam vel cursus dignissim. Aenean ac leo nunc. Fusce erat mauris, commodo at faucibus non, eleifend id nibh. Aliquam non ligula dignissim, venenatis nisi in, lacinia velit. Maecenas pharetra urna metus, nec dictum mauris suscipit et. Donec posuere massa vitae magna tempus, eu interdum nulla consectetur. Mauris consequat fringilla turpis, eu venenatis felis viverra sed. Fusce a placerat lectus. Sed vel sem sodales, eleifend nunc ac, viverra felis. Donec egestas ante nec enim semper dictum. Aenean mollis sodales lorem, sed pharetra leo sollicitudin id. Cras nulla neque, gravida nec rutrum sed, mattis quis nisl. Duis vulputate tempus diam eget tincidunt. Nunc elementum eu ante iaculis laoreet.</p> 
      </div> 
     </div> 
     </li> 
     <li class="list"><a href="#">Pojištění</a> 

     <div class="sub"> 
      <div class="submenu"> 
      <ul class="submenu_left_menu"> 
       <li><a href="#">Domů</a></li> 
       <li><a href="#">Pojištění</a></li> 
       <li><a href="#">Půjčky</a></li> 
       <li><a href="#">Hypotéky</a></li> 
       <li><a href="#">Účty a spoření</a></li> 
       <li><a href="#">Energie</a></li> 
       <li><a href="#">Investice</a></li> 
       <li><a href="#">Slevy</a></li> 
      </ul> 
      </div> 
      <div class="submenu_content"> 
      </div> 

      <div class="submenu_poll"> 
      </div> 
     </div> 
     </li> 
    </div> 
    </div> 

CSS

body { 
    background-color: black; 
    padding: 0px; 
    margin: 0px;   
} 

#wrapper { 
    margin: 0px; 
    padding: 0px; 
    height: 40px;   
    background-color: white; 
} 

#menu2 { 
    width: 981px; 
    margin: 0 auto; 
    padding: 0px;  
} 

#menu2 ul { 
    list-style: none; 
    display: table; 
    margin: 0px; 
    padding: 0px; 
    height: 40px; 
} 

#menu2 li.list { 
    display: table-cell; 
    line-height: 40px; 
    border-left: 1px solid grey; 
    position: relative; 
}   

#menu2 div.sub { 
    margin:0; 
    display:none; 

    background-color: white; 
} 

#menu2 li.list:hover div.sub { 
    display: block !important; 
    width: 981px !important; 
} 

/******************************************************************************\ 
\******************************************************************************/ 

#menu2 div.sub .submenu { 
    float: left; 
    width: 220px;       
} 

#menu2 div.sub .submenu_content { 
    width: 550px; 
    float: left; 
} 

#menu2 div.sub .submenu_poll { 
} 

Answer 1

1. 절대

에 div.sub 예, 그들은 같은 시작 위치가되지 않습니다 : 그래서 해답은 수동으로 그들 각각에게 012를주는 것이다.빼기 값입니다. 그들 모두에게 id를 제공하거나 CSS3 선택자를 사용할 수 있습니다 (예 : #menu2:nth-child(1) {margin-left: -...}).

단점 : 모든 div.sub +에 대해 수동으로 ID와 특정 여백을 지정하면 메뉴 탭의 폭을 쉽게 줄 수 있습니다. 이 경우 고정

에 div.sub는 모든 사업부가 정확히 같은 위치에서 시작됩니다

2.; 그러나 문서가 고정 된 pos 요소에 대해 늘어나지 않기 때문에 너비 나 높이가 다른 요소보다 우월하지 않도록주의하십시오.

단점 : 고정 된 div가 화면을 따라 가기 때문에 다른 div가있는 경우 작동하지 않습니다. 다른 요소가 문서의 흐름에서 divs.sub보다 크지 않으면 작동하지 않습니다. CSS3의와

3. 실험 : 대상 선택

대상 선택기는 앵커의 HREF에서 링크를 수정할 수 있습니다. An Example here. 그러나 모든 div.sub에 대해 ID를 지정해야합니다. 이 선택기를 사용하면 모든 div 항목을 각 메뉴 항목에 중첩하는 대신 콘텐츠 섹션에 직접 배치 할 수 있습니다. IE8과 호환되지 않습니다.

단점 : 호환되지 않음

4. IE8-와 사용 JS/jQuery를 대신 아마

일부에 대한 '쉬운'방법뿐만 아니라 한 가장 '무거운'.

단점 : 무겁고 JS- 비활성화 된 브라우저에서 작동하지 않습니다.