CODEWITHSUNDEEP
javascriptjqueryhtmlcss
oleg.foreigner
oleg.foreigner

Reputation: 1023

how to align list dropdown

I have a dropdown in menu. But it drops not the way I need. enter image description here
but I need it to be aligned as a menu item. like in here:
enter image description here

could it be done simply with css?
html

<li class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Account<b class="caret" style="float: right;"></b></a>
    <ul class="dropdown-menu">
        <li><a href="{% url 'account' %}">Account Info</a></li>
        <li><a href="{% url 'dev_billing' %}">Billing Settings</a></li>
        <li><a href="{% url 'dev_logout' %}" >Sign out</a></li>
    </ul>
</li>

css: 

.dropdown-menu {
    background-color: black;
    min-width: 100px;
    width: 160px;
}
.dropdown-menu > li {
    align: center;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    color: #cfeffd;
    background-color: #333333;
    background-image: none;
    filter: none;
}

.dropdown-toggle {
    min-width: 100px;
    width: 125px;
}

.caret {
    marging-left: 30px;
}

Upvotes: 0

Views: 88

Answers (2)

Jose Manosalvas
Jose Manosalvas

Reputation: 181

You can make it by setting position:relative to ".dropdown" and position: absolute to ".dropdown-menu" and his width to 100%.

li {
  padding: 10px 20px;
}

.dropdown {
    position: relative;
    display: block;
    background-color: #ff0;
    width: 120px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: gray;
}

Here is a working example :

http://jsfiddle.net/5CB4Q/3/

Upvotes: 1

MusicLovingIndianGirl
MusicLovingIndianGirl

Reputation: 5947

Assign the DropDownList a CssClass like DDLStyle.

select.DDLStyle{text-align:middle;}

This works in most modern browsers, but not in IE.

Upvotes: 0

Related Questions