Search code examples
cssmenualignmentsubmenu

CSS Positioning, Menu List Alignment (Need Help)

i'm designing a menu & sub-menu

and i am facing an issue with the alignment for the sub-menu

menu

i would like to have the end of sub-menu to be aligned with the right-edge of "more" option, as arrow is pointed at.

if i use right: -somepx; it would require me to have different alignment in the chrome it would be 10px while in the safari would be 5px

is there a cross platform solution for this.

the HTML code is:

<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>

the CSS code is 

#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;
}
#header #menu li:first-child { 
    border-radius: 55px 0 0 55px;
    padding-left: 20px;
}
#header #menu li:last-child { 
    border-right: 1px solid #d2d2d2;
    border-radius: 0 55px 55px 0;
    padding-right: 20px;
}
#header #menu a {
    display:block;
    font: 20px 'Klavika Rg';
    text-transform: uppercase;
}
#header #menu .more:after {
    content: "{";
    font-family: 'WebSymbols';
    font-size: 22px;
    margin-left: 7px;
    line-height: 0;
}
/*--- DROPDOWN ---*/
#header #menu ul{
    list-style:none;
    position: absolute;
    right: 0px;
    margin: 0;
    visibility: hidden;
}
#header #menu ul li{
    position: relative; 
    float: left;
    margin-top: 0;
    padding: 6px 10px 1px 10px;
    margin-left: -1px;
}
#header #menu ul li:first-child { 
    border-radius: 15px 0 0 15px;
    padding-left: 20px;
}
#header #menu ul li:last-child { 
    border-right: 1px solid #d2d2d2;
    border-radius: 0 0 15px 0;
    padding-right: 20px;
}
#header #menu ul a{
    white-space:nowrap; 
    font: 15px 'Klavika Rg';    
    transition: all 0;
    -moz-transition: all 0; /* Firefox 4 */
    -webkit-transition: all 0; /* Safari and Chrome */
    -o-transition: all 0; /* Opera */
}
#header #menu li ul{ 
    margin-top: 6px;
    width: 500px;
}
#header #menu li:hover ul{ 
    visibility: visible;
}
Solution

  • Well what you have to do is changing the floot to header: 

    #header #menu ul li{
    position: relative; 
    float: right; <------- Here
    margin-top: 0;
    padding: 6px 10px 1px 10px;
    margin-left: -1px; <------- change this to -1px for prefection. (:
}