I am encountering an issue with my dropdown mega menu. I have two sets of list items that should be displayed vertically side by side with bullet points in the dropdown, but only one list is appearing despite coding for both.
Additionally, the list elements are changing to black and white on hover instead of the desired white normally and black on hover. The bullet points for each list element are also not displaying, likely due to conflicting styles overriding each other.
Any assistance with resolving these issues would be greatly appreciated. Thank you.
Example fiddle: 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 ;
}