0
드롭 다운 메뉴가 작은 너비로 간다.복잡한 HTML 탐색 메뉴
도전을 좋아하는 사람들에게 도움이됩니다. 여기에 내가 가진 무엇 :
nav{
\t line-height:100%;
\t opacity:.9;
}nav ul{
\t background: #999;
\t padding: 0px;
\t border-radius: 20px;
\t list-style: none;
\t position: relative;
\t display: inline-table;
}nav ul ul{
\t display: none;
\t background: #567;
\t border-radius: 0px;
\t padding: 0px;
\t position: absolute;
\t top: 100%;
}nav ul li{
\t float: left;
}nav ul li a{
\t display: block;
\t padding: 25px 40px;
\t color: #666;
\t text-decoration: none;
}nav ul li:hover{
\t background: #345;
}nav ul li:hover a{
\t color: #fff;
}nav ul li:hover>ul{
\t display: block;
}nav ul ul li{
\t float: none;
\t border-top: 1px solid #567;
\t border-bottom: 1px solid #678;
\t position: relative;
}nav ul ul li a{
\t padding: 15px 40px;
\t color: #fff;
}nav ul ul li a:hover{
\t background: #456;
}nav ul ul ul{
\t position: absolute; left: 100%; top:0;
}<!DOCTYPE html>
<html>
<body>
\t
\t <nav>
\t \t <ul>
\t \t \t <h3>
\t \t \t <li><a href="otherpage.html">Home</a></li>
\t \t \t <li><a href="otherpage.html">Page2</a>
\t \t \t \t <ul>
\t \t \t \t \t <li><a href="otherpage.html">Page2.1</a></li>
\t \t \t \t \t <li><a href="otherpage.html">Page2.2</a></li>
\t \t \t \t \t <li><a href="otherpage.html">Page2.3</a>
\t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t <li><a href="otherpage.html">Page2.3.1</a></li>
\t \t \t \t \t \t \t <li><a href="otherpage.html">Page2.3.2</a></li>
\t \t \t \t \t \t </ul>
\t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t </li>
\t \t \t <li><a href="otherpage.html">Page3</a>
\t \t \t \t <ul>
\t \t \t \t \t <li><a href="otherpage.html">Page3.1</a></li>
\t \t \t \t \t <li><a href="otherpage.html">Page3.2</a></li>
\t \t \t \t </ul>
\t \t \t </li>
\t \t \t <li><a href="otherpage.html">Page4</a></li>
\t \t \t </h3>
\t \t </ul>
\t </nav>
</body>
</html>내가 지금까지하지만, 그래서 드롭 다운 메뉴의 나머지 부분을 통해가는 것을 무슨 않는다는 탐색 메뉴를하고자 할 때 작은에서 폭. 다음과 같이 정렬하십시오 : how to set css width equal to length of longest text.
너무 많이 알지 못하지만 자바 스크립트가 필요합니까? 나는 또한 링크와 유사한 자바 스크립트 드롭 다운 효과를 주겠지 만 그것은 필요하지 않습니다.
내 문제를 이해할 수 없다면 내 코드를 전체 화면으로 실행 한 다음 브라우저의 너비를 줄여서 드롭 다운을 클릭 할 수 없도록하십시오.
너비가 조정되는 경우에도 텍스트 간격을 만들기위한 보너스 포인트.
감사합니다.
내가 이해 한 것은 당신이 크기를 재조정하는 반응 형 네비게이션을 원한다는 것입니다. 너가 원하는게 그거야? –
정말 아닙니다. 나는 사람들이 드롭 다운 링크를 클릭 할 수 있도록 메뉴 자체로 크기 조정을 할 때 크기를 조정하기를 원합니다. 지금은 작은 너비로 메뉴의 나머지 부분이 드롭 다운됩니다. – Justin
왜 부트 스트랩 반응 형 네비게이션을 사용하지 않습니까? 그것은 당신이 필요로하는 모든 것을 가지고 있습니다. –