マルチレベルの水平スクロールメニュー

マルチレベルのスクロール可能な水平メニューを作成しようとしています。サブメニューは最大レベルまで上がっていますが、トップレベルのアイテム数が多く、ページに収まらない場合はスクロールバーが表示されません。代わりに、彼らは次の行に入ってくる。マルチレベルの水平スクロールメニュー

以下は、完全なコード

<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の高さの問題であることを指摘したいと思います。高さをautoにするべきではありません。ブラウザが残りの部分をスクロールするように固定してください。リストが幅よりも長い場合、スクロールをオンにするために "オーバーフロー"スタイルを試すこともできます。

出典

2016-11-05 14:44:43 CodeRider

こんにちは、同じことがRon.bascoによって行われていますが、最初のli要素の上に "javascript"という名前を置いても、まだ機能していないサブメニューが表示されている必要があります。どのようにそれを達成するための任意のアイデア。 – ashwinkpes

マルチレベルの水平スクロールメニュー

答えて

関連する問題