CODEWITHSUNDEEP
css
Md. Reazul Karim
Md. Reazul Karim

Reputation: 655

Aligning the right edge of the drop down menu

I have the following code from here which generates some fat menu:

<ul id="menu">

        <li class="menu_right"><a href="" class="drop">1 column</a>
            <div class="dropdown_1column align_right">

                    <div class="col_1">

                        <ul class="simple">
                            <li><a href="#">FreelanceSwitch</a></li>
                            <li><a href="#">Creattica</a></li>
                            <li><a href="#">WorkAwesome</a></li>                            
                        </ul>   

                    </div>

            </div>
        </li></ul>

The style is:

#menu .menu_right {
    float: right;
    margin-right: 0px;
}
#menu li .align_right {
    /* Rounded Corners */
    -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
    left: -1px;
    top: auto;
}
#menu li {
    float: left;
    display: block;
    position: relative;
    padding: 4px 10px 4px 10px;
    margin-right: 30px;
    margin-top: 7px;
    border: none;
}
#menu li:hover {
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}
#menu li a {        
    display: block;
    outline: 0;     
}

If the right:-1px; is removed from #menu li:hover .align_right, then the right edge of the drop down no longer aligns with the right edge of the parent ie "1 column" in the menubar (instead the left edge of the drop down aligns with the parent).

What is the significance of the negative position of right? Usually the negative value of left/right has the purpose of hiding an element as is happening for the drop down ie they are hidden normally because of negative left and are shown when the left is no longer negative.

Upvotes: 1

Views: 2406

Answers (1)

Adil
Adil

Reputation: 41

i got the solution please check it http://jsfiddle.net/v4Jwu/

HTML

<select>
<option value="1">Client: Zac Brown Band</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>

CSS

select { direction: rtl; }

Upvotes: 4

Related Questions