Question

我的下拉式超级菜单遇到了一些问题，我有两组列表项需要垂直并排放置在下拉列表中但是我只能看到一个列表，尽管已经编码了两个？< / p>

当我希望它们相反时，列表元素在悬停时显示为黑色和白色，白色正常，黑色悬停。此外，每个列表元素的项目符号点都不会显示？我知道这是因为压倒一切/冲突的风格，我只是不确定究竟是哪一种。

任何这方面的任何帮助都非常感谢。

示例小提琴： http://jsfiddle.net/DannyW86/8krqjjj7/6/

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 id="sub-nav">
                                <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</</li>
                                </ul>
                            </div>
                            <div id="sub-nav">
                                <ul>
                                    <li><a href="#">MINI</a></li>
                                    <li><a href="#">Motorrad</a></li>
                                    <li><a href="#">Nissan</a></li>
                                    <li><a href="#">Renault</a></li>
                                    <li><a href="#">Toyota</a></li>
                                </ul>
                            </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;}


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

.nav-column {width: 135px}

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

Answer 1

这有很多问题。

1）纠正这一行：

<li><a href="#">Lexus</</li> <!-- you didn't close the a tag properly -->

2）你的超级菜单有一个固定的高度，删除它。

3）纠正这两件事后，让jsFiddle窗口变宽，你会看到菜单出现。

http://jsfiddle.net/8krqjjj7/8/

Answer 2

第二个#sub-nav被推到第一个下面，因为：

#hdr-box nav ul {list-style: none; margin: 0 auto; width: 800px;}

你告诉所有你的ul是800px。

你应该使用class作为sub-nav而不是id，id是唯一的。

CSS子菜单列表无法正确显示，覆盖样式问题？

2 个答案: