CODEWITHSUNDEEP
css
jmenezes
jmenezes

Reputation: 1926

How to center a drop down under its link

I'm trying to center the drop down in the code below, under its link. How is this done? I'll be doing the show/hide part using jquery, but I cannot get it to center under the letter r which will be a glyphicon later.

    <!DOCTYPE html>
<html>
<head>
<title> New Document </title>
<style type="text/css">
.main{
    width:300px;
    background:cyan;
}
.right{
    float:right;
    position: relative;
    white-space: nowrap;
}
ul {
    list-style:none outside none;
    padding:0px;
    margin:0;
    position:absolute;
    right: 0;

}

</style>
</head>

<body>
<div class="main">
    Left
    <div class="right">
                <span>R</span>
            <ul>
                <li>Option 1</li>
                <li>Option 2</li>
                <li>Option 3</li>
                <li>Option 4</li>
            </ul>
    </div>
</div>

</body>
</html>

Upvotes: 0

Views: 126

Answers (1)

matewka
matewka

Reputation: 10158

Put the R inside the ul as the first list element. Add some CSS modifications and you're done.

See my fiddle: http://jsfiddle.net/Wq2Ls/1/

You also don't need .menu container. All its CSS can be put in the ul.
I also replaced the .right span with a div. Span is an inline element and it is not the best practice to put an ul inside it.

EDIT:
If you set position:absolute to the ul it is not a block element and won't let the R position itself in the center even if the R has text-align:center. Also the R should be put in a div that it could fill the whole width of its parent.
Updated fiddle: http://jsfiddle.net/Wq2Ls/5/

Upvotes: 1

Related Questions