CODEWITHSUNDEEP
htmlcss
bɪˈɡɪnə
bɪˈɡɪnə

Reputation: 1085

How to float list items to left in a dropdown menu?

Below is a css clickable drop down menu. Here I want to float the list elements to left, not the whole dropdown menu just the list items that I get on clicking drop down.

.onclick-menu {
  float:right;
    position: relative;
    display: inline-block;
}
.onclick-menu-content {
  margin:0;
  padding:0;
  list-style:none;
   position: absolute;
    z-index: 1;
    background-color: #f9f9f9;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s;
}
.onclick-menu:focus {
    pointer-events: none;
}
.onclick-menu:focus .onclick-menu-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.onclick-menu-content {
    position: absolute;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s;
}
<div tabindex="0" class="onclick-menu">dropdown
    <ul class="onclick-menu-content">
        <li>down1</li>
        <li>This one is just a long</li>
        <li>down3</li>
    </ul>
</div>

Upvotes: 1

Views: 1809

Answers (2)

Reinder Wit
Reinder Wit

Reputation: 6615

add some CSS to clear the default list styling:

.onclick-menu-content {
  ...
  margin:0;
  padding:0;
  list-style:none;
}

fiddle sample

To have everything aligned to the right side of the page, add an extra 

right:0;

to the CSS. Check this second fiddle

Upvotes: 2

Srikanth Koneru
Srikanth Koneru

Reputation: 264

.onclick-menu-content li{display:inline-block; float:left;}

Upvotes: 1

Related Questions