Currently, I am working with asp.net and dealing with a horizontal menu issue. The alignment problem arises where the right side of Menu B appears higher than the left one (Menu A). I have included my code below for reference. Any suggestions or assistance would be greatly appreciated.
HTML:
<div id="head">
<div id="exit"><span style="color:#222535">Exit</span></div>
<ul id="navWrapper"> <!-- Top Nav-->
<li><!-- Menu B--->
<span style="color:#190d69;font-size:12px;font-style:normal;font-weight:bold;">Name Surname here</span>
<ul>
<li><a href="#">Menu B, item 1</a></li>
<li><a href="#">Menu B, item 2</a></li>
</ul>
</li><!-- Menu B-->
<li><!-- Menu A-->
<a href="#">Menu A</a>
<ul>
<li> <a href="#">Menu A, item 1</a></li>
<li> <a href="#">Menu A, item 2</a></li>
</ul>
</li><!-- Menu A -->
</ul><!-- Top Nav-->
</div>
CSS:
#exit {
float:right;
background-color:#d2f1e6;
color:#f2f9ff;
width:10%;
height:43px;
border-left:1px solid #ccc;
cursor:pointer;
}
#exit span {
float:right;
font-family:Calibri;
font-size:15px;
color:#02012e;
height:27px;
margin-top:11px;
margin-right:9px;
}
/*Top menu style*/
a, a:hover {
text-decoration: none;
}
/**********/
ul#navWrapper {
width:100%;
border: 0 black solid;
/*margin-left: -39px;*/
/*float: right;*/
margin-top:0px;
margin-right:0px;
}
ul#navWrapper li {
width:15%;
height:42px;
border: 0 red dashed;
float: right;
list-style: none;
margin-right: 0px;
background-color: #DDD;
padding: 0 0.25em;
/*border-radius: 4px;*/
/*box-shadow: 3px 3px 6px 1px #333;*/
}
ul#navWrapper li li {
width:150px;
height:40px;
border: 0 blue dashed;
float: none;
margin-left: -44px;
margin-top: 2px;
background-color:#fff;
border-bottom:2px solid #fff;
}
ul#navWrapper li li:first-child {
margin-top: 23px;
}
ul#navWrapper ul {
display: none;
position: absolute;
background-color: #FFF; /* For non-CSS3 browsers. */
background-color: rgba(255, 255, 255, 0);
}
ul#navWrapper li:hover ul {
display: block;
}
ul#navWrapper li img {
width:33px;
height:43px;
float:left;
margin-right:10px;
background-color:#ccc;
}
ul#navWrapper li span {
font-family:Calibri;
font-size:12px;
color:#02012e;
float:left;
margin-right:5px;
margin-top:4px;
}
ul#navWrapper li:hover {
background-color: #8C8D61;
}
ul#navWrapper li li:hover {
background-color:#fff;
border-bottom:2px solid #0f1430;
}
This is the corresponding Fiddle link: http://jsfiddle.net/a6u47sa2/