下拉菜單向右而不是直下

Question

嘿傢伙我有一個下拉菜單的問題。而不是我的子菜單直下，他們排隊，就像他們在線。這變得非常令人沮喪。任何幫助讚賞。這是我的CSS和HTML代碼。

* DROP DOWN MENU-------------------------------------------------------------------------------*/ 
#navmenu{ 
margin-top:3%; 
margin-bottom:6%; 
} 
ul#menu li{ 
position:static; 
float:left; 
text-align:center; 
list-style-type:none; 
} 
#menu a{ 
text-decoration:none; 
} 





#menu a{ 
    text-decoration:none; 
    border:2px solid black; 
    width:240px; 
    display:inline-block; 
    line-height:25px; 
    text-shadow: 0 -1px 3px #99ccff; 
    box-shadow: 0 3px 4px #99ccff; 
    border-radius:3px; 
    -moz-border-radius:3px; 
    -webkit-border-radius:3px; 
    -moz-box-shadow: 0px 3px 3px #99ccff; 
    -webkit-box-shadow:0px 3px 3px #99ccff; 
    /*background-color:#3399ff; 
    color:white;*/ 
    margin-right:6%; 
} 
.sub{ 
display:none; 
position:absolute; 
z-index:9; 
text-align:left; 

} 
ul#menu li:hover .sub{ 
display:block; 
} 

下面是HTML：

<div id="navmenu"> 
     <ul id="menu"> 
      <li><a href="#">Internet</a> 
      <ul class="sub"> 
       <li><a href="#">Pricing</a></li> 
       <li><a href="#">Agreement</a></li> 
       <li><a href="#">Something</a></li> 
      </ul> 
      </li> 
      <li> <a href="#">MTTV</a> 
      <ul class="sub"> 
       <li> derp</li> 
       <li>derp</li> 
       <li>derp</li> 
      </ul> 
      </li> 
      <li><a href="#">Telephone</a> 
      <ul class="sub"> 
       <li>derp </li> 
       <li>derp</li> 
       <li>derp </li> 
      </ul> 
      </li> 
      <li><a href="#">Pay Your Bill</a></li> 
      <li><a href="#">Check Your E-mail</a> </li> 
      <li><a href="#">Contact Us</a></li> 
      <li><a href="#">Classifieds</a></li> 
     </ul> 



    </div> 
    <br id="break"> 
    <div class="slider-wrap"> 
     <div id="main-photo-slider" class="csw"> 
      <div class="panelContainer"> 

       <div class="panel" title="Panel 1"id="panel 1"> 
        <div class="wrapper"> 
         <a href="#"><img src="espn.jpg" alt="temp" /></a> 

        </div> 
       </div> 
       <div class="panel" title="Panel 2" id="panel 2"> 
        <div class="wrapper"> 
         <a href="#"><img src="facebook.jpg" alt="temp" /></a> 

        </div> 
       </div>  
       <div class="panel" title="Panel 3" id="panel 3"> 
        <div class="wrapper"> 

         <a href="#"><img src="appalachian.jpg" alt="app" /></a> 


        </div> 
       </div> 

       </div> 





      </div> 
      <a class ="cross-link active-thumb" href="#1"><button aria-label="Go to img #1" id ="img 1" class="nav-thumb"></button></a> 
       <a class ="cross-link" href="#2"><button aria-label="Go to img #2" id="img 2" class="nav-thumb"></button></a> 
        <a class ="cross-link" href="#3"><button aria-label="Go to img #3" id="img 2" class="nav-thumb "></button></a> 

     </div> 

我有一個幻燈片中由JS處理的頁面的中間。不過，我的物品有Z-index。所有的幫助非常感謝。謝謝

Answer 1

請這些樣式添加到您的CSS：

ul.sub { 
    width: 245px; 
    padding-left: 0px; 
} 

jsFiddle.

Answer 2

試試這個：

 <ul class="sub"> 
      <li><a href="#">Pricing</a></li></br> 
      <li><a href="#">Agreement</a></li></br> 
      <li><a href="#">Something</a></li></br> 
     </ul> 

Answer 3

這個CSS工作正常，我：你可以用你的建議的HTML列表（儘管你可以刪除class="sub"）。此外，您最多可以擁有3級子菜單（只需在<li>內部嵌入另一個<ul>;您還可以編輯代碼以獲得更多子目錄）。根據需要編輯評論。

#navmenu { 
    margin-top:3%; 
    margin-bottom:6%; 
    display: block; 
    width: 100%; 
    height: 25px; 
    text-align: center; 
    z-index: 99;/*Set this as high as needed to let the menu unfold on top of the rest of your site (instead of below other elements)*/ 
} 

#navmenu ul { 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
    list-style-type: none; 
} 

#navmenu li { 
    margin: 0; 
    text-align: center; 
    width: 240px;/*Set here your menu with*/ 
} 

#navmenu ul a, 
#navmenu ul a:visited { 
    display: block; 
    line-height: 25px; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    text-decoration: none; 
    border:2px solid black; 
    text-shadow: 0 -1px 3px #99ccff; 
    box-shadow: 0 3px 4px #99ccff; 
    border-radius:3px; 
    -moz-border-radius:3px; 
    -webkit-border-radius:3px; 
    -moz-box-shadow: 0px 3px 3px #99ccff; 
    -webkit-box-shadow:0px 3px 3px #99ccff; 
} 

#navmenu > ul > li { 
    position: relative; 
    display: inline-block; 
    vertical-align: top; 
    /* width: auto; *//* Set this to auto if you want the main menu items to have a just the width they need */ 
    height: 25px; 
} 

#navmenu > ul > li > a, 
#navmenu > ul > li > a:visited { 
    padding: 0 8px; 
    overflow: hidden; 
} 

#navmenu li:hover { 
    /*Hover style*/ 
} 

#navmenu li:hover > a, 
#navmenu li:hover > a:visited { 
    color: #ee9; 
} 

#navmenu > ul > li ul { 
    display:none; 
    position:absolute; 
    line-height:25px; 
    text-align:left; 
    z-index: 99; 
} 

#navmenu > ul > li > ul { 
    min-width:100%; 
} 

#navmenu > ul > li > ul li { 
    position:relative; 
    display:block; 
} 

#navmenu > ul > li > ul > li a, 
#navmenu > ul > li > ul > li a:visited { 
    line-height:25px; 
    padding:0 8px; 
} 

#navmenu > ul > li > ul > li ul { 
    position:absolute; 
    left:100%; 
    top:0; 
} 

#navmenu > ul > li:hover > ul, 
#navmenu > ul > li > ul > li:hover > ul, 
#navmenu > ul > li > ul > li > ul > li:hover > ul { 
    display:block; 
}