嘿家伙我有一个下拉菜单的问题。而不是我的子菜单直下,他们排队,就像他们在线。这变得非常令人沮丧。任何帮助赞赏。这是我的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。所有的帮助非常感谢。谢谢