html - 无法调整 ul 内联

Question

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

我试过调整位置并 float 到元素上，但最后还是没成功。

这是我的 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;
}