I'm currently in the process of designing a menu and sub-menu for my website. However, I've encountered an issue with the alignment of the sub-menu.
My goal is to have the end of the sub-menu aligned with the right-edge of the "More" option, as indicated by the arrow. The challenge I'm facing is that using 'right: -somepx;' would result in different alignments across browsers - 10px in Chrome and 5px in Safari.
Is there a universal solution that works seamlessly across all platforms?
Here is a snippet of the HTML code:
<div id=header>
<ul id="menu">
<li><a href="#">Get Closer</a></li>
<li><a href="#">Know your team</a></li>
<li><a href="#" class="more">More</a>
<ul>
<li><a href="#">Our Story</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Case Studies</a></li>
</ul>
</li>
<li><a href="#">Get in touch</a></li>
</ul>
</div>
And here is the corresponding CSS code:
#header #menu {
margin-top: 25px;
padding: 0px;
float: right;
list-style:none;
clear: right;
}
#header #menu li {
padding: 10px 15px 6px 15px;
border: 1px solid #d2d2d2;
position:relative;
float: left;
margin-left: -1px;
}
#header #menu li:hover {
background-color: #fff;
}
... (CSS code continued)