下拉菜單水平顯示子菜單而不是垂直

我需要以下方面的幫助，任何幫助都會很棒。我確定它很簡單，只是看着它太長了可能下拉菜單水平顯示子菜單而不是垂直

下拉菜單水平顯示子菜單而不是垂直加子菜單背景停留在那裏。

代碼：

body { 
 
    font-family: arial, sans-serif; 
 
} 
 
* { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
#Header { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background: url(images/glasgow.jpg); 
 
    background-size: cover; 
 
} 
 
/*Top Logo*/ 
 

 
#Logo { 
 
    width: 115px; 
 
    height: auto; 
 
    float: left; 
 
    margin: 15px; 
 
    cursor: pointer; 
 
} 
 
/*Navigation ul*/ 
 

 
#NavBar ul { 
 
    width: 100%; 
 
    height: 100px; 
 
    background: #6563af; 
 
    line-height: 100px; 
 
} 
 
/*Navigation li*/ 
 

 
#NavBar ul li { 
 
    list-style-type: none; 
 
    display: inline; 
 
    float: right; 
 
} 
 
/*Navigation a*/ 
 

 
#NavBar ul li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 20px; 
 
} 
 
/*Navigation li HOVER*/ 
 

 
#NavBar ul li:hover { 
 
    background: #8269e0; 
 
    transition: all 0.40s; 
 
} 
 
#NavBar ul li ul li { 
 
    display: none; 
 
} 
 
#NavBar ul li:hover ul li { 
 
    display: inline; 
 
}

<body> 
 
    <div id="MainContainer"> 
 
    <!--Start of MainContainer--> 
 

 
    <div id="Header"> 
 
     <!--Start of Header--> 
 

 
     <div> 
 
     <img id="Logo" src="images/logo.png"> 
 
     </div> 
 

 
     <div id="NavBar"> 
 
     <ul> 
 
      <li><a href="#">Item 5</a> 
 
      </li> 
 
      <li><a href="#">Item 4</a> 
 
      <ul> 
 
       <li><a href="#">Sub 1</a> 
 
       </li> 
 
       <li><a href="#">Sub 2</a> 
 
       </li> 
 
       <li><a href="#">Sub 3</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">Item 3</a> 
 
      </li> 
 
      <li><a href="#">Item 2</a> 
 
      </li> 
 
      <li><a href="#">Item 1</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 

 
    </div> 
 
    <!--End of Header--> 
 

 

 

 

 
    </div> 
 
    <!--End of MainContainer--> 
 
</body>

來源

2016-10-08 user2916941

我認爲，所有你需要做的是： -

#NavBar ul li:hover ul li{ 
     display:inline; 
    } 
#NavBar ul{ 
    width:100%; 
    height:100px; 
    background:#6563af; 
    line-height:100px; 
    display: inline /* just a safe side */ 
}

改成這樣： -

#NavBar ul li:hover ul li{ 
      display:block; 
     } 
#NavBar ul{ 
    width:100%; 
    height:100px; 
    background:#6563af; 
    line-height:100px; 
    display: block /* just a safe side */ 
}

來源

2016-10-08 06:05:09

#NavBar 
 
{ 
 
\t margin-top:15px 
 
} 
 

 
#NavBar ul 
 
{ 
 
\t list-style:none; 
 
\t 
 
\t margin:0; 
 
\t padding:0 
 
     width: 100% !important; 
 
    height: 100px; 
 
    background: #6563af; 
 
    line-height: 100px; 
 
} 
 

 
#NavBar ul a 
 
{display:block; 
 
\t color: white; 
 
\t text-decoration:none; 
 
\t font-weight:700; 
 
\t font-size:12px; 
 
\t line-height:32px; 
 
\t padding:0 15px; 
 
\t 
 
} 
 

 
#NavBar ul li 
 
{ 
 
\t position:relative; 
 
\t float:left; 
 
\t margin:0; 
 
\t padding:0 
 
} 
 

 

 

 
#NavBar ul li:hover 
 
{ 
 
\t background: #8269e0; 
 
    transition: all 0.40s; 
 
} 
 

 
#NavBar ul ul 
 
{ 
 
\t display:none; 
 
\t position:absolute; 
 
\t top:100%; 
 
\t left:0; 
 
\t background:#6563af; 
 
\t padding:0 
 
} 
 

 
#NavBar ul ul li 
 
{ 
 
\t float:none; 
 
\t width:200px 
 
} 
 

 
#NavBar ul ul a 
 
{ 
 
\t line-height:120%; 
 
\t padding:10px 15px 
 
} 
 

 

 

 
#NavBar ul li:hover > ul 
 
{ 
 
\t display:block 
 
}

<div id="MainContainer"><!--Start of MainContainer--> 
 

 
    <div id="Header"><!--Start of Header--> 
 

 
     <div><img id="Logo"src="images/logo.png"></div> 
 

 
     <div id="NavBar"> 
 
      <ul> 
 
       <li><a href="#">Item 5</a></li> 
 
       <li><a href="#">Item 4</a> 
 
        <ul class="sub-ul"> 
 
         <li><a href="#">Sub 1</a></li> 
 
         <li><a href="#">Sub 2</a></li> 
 
         <li><a href="#">Sub 3</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">Item 3</a></li> 
 
       <li><a href="#">Item 2</a></li> 
 
       <li><a href="#">Item 1</a></li> 
 
      </ul> 
 
     </div> 
 

 
</div><!--End of Header--> 
 

 

 

 

 
</div><!--End of MainContainer-->

來源

2016-10-08 06:22:03

可能有助於OP任何解釋？ –

op作爲顯示器使用最多;內聯，我改變了這些顯示：塊 –

你需要顯示/隱藏<UL>而不是爲子 <li>元素，並不需要提及的父母高度<UL>

檢查工作演示

body { 
 
    font-family: arial, sans-serif; 
 
} 
 
* { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
#Header { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background: url(images/glasgow.jpg); 
 
    background-size: cover; 
 
} 
 
/*Top Logo*/ 
 

 
#Logo { 
 
    width: 115px; 
 
    height: auto; 
 
    float: right; 
 
    margin: 15px; 
 
    cursor: pointer; 
 
} 
 
/*Navigation ul*/ 
 

 
#NavBar ul { 
 
    width: 100%; 
 
    background: #6563af; 
 
    line-height: 100px; 
 
} 
 
/*Navigation li*/ 
 

 
#NavBar ul li { 
 
    list-style-type: none; 
 
    float: left; 
 
    position:relative; 
 
} 
 

 
#NavBar ul:after{content:"";display:block;clear:both} 
 

 
/*Navigation a*/ 
 

 
#NavBar ul li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 20px; 
 
} 
 
/*Navigation li HOVER*/ 
 

 
#NavBar ul li:hover { 
 
    background: #8269e0; 
 
    transition: all 0.40s; 
 
} 
 

 
/*hide submenu*/ 
 
#NavBar ul li ul { 
 
    display: none; 
 
} 
 

 
/*Show submenu at hover*/ 
 
#NavBar ul li:hover ul { 
 
    display:block; 
 
    position:absolute; 
 
    top:100px 
 
    
 
} 
 

 
/*Make submenu vertical */ 
 
#NavBar ul li ul li{ 
 
    display: block; 
 
float:none; 
 
    line-height:50px 
 
}

<div id="MainContainer"><!--Start of MainContainer--> 
 

 
    <div id="Header"><!--Start of Header--> 
 

 
     <div><img id="Logo"src="images/logo.png"></div> 
 

 
     <div id="NavBar"> 
 
      <ul> 
 
       <li><a href="#">Item 5</a></li> 
 
       <li><a href="#">Item 4</a> 
 
        <ul class="sub-ul"> 
 
         <li><a href="#">Sub 1</a></li> 
 
         <li><a href="#">Sub 2</a></li> 
 
         <li><a href="#">Sub 3</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">Item 3</a></li> 
 
       <li><a href="#">Item 2</a></li> 
 
       <li><a href="#">Item 1</a></li> 
 
      </ul> 
 
     </div> 
 

 
</div><!--End of Header--> 
 

 

 

 

 
</div><!--End of MainContainer-->

希望它有助於

來源

2016-10-08 07:42:10

謝謝你太棒了。 – user2916941

下拉菜單水平顯示子菜單而不是垂直

回答

相關問題