I am working on creating a horizontal drop-down menu using CSS. However, I'm facing an issue where the submenu either appears all the way to the left of the website (when I use position: absolute) or directly to the left of the menu (when set to position: relative). My goal is to have it appear directly below the menu I hover over.
Below is the code I am currently using:
/* Style for menu div */
.menu{
height: 35px;
float: left;
padding: 0px;
margin: 0px;
outline: 1px solid grey;
background-color: #f6f6f6;
font-size:100%;
}
/* Styling for UL Menu */
.menu ul{
list-style: none;
margin: 0px;
padding: 0px;
float: left;
height: 100%;
background-color: #f6f6f6;
}
/* Show submenu on mouseover */
.menu ul li:hover ul{
display: block;
}
/* Change background on mouseover */
.menu ul li:hover{
background-color: #005ea2;
}
/* Styling for menu LI */
.menu ul li{
display: inline;
height: 35px;
padding-left: 5px;
padding-right: 5px;
padding-top: 9px;
padding-bottom: 9px;
margin: 0;
position: relative;
border-right: 1px dashed gray;
}
/* Remove border from last item */
.menu li:last-child{
border: none;
}
.menu a{
line-height: 250%;
color: #333333;
text-decoration: none;
height: 100%;
margin: 0px;
}
/* Styling for UL Submenu */
.menu ul li ul{
display: none;
width: 200px;
padding: 0px;
margin: 0;
background-color: #f6f6f6;
outline: 1px solid gray;
position: absolute;
z-index: 200;
}
/* Styling for LI Submenu */
.menu ul li ul li{
height: 35px;
display: block;
line-height: 100%;
padding: 0px;
border: none;
background-color: #f6f6f6;
position: relative;
}