CODEWITHSUNDEEP
cssmenualignmentsubmenu
user1797660
user1797660

Reputation: 21

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

Upvotes: 1

Views: 3455

Answers (2)

Josh Campbell
Josh Campbell

Reputation: 458

The best way to get around this and similar issues you may encounter with cross-browser validation is to use a reset stylesheet in your projects. This defaults all margins, padding, etc. to 0 for all browsers by default and eliminates most inconsistencies.

To use the reset stylesheet, simply click the link I provided, copy and paste the css from the site into a notepad.txt file and save it as reset.css. Place the file in your project folder and link to it as you would with any other .css file(assuming you use best practices). 

 <head>
     <link rel="stylesheet" type="text/css" href="reset.css">
 </head>

Note: The reset.css does set everything to default, so be sure to go through it and remove whatever you don't want set to 0 or none.

Upvotes: 0

Loai Labani
Loai Labani

Reputation: 26

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. (:
}

Upvotes: 1

Related Questions