I am encountering a small issue with my dropdown menu that I can't seem to solve.
The first item in the dropdown menu appears correctly, but the second item is slightly shifted to the right. It seems like the margin-right applied to the link may be causing this shift. How can I work around this issue?
This navigation menu is quite simple, setting the position of the dropdown item to absolute and hiding it with overflow:hidden on the parent element. When hovered over, the dropdown menu becomes visible by changing overflow to visible.
You can view the live site here.
CSS
#mainMenu {
position: relative;
}
#mainMenu ul {
list-style: none;
float: right;
background-color: #FFFFFF;
}
#mainMenu ul li {
position: relative;
display: inline;
float: left;
/*padding-right: 1.5em;*/
font-size: 1.2em;
zoom:1;
overflow: hidden;
}
#mainMenu>ul>li {
line-height: 2em;
}
#mainMenu ul li:hover {
overflow: visible;
}
#mainMenu ul li a {
float: left;
text-decoration: none;
color: black;
padding: 0 1em;
}
#mainMenu>ul>li:last-child a {
padding:0.4em 1em 0.4em 1em;
border-radius:4px;
background-color: #00b200;
color: #FFFFFF;
}
#mainMenu ul li a:hover{
text-decoration: none;
color: rgb(42, 160, 239);
}
#mainMenu ul ul{
position: absolute;
top: 2em;
left: 60%;
width: 10em;
margin-left: -3em;
height: auto;
border: solid #CCC;
border-width: 0 1px 1px;
}
#mainMenu ul ul:first-child{
padding-top: 2em;
}
#mainMenu ul ul li,
#mainMenu ul ul a {
display:block;
float:none;
border:0;
box-shadow:none;
text-align:center;
font-size: 1em;
padding: 0.4em;
text-align: left;
}
#mainMenu ul ul li:first-child {
border-top:1px solid rgb(72, 147, 196);
}
#mainMenu ul ul li {
border-top: 1px solid #e9e9e9;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
background:#F2F6FA;
color:#333;
}
HTML
<div id="nav-row">
<h1>
<a href="\">
Corporate Site
<span></span>
</a>
</h1>
<div id="mainMenu">
<a href="#mainMenu" class="showMenu"></a>
<a href="#" class="hideMenu"></a>
<ul>
<li><a href="About">About</a>
<ul>
<li class="company"><a href="#">Company Profile</a></li><li class="team">
<a href="#">The Team</a></li><li class="linsux">
<a href="#">Pricing Packages</a></li>
</ul></li>
<li><a href="Services">Services</a>
<ul>
<li class="webDesign"><a href="#">Websites</a></li><li class="Emails">
<a href="#">Landing Pages</a></li><li class="Logos">
<a href="#">Logos</a></li>
</ul></li>
</li>
<li><a href="Case Studies">Case Studies</a></li><li>
<a href="Blog">Blog</a></li><li>
<a href="Contact">Contact</a></li><li>
<a href="Free Web Analysis">Free Web Analysis</a></li>
</ul>
</div>
</div>