I need the submenu to show when hovering over the corresponding navigation element on the navigation bar. For the second level navigation list, I set display to none as follows

```
nav ul ul { 
    position:absolute; top: 100%;
    background-color: #2b0306; 
    display: none;
}

```

and set the the first navigation list to display as inline-block as follows:

```
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; }

```

As for the nav position, I set it to absolute:

```
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 this is the HTML code:

```
<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 &amp; Development Solutions" href="#" aria-haspopup ="true">Learning &amp; Development Solutions</a>
                            <ul><!--Third level navigation-->
                                <li><a title="Training &amp; Coaching" href="#">Training &amp; Coaching</a></li>
                                <li><a title="Learning Material" href="#">Learning Material</a></li>
                            </ul><!--End of third level-->
                    </li>

                </ul><!--end of second level-->
            </li>
            <li><a onclick="toggleNavPanel ('contact_panel')" id = "contactus" href="#" >Contact Us <span id="navarrow"> &#9662;</span></a></li>
        </ul><!--End of first level-->
    </nav>

```

Any advice please?