DontVoteMeDown DontVoteMeDown - 19 days ago 6
CSS Question

Changing default alignment of a dropdown menu list

I did a simple CSS-only dropdown menu like the snippet below:



.menu-container {
width: 60px;
float: right;
border: 1px solid #999
}

.menu-container .menu {
display: none;
list-style: none;
position: absolute;
min-width: 80px;
margin: 0;
padding: 0
}

.menu-container:hover .menu,
.menu-container .menu:hover {
display: block
}

.menu-container .menu li {
border: 1px solid #999;
text-align: right
}

<div class="menu-container">
Go to...
<ul class="menu">
<li>
<a href="#">Item #1</a>
</li>
<li>
<a href="#">Item #2</a>
</li>
<li>
<a href="#">Item #3</a>
</li>
</ul>
</div>





It will be right aligned close to the right edge of the page. I want to align the list items to the right of the list title "Go to...", like the image below:

enter image description here

It should grow with the list item's text length to the left. This will avoid the horizontal scroll, but I can't figure out how I achieve it. Note that the menu html structure can be change if needed with no problems.

Any help will be appreciate.

Answer

Give right property to .menu element.

Like:

.menu {
  right: 8px;
}

.menu-container {
  width: 60px;
  float: right;
  border: 1px solid #999
}

.menu-container .menu {
  display: none;
  list-style: none;
  position: absolute;
  min-width: 80px;
  margin: 0;
  padding: 0;
  right: 8px;
}

.menu-container:hover .menu,
.menu-container .menu:hover {
  display: block
}

.menu-container .menu li {
  border: 1px solid #999;
  text-align: right
}
<div class="menu-container">
  Go to...
  <ul class="menu">
    <li>
      <a href="#">Item #1</a>
    </li>
    <li>
      <a href="#">Item #2</a>
    </li>
    <li>
      <a href="#">Item #3</a>
    </li>
  </ul>
</div>

Hope this helps!

Comments