Question

整天都在敲打我的头脑，无法弄清楚如何纠正它

基本上我已经从＆＃34;服务＆＃34;创建了一个下拉菜单。我的主导航链接，但我的子菜单继续采用父导航菜单的属性。

我希望下拉菜单垂直显示在标题和文本下方，但元素水平对齐，就像主导航一样，我尝试过的任何内容都无法纠正它。

请参阅小提琴，例如：http://jsfiddle.net/DannyW86/b3uc21mp/2/

如果有人可以帮我解决这个问题，那将非常感激！

由于

HTML：

<div id="hdr-box">
            <a href="#"><div id="logo"></div></a>

            <nav class="mainnav">
                <ul>
                    <li><a href="#">New Cars</a></li>
                    <li><a href="#">Used Cars</a></li>
                    <li><a href="#">Servicing</a>
                        <div class="mega-menu">
                            <img src="img/servicing.png" />
                            <h3>Servicing</h3>
                            <p>Lorem Ipsum dolor sit amet, consectetur adipiscing elit, Ut ul tempus tellus.</p>
                            <div class="nav-column">
                                <ul>
                                    <li><a href="#">Book a sevice Online</a></li>
                                    <li><a href="#">Express Service</a></li>
                                    <li><a href="#">BMW</a></li>
                                    <li><a href="#">Dacia</a></li>
                                    <li><a href="#">Hyundai</a></li>
                                    <li><a href="#">Lexus</a></li>
                                </ul>
                            </div>
                            <div class="nav-column"></div>
                        </div><!-- End of mega menu  -->

                    </li>
                    <li><a href="#">Finance</a></li>
                    <li><a href="#">Accessories</a></li>
                </ul>
            </nav><!-- End of mainnav -->
        </div>

CSS：

#hdr-box {
width: 100%;
display: inline-block;
}

#logo {
width: 361px;
height: 90px;
background: url(../img/logo.png) no-repeat;
float: left;
}

.mainnav {
/*font-family: "Myriad Pro", 'PT Sans Caption', sans-serif;*/
font-size: 20px;
}

#hdr-box nav {
line-height: 30px;
margin: 30px auto 0 auto;
text-align: center;
width: 563px;
float: right;
margin-right: 50px;
}

#hdr-box nav ul {list-style: none; margin: 0 auto; width: 800px;}
#hdr-box nav li {float: left; display: inline; margin-right: 40px;}

#hdr-box nav a,  #topbar nav a:visited{
color: #000;
display: inline-block;
text-decoration: none;
}

#hdr-box nav a:hover {
color: #02a2e0;
}

nav li > .mega-menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #fff;
width: 770px;
height: 204px;
padding: 40px;
background: #02a2e0;
visibility: hidden;
/*display: none;*/
overflow: hidden;
position: absolute;
right: 200px;
z-index: 99999;
text-align: left;
list-style: disc;
}

nav li:hover > .mega-menu {
visibility: visible;
display: block;
}

.mega-menu img {
float: left;
margin-right: 30px;
width: 272px;
height: 207px;
}

.mega-menu h3 {
color: #fff;
font-size: 18px;
}

#mainnav ul.mega-menu ul {
display: none;
position: absolute;
left: 0;
}

#mainav ul.mega-menu li { display: block!important;}

/*nav li > .mega-menu ul ui  {
display: block!important;
color: #fff;

}   

.mainnav ul ul li {
float: none!important;
}*/

.mega-menu p {line-height: 23px;}

.nav-column {width: 135px}

Answer 1

.nav-column继承了#hdr-box nav li的内联样式。选择.nav-column ul li并显示您的样式不会覆盖#hdr-box nav li设置的样式，因为在类之前会遵循ID。尝试将ID添加到.nav-column。 jsFiddle Example

<强> HTML

<div id="sub-nav" class="nav-column">
    <ul>
        <li><a href="#">Book a sevice Online</a></li>
        <li><a href="#">Express Service</a></li>
        <li><a href="#">BMW</a></li>
        <li><a href="#">Dacia</a></li>
        <li><a href="#">Hyundai</a></li>
        <li><a href="#">Lexus</a></li>
    </ul>
</div>

<强> CSS

#sub-nav ul li {
    float: none ;
    display: block ; 
}

CSS子菜单不会垂直显示，保持水平对齐

1 个答案: