下拉菜单水平显示子菜单而不是垂直

我需要以下方面的帮助，任何帮助都会很棒。我确定它很简单，只是看着它太长了可能下拉菜单水平显示子菜单而不是垂直

下拉菜单水平显示子菜单而不是垂直加子菜单背景停留在那里。

代码：

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

下拉菜单水平显示子菜单而不是垂直

回答

相关问题