<div id="header">
<div class="cont">
<div id="banner">
<div id="nav">
<ul>
<li><a href="index.htm">home</a></li>
<li><a href="work.html">Works»</a>
<ul>
<li><a href="paintings.html">Paintings</a></li>
<li><a href="#">Watercolour</a></li>
<li><a href="#">Ink</a></li>
</ul>
</li>
<li style="
"><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="greeting" style="
clear: both;
">
Navbar CSS (Check out the full CSS in the JSfiddle link provided below)
#nav
{ float:right;
position:relative;
width:100%;
text-align:center;
font-family: monospace, serif;
list-style-type: none;
height:150px;
}
#nav ul
{float: center;
clear: left;
font-family: monospace, serif;
list-style-type: none;
text-align:center;
padding:0;
}
To see an illustration of the issue, visit this JSfiddle link.
The problem arises when hovering over the "Works" link as shown in the jsfiddle. Despite my attempts to rectify it, I have not been successful. I seek your assistance in understanding why the drop-down menu appears above the parent link instead of below. Previously, it was functioning correctly below the main link until I made some CSS adjustments that caused this unexpected behavior. Your help and explanation would be greatly appreciated.