Выпадающее меню, идущее вправо, а не прямо вниз

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-индекс для моих предметов. Вся помощь очень ценится. Спасибо

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 уровней подменю (просто вставьте еще один <ul> внутри <li>, вы также можете отредактировать код, чтобы иметь еще больше подписчиков). Просто отредактируйте комментарии по мере необходимости.

#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; 
}