CSS 네비게이션 바 자동 높이

-1

내가, 자동 높이로 네비게이터의 두 번째 수준을 설정할 때 너무 오래 새로운 라인으로 변경할

HTML :

<ul id="menu"> 
    <li><a href="">About Us</a> 
     <ul> 
      <li><a href="">Introduction</a></li> 
      <li><a href="">Orgaizational Structure</a></li> 
      <li><a href="">Mission&Vision</a></li> 
     </ul> 
    </li> 
</ul>

CSS : 여기

* { 
    padding: 0; 
    margin: 0; 
} 

#menu { 
    list-style: none; 
    font-size: 0.8em; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 5px 10px 0 #cccccc; 
    box-shadow: 0 2px 5px 0 #aaa; 

    background: #dddddd; 
    height: 40px; 
    width: 800px; 
    float: left; 
} 

#menu li { 
    display: block; 
    position: relative; 
    float: left; 
} 

#menu li ul { 
    display: none; 
} 

#menu li a { 
    display: block; 
    text-decoration: none; 
    padding: 12px 15px; 
    margin-left: 1px; 
    white-space: nowrap; 
} 

#menu li:hover ul { 
    display: block; 
    position: absolute; 
    background: #dddddd; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 5px 10px 0 #cccccc; 
    box-shadow: 0 2px 5px 0 #aaa; 
    width: 100px; 
}

실행을 : http://jsfiddle.net/U72Hm/

출처

2014-01-11 Ovilia

귀하의 바이올린은 (정확하게 적어도 firefox에서) 정확하게 높이를 표시하는 것으로 보입니다. 귀하의 문제가 더 명확하게 설명해 주시겠습니까? – Alfie

@Alfie 표시된 이미지가 이상적인 스타일이 아닌 현재 스타일입니다. 이상적인 "구조"는 새로운 라인에 있어야합니다. – Ovilia

난 당신이 무엇을 요구 모르겠지만 당신이 원하는 경우 텍스트가로 포장 새 줄을 으로 변경하면 white-space:no-wrap;에서 white-space:normal으로 변경됩니다.

출처

2014-01-11 02:35:20

고마워, 그게 내가 원하는거야. – Ovilia

문제 없습니다. 당신은 실제로 그 규칙을 모두 제거 할 수 있습니다. 대부분의 브라우저는 공백을 기본값으로합니다. –

이 답변은 기술적으로 질문에 대답하지 않지만 특정 CSS 결정이 이루어진 이유와 브라우저에 대한 이유를 설명한 http://www.cssplay.co.uk/menus/ 메뉴에 대한 유용한 자료가 있습니다.

출처

2014-01-11 02:37:20 click2install

CSS 네비게이션 바 자동 높이

답변

관련 문제