CSS 탐색 바 자동 높이
-
22-12-2019 - |
문제
두 번째 레벨의 네비게이터를 자동 높이로 설정하고 너무 오래 줄 때 새 줄로 변경하십시오.
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/
해결책
나는 당신이 묻고있는 것을 모르지만 텍스트를 새로운 줄로 랩으로 바라지 않으려면 white-space:no-wrap;
를 white-space:normal
에 menu li a{...}
로 변경하십시오.
다른 팁
이 답변은 기술적으로 질문에 대답하지 않지만 메뉴의 여기에있는 탁월한 리소스가 있습니다. http ://www.cssplay.co.uk/menus/ 특정 CSS 결정이 이루어지고 어떤 브라우저가 있는지 설명합니다.
제휴하지 않습니다 StackOverflow