스크롤 할 수있는 다중 레벨 가로 메뉴

다중 레벨 스크롤 가능한 가로 메뉴를 만들려고합니다. 하위 메뉴는 최대 레벨까지 올라 오지만 최상위 레벨 항목 수가 많고 페이지에 맞지 않으면 스크롤바가 나타나지 않습니다. 대신 그들은 다음 줄로 들어 오기 시작합니다.스크롤 할 수있는 다중 레벨 가로 메뉴

다음은 전체 코드

<html> 
 
\t <head> 
 
\t <style type="text/css"> 
 

 
    
 

 
\t #nav, #nav ul{ 
 
margin:0; 
 
padding:0; 
 
list-style-type:none; 
 
list-style-position:outside; 
 
position:relative; 
 
line-height:1.5em; 
 
} 
 

 
#nav a{ 
 
display:block; 
 
padding:0px 5px; 
 
border:1px solid #333; 
 
color:#fff; 
 
text-decoration:none; 
 
background-color:#333; 
 
} 
 

 
#nav a:hover{ 
 
background-color:#fff; 
 
color:#333; 
 
} 
 

 
#nav li{ 
 
float:left; 
 
position:relative; 
 
} 
 

 
#nav ul { 
 
position:absolute; 
 
display:none; 
 
width:12em; 
 
top:1.5em; 
 
} 
 

 
#nav li ul a{ 
 
width:12em; 
 
height:auto; 
 
float:left; 
 
} 
 

 
#nav ul ul{ 
 
top:auto; 
 
} \t 
 

 
#nav li ul ul { 
 
left:12em; 
 
margin:0px 0 0 10px; 
 
} 
 

 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ 
 
display:none; 
 
} 
 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ 
 
display:block; 
 
} 
 

 

 

 

 
\t </style> \t \t 
 
\t </head> 
 
\t <body> 
 
      <ul id="nav"> 
 
       <li> 
 
        <a href="#">3 Javascript</a> 
 
        <ul> 
 
         <li> 
 
          <a href="#">3.1 jQuery</a> 
 
          <ul> 
 
           <li> 
 
            <a href="#">3.1.1 Download</a> 
 
            <ul> 
 
             <li> 
 
              <a href="#">3.1.1 New Download</a> 
 

 
             </li> 
 
             <li><a href="#">3.1.2 New Tutorial</a></li> 
 
            </ul> 
 
           </li> 
 
           <li><a href="#">3.1.2 Tutorial</a></li> 
 
          </ul> 
 
         </li> 
 
         <li><a href="#">3.2 Mootools</a></li> 
 
         <li><a href="#">3.3 Prototype</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 

 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 

 

 

 

 
      
 
      </ul> 
 
     
 

 

 

 

 
</body> 
 
</html>

출처

2016-11-05 ashwinkpes

<html> 
 
\t <head> 
 
\t <style type="text/css"> 
 

 
    
 

 
\t #nav, #nav ul{ 
 
margin:0; 
 
padding:0; 
 
list-style-type:none; 
 
list-style-position:outside; 
 
position:relative; 
 
line-height:1.5em; 
 
width: 100%; 
 
overflow-x: scroll; 
 
white-space: nowrap; 
 
} 
 

 
#nav a{ 
 
display:block; 
 
padding:0px 5px; 
 
border:1px solid #333; 
 
color:#fff; 
 
text-decoration:none; 
 
background-color:#333; 
 
} 
 

 
#nav a:hover{ 
 
background-color:#fff; 
 
color:#333; 
 
} 
 

 
#nav li{ 
 
display: inline-block; 
 
position:relative; 
 
} 
 

 
#nav ul { 
 
position:absolute; 
 
display:none; 
 
width:12em; 
 
top:1.5em; 
 
} 
 

 
#nav li ul a{ 
 
width:12em; 
 
height:auto; 
 
float:left; 
 
} 
 

 
#nav ul ul{ 
 
top:auto; 
 
} \t 
 

 
#nav li ul ul { 
 
left:12em; 
 
margin:0px 0 0 10px; 
 
} 
 

 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ 
 
display:none; 
 
} 
 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ 
 
display:block; 
 
} 
 

 

 

 

 
\t </style> \t \t 
 
\t </head> 
 
\t <body> 
 
      <ul id="nav"> 
 
       <li> 
 
        <a href="#">3 Javascript</a> 
 
        <ul> 
 
         <li> 
 
          <a href="#">3.1 jQuery</a> 
 
          <ul> 
 
           <li> 
 
            <a href="#">3.1.1 Download</a> 
 
            <ul> 
 
             <li> 
 
              <a href="#">3.1.1 New Download</a> 
 

 
             </li> 
 
             <li><a href="#">3.1.2 New Tutorial</a></li> 
 
            </ul> 
 
           </li> 
 
           <li><a href="#">3.1.2 Tutorial</a></li> 
 
          </ul> 
 
         </li> 
 
         <li><a href="#">3.2 Mootools</a></li> 
 
         <li><a href="#">3.3 Prototype</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 

 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 
       <li><a href="#">1 HTML</a></li> 
 
       <li><a href="#">2 CSS</a></li> 
 

 

 

 

 
      
 
      </ul> 
 
     
 

 

 

 

 
</body> 
 
</html>

이 당신이 달성하고자하는 것입니다?

출처

2016-11-05 13:46:14

답장을 보내 주셔서 감사합니다. Alomost there .. 당신이 Javascript라는 이름으로 첫 번째 li 위에 마우스를 올리면 'Jquey'목록이있는 하위 메뉴와 다시 하위 메뉴를 볼 수 있어야합니다. 그 방법을 알려주시겠습니까? 감사. – ashwinkpes

이전 답변은 실제 코드 솔루션이 무엇인지 제대로 설명하지 않습니다. 코드가 맞지만. 나는 이것이 "nav"div에서 가장 중요한 문제 일 것이라고 지적하고 싶습니다. 당신은 자동으로 높이를 두어서는 안됩니다. 브라우저가 나머지를 스크롤 할 수 있도록 고정하십시오. 목록이 너비보다 긴 경우 스크롤을 설정하기 위해 "오버플로"스타일을 시도 할 수도 있습니다.

출처

2016-11-05 14:44:43 CodeRider

안녕하세요, 동일한 일이 Ron.basco에 의해 아래에 이루어집니다. 그러나 첫 번째 li 요소 wih 이름 'javascript'위에 마우스를 가져 가면 아직 작동하지 않는 하위 메뉴를 볼 수 있어야합니다. 어떤 생각이든 그것을 달성하는 방법. – ashwinkpes

스크롤 할 수있는 다중 레벨 가로 메뉴

답변

관련 문제