CSS 플로트 및 중첩 목록

CSS에서는 드롭 다운 메뉴를 만들기 위해 중첩 목록 세트를 플로팅합니다. 그러나 헤더는 드롭 다운 메뉴에있는 항목과 거의 동일하지 않으므로 각 드롭 다운 구성 요소마다 다른 너비가 있으므로 헤더의 간격이 불균형하게됩니다. 목록의 폭이 가장 넓은 구성 요소만큼 넓습니다.). 누구든지이 문제를 해결하는 방법에 대한 제안이 있습니까?CSS 플로트 및 중첩 목록

여기 내 코드입니다 :

<body> 

    <ul id="navigation"> 

    <li><a href="#">Header A</a></li> 
    <li class="sub"> 

     <a href="#">Header B</a> 

     <ul> 

     <li><a href="#">Item AAAAAAAAAAAA</a></li> 
     <li><a href="#">Item BBBBBBBBBBBB</a></li> 
     <li><a href="#">Item CCCCCCCCCCCC</a></li> 
     <li><a href="#">Item DDDDDDDDDDDD</a></li> 
     <li><a href="#">Item EEEEEEEEEEEE</a></li> 
     </ul> 

    </li> 

    <li> 
     <a href="#">Header C</a> 
    </li> 

    </ul> 

</body>

그리고 여기에 CSS입니다 :

body { 

    padding: 0; 
    margin: 0; 

    } 


#navigation { 
margin: 0; 
padding: 0 1em; 
background: #000; 
height: 3em; 
list-style: none; 
font-family: "Helvetica Neue"; 
    } 

#navigation > li { 
float: left; 
height: 100%; 
margin-right: 0.5em; 
padding: 0 1em; 
} 

#navigation > li > a { 
color: #7A7A7A; 
text-decoration: none; 
line-height: 3; 
font-weight: bold; 
} 

#navigation > li > a:hover { 
    color: #FFFFFF; 
} 

#navigation > li.sub ul { 
margin: 0; 
padding: 0.5em 0; 
list-style: none; 
background: rgba(12,13,69,1); 
position: relative; 
top: 10000px; 
} 

#navigation > li.sub ul li a { 
height: 100%; 
display: block; 
padding: 0.4em; 
color: #fff; 
font-weight: bold; 
text-decoration: none; 
} 

#navigation > li.sub ul li a:hover { 
background: #00F2FF; 
text-decoration: none; 
} 

#navigation > li.sub:hover ul { 
display: block; 
top: 0px; 
}

출처

2012-10-23 voltair

당신이 당신의 코드를 게시 할 수의 그것은 훨씬 더 도움이 지역 사회에있을 것입니다 : 여기

그러나이 동작하는 예제입니다. – Jason

코드를 보지 않고, 그것은 특정 경우에 무슨 일이 일어나고 있는지 말을하는 것은 불가능하다. http://jsfiddle.net/kboucher/nrAPu/

HTML

<nav> 
    <ul> 
     <li> 
      Menu One 
      <ul> 
       <li> 
        <a href="#">Menu One Item One</a> 
        <ul> 
         <li><a href="#">Menu One Item One Submenu Item One</a></li> 
         <li><a href="#">Menu One Item One Submenu Item Two</a></li> 
         <li><a href="#">Menu One Item One Submenu Item Three</a></li> 
         <li><a href="#">Menu One Item One Submenu Item Four</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Menu One Item Two</a></li> 
       <li><a href="#">Menu One Item Three</a></li> 
       <li><a href="#">Menu One Item Four</a></li> 
      </ul> 
     </li> 
     <li> 
      Menu Two 
      <ul> 
       <li><a href="#">Menu Two Item One</a></li> 
       <li><a href="#">Menu Two Item Two</a></li> 
       <li><a href="#">Menu Two Item Three</a></li> 
       <li><a href="#">Menu Two Item Four</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav>

CSS

body { font-family: Helvetica, Arial, Sans-serif; line-height: 1.5em; } 
a:hover { color: #cc0000; } 

/* Hide submenu */ 
nav ul > li > ul, 
nav ul > li > ul > li > ul { display:none; } 

/* Layout menubar and menus */ 
nav { background:#ddd; padding:0.25em 0.5em; } 
nav > ul > li { cursor: pointer; display:inline-block; padding:0 1em; } 
nav > ul > li > ul { background: #ddd; padding:0.5em; position: absolute; z-index: 1000; } 
nav > ul > li > ul > li > ul { background: #ccc; padding:0.5em; position: absolute; left: 90%; top: 0; z-index: 1001; } 

/* show submenu on hover */ 
nav ul > li:hover > ul, 
nav ul > li > ul > li:hover > ul { display:block; width:10em; }

출처

2012-10-23 22:29:35

CSS 플로트 및 중첩 목록

답변

관련 문제