Прокручиваемое многоуровневое горизонтальное меню

Я пытаюсь создать горизонтальное меню с несколькими уровнями прокрутки. Подменю отображается до уровня n, но полоса прокрутки не появляется, когда количество элементов li верхнего уровня больше по количеству и не может соответствовать странице. Вместо этого они начинают приходить в следующую строку.Прокручиваемое многоуровневое горизонтальное меню

Ниже приведен полный код

<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 ... если вы наведите курсор мыши на первое имя с именем Javascript, мы сможем увидеть подменю со списком «Jquey» и снова его подменю. Не могли бы вы рассказать мне, как это достичь. Благодарю. – ashwinkpes

В предыдущем ответе неправильно объясняется, что такое фактическое решение для кода. Хотя код правильный. Я хотел бы указать, что это, скорее всего, проблема с высотой в div «nav». Вы не должны указывать высоту в auto. Но скорее сохраните его, чтобы браузер прокрутил остальное. Вы также можете попробовать стиль «переполнения», чтобы установить прокрутку, если список длиннее ширины.

источник

2016-11-05 14:44:43 CodeRider

Привет, То же самое делает Ron.basco ниже, но если я надвигаюсь на первый элемент li с именем «javascript», я должен уметь видеть его подменю, которое все еще не работает. любая идея, как добиться этого. – ashwinkpes

Прокручиваемое многоуровневое горизонтальное меню

ответ

Смежные вопросы