How can I make the submenu appear when hovering over the corresponding navigation element on the navigation bar? Here is how I set the display to none for the second level navigation list:
nav ul ul {
position:absolute; top: 100%;
background-color: #2b0306;
display: none;
}
I also set the first navigation list to display as inline-block like this:
nav ul li a {
display: inline-block;
color: #fff;
padding: 10px 20px;
text-decoration: none;
width: 250px;
position: relative;
}
nav ul li a:visited { color: #fff; }
nav ul li a:hover { background-color: #6d0911; }
nav ul ul { position:absolute; top: 100%; background-color: #2b0306; display: none; }
nav ul ul li { position: relative; }
nav ul ul ul { left: 100%; top: 0px; }
For the nav position, I used absolute positioning:
nav {
background-color: rbga(0,0,0,.65);
position: absolute;
top: 0px; left: 0px;
padding: 50px 0 0 0;
width: 100%;
}
nav::after { content: ' '; display: block; clear: both; }
nav ul { list-style: none; margin: 0; padding: 0px; }
nav ul li: hover { background-color: #2b0306; }
nav ul li: hover > ul { display: block; }
/* top-level */
nav > ul { padding-left: 300px; }
nav > ul > li { float: left; }
nav > ul > li > a {
width: auto;
padding: 10px 20px 15px 20px;
}
And here is the HTML code snippet:
<nav>
<ul><!--first level navigation-->
<li><a title="About Us" href="aboutATMC.php" >About Us</a></li>
<li>
<a title="Services" href="#" aria-haspopup ="true">Services</a>
<ul><!--Second level navigation-->
<li><a title="Consultancy" href="#">Consultancy</a></li>
<li>
<a title="Learning & Development Solutions" href="#" aria-haspopup ="true">Learning & Development Solutions</a>
<ul><!--Third level navigation-->
<li><a title="Training & Coaching" href="#">Training & Coaching</a></li>
<li><a title="Learning Material" href="#">Learning Material<& Understandable enough?</p>
</div>
Any suggestions or feedback are greatly appreciated.