As a novice in web development, I recently attempted to create a website featuring a horizontal main menu with a vertical submenu.
However, I encountered an issue when hovering over a list item in the main menu - the submenu would drop down and disrupt the other elements of the main menu. Additionally, the submenu did not align correctly with the main menu list item.
You can find the code for this issue here: http://jsfiddle.net/mCvct/1/
I have spent some time trying to resolve this problem and exploring different solutions, but unfortunately, I have not been able to fix it yet.
Here is the code snippet:
<div id="menu">
<ul>
<li> <a href="#">SERVICES</a>
<div class="subnavi">
<ul>
<li><a href="#">service1</a>
</li>
<li><a href="#">service2</a>
</li>
<li><a href="#">service3</a>
</li>
</ul>
</div>
<!-- end of subnavi -->
</li>
<li> <a href="contact.php">CONTACT US</a>
</li>
<li> <a href="#">HOME</a>
</li>
<li> <a href="#">ABOUT US</a>
</li>
</ul>
</div>
<!-- end of menu -->
ul {
overflow:hidden;
vertical-align:middle;
}
ul li {
list-style:none;
}
ul li a {
width:16.2%;
/*164.6px;*/
font-size:1em;
line-height:1.8em;
float:left;
display:inline;
text-align:center;
}
#menu ul li .subnavi {
display:none;
clear:both;
}
#menu ul li .subnavi ul {
width:20em;
background:#a0a0a0;
list-style:none;
margin:auto;
line-height:2em;
border:1px solid #a60000;
}
#menu ul li .subnavi ul li a {
width:24em;
line-height:1.8em;
float:none;
display:inline;
}
#menu ul li:hover .subnavi {
display:block;
}