Member Avatar for mdminternet

Hey guys,

I've spend the best part of two hours trying to work this out and have looked at various css resources online before giving up and posting here. I'm sure the answer is quite obvious.

Below is the css I have for a simple drop down menu, nothing fancy but it does its job.

.menu ul { width: 486.75px; height: 50px; font-size: 1em; font-weight: bold; list-style: none; margin: 0px; padding: 0px; float: left; }
.menu li { width: 162.25px; float: left; padding: 0px; font-weight: bold; }
.menu li a { color: #ffffff; font-weight: bold; display: block; line-height: 50px; margin: 0px; padding: 0px; text-align: left; text-decoration: none; }
.menu li a:hover, .menu ul li:hover a { background: #f1f1f1; color: #0054a6; font-weight: bold; text-decoration: none; }
.menu li ul { background: #f1f1f1; color: #0054a6; display: none; height: auto; padding: 0px; margin: 0px; border: 0px; width: auto; position: absolute; z-index: 200; /*top:1em; /*left: 0;*/ }
.menu li:hover ul { display: block; color: #0054a6; font-weight: normal; }
.menu li li { color: #0054a6; font-weight: bold; display: block; float: none; margin: 0px; padding: 0px; width: auto; }
.menu li:hover li a { background-color: #f1f1f1; color: #0054a6; font-weight: bold; }
.menu li ul a { display: block; height: 50px; font-size: 0.85em; color: #0054a6; margin: 0px; padding: 0px 15px 0px 15px; text-align: left; }
.menu li ul a:hover, .menu li ul li:hover a { background-color: #ffffff; border: 0px; color: #0054a6; font-weight: bold; text-decoration: none; }
.menu p { clear: left; }

And here is the html for the menu...

<div class="menu">
<ul>
<li><a href="http://www.test.net" target="_self" >About</a><ul><li><a href="http://www.test.net/" target="_self" >Find out about us and our company...</a></li></ul></li>
<li><a href="http://www.test.net" target="_self" >Services</a><ul><li><a href="http://www.test.net/" target="_self" >Find out what we can do for you...</a></li></ul></li>
<li><a href="http://www.test.net" target="_self" >Prices</a><ul><li><a href="http://www.test.net/" target="_self" >Check out our great value prices...</a></li></ul></li>
</ul>
</div>

As you can see, at the moment the dropdown contains a small description which aligns with the left side of the main element. What I would like to know is how would I go about having it align with the right side instead (not the text in the dropdown but the dropdown itself)?

Thanks in advance.

  • 4 Contributors
  • 3 Replies
  • 232 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Short answer: make the submenu position itself from the right edge of a positioned ancestor instead of using the default left offset. A reliable, minimal approach is to create a positioning context on the ancestor you want the submenu to align to and then pin the submenu with right: 0; left: auto;. This keeps the dropdown box itself flush to the right instead of aligning its left edge.

.menu li { position: relative; }          /* each top-level li becomes the positioning context */
.menu li ul { right: 0; left: auto; top: 100%; }  /* submenu's right edge aligns to the li's right edge */

If the intent is to line the submenu up with the right side of the entire .menu container (not each li), make .menu the positioned ancestor instead and target the submenu selector accordingly:

.menu { position: relative; }
.menu ul > li > ul { right: 0; left: auto; top: 100%; }

Notes and troubleshooting:

  • Floats do not create positioning contexts. The submenu’s absolute positioning will use the nearest ancestor with position other than static. That explains why adding position: relative to the correct element is essential.
  • If the submenu is wider than its parent, set a min-width or explicit width so the visual alignment is predictable. Watch z-index and any overflow: hidden on ancestors which can clip the dropdown.
  • ’s .menu { float: right; } moves the whole menu to the right of its container (different effect). ’s request for an image is still useful for diagnosing edge cases. The posted HTML looks mangled (nested anchors); ensure each <li> has a single <a> and optionally a nested <ul>.
  • For keyboard accessibility, consider :focus-within or a small JS toggle to open submenus for keyboard users and older browsers.

Recommended Answers

All 3 Replies

Member Avatar for Member #949455

I've spend the best part of two hours trying to work this out and have looked at various css resources online before giving up and posting here. I'm sure the answer is quite obvious.

It would be nice if you have an image on how it looks.

Member Avatar for simplypixie 
.menu {
float: right;
}
Member Avatar for JorgeM

If you still need help, a better indication of how you want the layout to look like would be helpful. LastMitch's suggestion regarding an image would work fine.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.