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个级别的子菜单（只需在<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;
}

下拉菜单向右而不是直接向下

3 个答案: