Question

此菜单未获取ul容器的内嵌列表。

我尝试过玩过各种姿势并漂浮在各个元素上，但最终我还是不能让它发挥作用。

这是我的Fiddle

我想在div .mega-div中内联ul元素。

这是CSS：

.mega-wrapper {
width:100%;
margin:0 auto;
}

.mega-nav {
position:relative;
width:auto;
height:59px;
background:#252428;
}

.mega-nav ul .mega-ul {
display:block;
list-style:0;
margin:0;
padding:0;
}

.mega-nav .mega-ul li {
position:relative;
display:inline-block;
}

.mega-nav .mega-ul li a {
display:block;
font-size:1em;
color:#fff;
text-decoration:none;
padding:0 15px;
}

.mega-nav .mega-ul li a:hover,.mega-nav .mega-ul li:hover > a {
background:#333;
}

.mega-div {
position:absolute;
top:100%;
left:0;
height:auto;
background:#333;
display:none;
z-index:1000;
padding:20px 30px;
}

.mega-ul li ul {
float:left;
list-style:none;
margin:0 5% 15px 0;
padding:0;
}

.mega-ul li ul li a {
float:left;
display:block;
width:100%;
height:auto;
line-height:1.3em;
color:#888;
text-decoration:none;
padding:1px 0;
}

.mega-ul li .megaul-section li:first-child a {
font-size:1.2em;
color:#8dc63f;
}

.alsosee-agents {
font-size:1.2em!important;
color:#8dc63f!important;
}

.mega-ul li ul li a:hover {
color:#fff;
background:none;
}

.alsosee-agents:hover {
color:#fff!important;
}

.mega-ul ul li:first-child a:hover {
color:#fff;
}

.mega-nav .mega-ul:after {
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}

.mega-nav .mega-ul {
display:inline-block;
right:0;
left:auto;
}

.header-title {
line-height:59px;
}

.mega-nav .mega-ul li:nth-child(1n+6):hover .mega-div {
right:0;
left:auto;
}

.megaul-section {
width:auto;
}

.extra-width {
width:770px;
}

.mega-nav .mega-ul li:hover > .mega-div,.mega-ul li ul li {
display:block;
}

我该怎么做？

修改 -

很抱歉对问题不是很具体。我没有将主菜单排列到内联的问题。问题在于子菜单。每个子菜单部分都位于一个ul部分下。我想内联子菜单的ul部分。

Answer 1

首先，您需要更正这样的标记菜单

<ul class="menu">
<li> <a href=""> Home </ a> </ li>
<li> <a href=""> About Us </ a>
<ul> <! - drop down menu ->
<li> <a href=""> Production </ a> </ li>
<li> <a href=""> Clients </ a> </ li>
<li> <a href=""> For Partners </ a> </ li>
<li> <a href=""> For customers </ a> </ li>
<li> <a href=""> Advertising </ a> </ li>
</ ul>
</ li>
<li> <a href=""> Services </ a> </ li>
<li> <a href=""> Gallery </ a> </ li>
<li> <a href=""> Rates </ a> </ li>
<li> <a href=""> Reviews </ a> </ li>
<li> <a href=""> Contacts </ a> </ li>
</ ul>

结束css

*{
    margin: 0;
    padding: 0;
}

body {
    margin: 20px;
}

ul.menu {
    margin: 0;
    padding: 0;
    display: inline-block;
    background-color: #2b2b2b;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4f4f4f), to(#2b2b2b));
    background-image: -webkit-linear-gradient(#4f4f4f, #2b2b2b);
    background-image: -moz-linear-gradient(top, #4f4f4f, #2b2b2b);
    background-image: -ms-linear-gradient(#4f4f4f, #2b2b2b);
    background-image: -o-linear-gradient(#4f4f4f, #2b2b2b);
    background-image: linear-gradient(#4f4f4f, #2b2b2b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#2b2b2b', GradientType=0); 
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    width: 900px;
}

ul.menu li {
    float: left;
    list-style: none;
    border-right: 1px solid #4f4f4f;
    position: relative;
}

ul.menu li a {
    color: white;
    display: block;
    font-family: Arial;
    font-size: 13px;
    padding: 8px 20px 10px;
    text-decoration: none;
    border-right: 1px solid #2b2b2b;
}

ul.menu li a:hover {
    background-color: #2b2b2b;
}

ul.menu li:first-child a:hover {
    border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
}
/*dropdown menu*/
ul.menu li ul {
    display: none;
}

ul.menu li:hover ul {
    display: block;
    position: absolute;
    top: 34px;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    background-color: #2b2b2b;
    z-index: 1000;
}

ul.menu li:hover ul li {
    float: none;
    width: 150px;
    border-right: none;
}

ul.menu li:hover ul li a {
    border-top: 1px solid #4f4f4f;
    border-right: none;
    padding: 6px 20px 8px;
}

ul.menu li:hover ul li a:hover {
    background-color: transparent;
    color: #c1deff;
}

ul.menu li:hover ul li:first-child a:hover {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

Answer 2

删除ul和它在css中的类之间的多余空格。现在你的风格是正确的，但你选择了一个错误。现在你正试图找到.mega-nav元素，然后在其中找到ul，然后找到.mega-ul INSIDE ul元素。不仅仅是具有超级级别的UL。

更改CSS：

.mega-nav ul.mega-ul

无法调整ul内联

2 个答案: