Member Avatar for teddypwns

I am trying to make a menubar for my website using CSS and HTML, but the buttons appear in reverse order. Here is some of the source:

HTML:

<div class="hovermenu">
<ul>
<li class="hovertarget"><a href="">HOME</a></li>
<li class="hovertarget"><a href="">CONTACT US</a></li>
<li class="hovertarget"><a href="">MEMBER LOGIN</a></li>
</ul>
</div>

CSS:

.hovertarget a {
font:13px verdana;
color:#000000;
padding:10px 0.5em;
text-decoration:none;
float:right;
background-color:#CC3300;
}

.hovertarget a:hover {
background-color:#CC6600;
}

.hovermenu ul li {
list-style:none;
display:inline;
}

How do I make the menubar stay to the right of the page, but have the items in the correct order?

  • 4 Contributors
  • 6 Replies
  • 206 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by teddypwns

Dani AI

Generated

Good call by and good points from — the surprising result came from how floats are placed, not a bug in HTML. When each link is individually floated to the right, the browser takes each floated element out of the normal flow and packs them against the right edge in source order, which visually produces a right‑to‑left stack (so later items end up to the left of earlier ones). Reversing the HTML (as suggested) is a valid workaround, but it mixes content order with presentation. Moving the positioning off individual links keeps the DOM order intact.

A couple practical options that preserve source order:

  • Use a layout method that aligns the whole group (float the group, or better, use flexbox) so child items render in document order.
  • If you keep floats, float the list items consistently (not the anchors) and clear the container so its height doesn’t collapse. Also watch that display:inline on the lis changes how their boxes interact with floated children.

Modern, robust approach (keeps HTML unchanged, preserves order):

/* keep your UL > LI > A markup */
.hovermenu ul {
  display: flex;
  justify-content: flex-end; /* aligns the group to the right while keeping item order */
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

Troubleshooting tips and gotchas: inspect computed styles in DevTools (watch which element is floated), temporarily add borders/backgrounds to see box positions, and use a clearfix on the container if floats are used:

.hovermenu::after {
  content: "";
  display: table;
  clear: both;
}

Also check your HTML markup — anchors must be written as <a href="http://example.com">Label</a> (no nested tags inside the href). For long‑term maintenance, prefer semantic markup (a <nav>), keep layout in CSS, and consider flexbox for responsive menus.

Recommended Answers

All 6 Replies

Member Avatar for johny_mplayer

one way you can do it is to write them in DESC order too.
Such as:
<li class="hovertarget"><a href="">MEMBER LOGIN</a></li>
<li class="hovertarget"><a href="">CONTACT US</a></li>
<li class="hovertarget"><a href="">HOME</a></li>

Member Avatar for teddypwns

:
Thanks for the suggestion. I have already thought of that, though. I do not want to write the HTML to fit the CSS, I want the CSS to fit the HTML. This is to keep it more separate, so if I edit the HTML I will not have to remember to reverse the list of items. The HTML should stand by itself.

Member Avatar for pwinfrey

Remove "float:right" from ".hovertarget a" and add it to ".hovermenu". Omit "display:inline" from ".hovermenu ul li" and replace it with "float:left".

.hovermenu{
float:right;
}

.hovertarget a{
font:13px verdana;
color:#000000;
padding:10px 0.5em;
text-decoration:none;
background-color:#CC3300;
}

.hovertarget a:hover {
background-color:#CC6600;
}

.hovermenu ul li {
list-style:none;
float:left;
}
commented: Good solution and example :) +1
Member Avatar for teddypwns

Thanks pwinfrey, it worked. Why did my own CSS not work and the new one did?

Member Avatar for Lusiphur

From what I'm seeing it was a matter of how the float properties were (or weren't) defined as these determine the relative position of the component to it's neighbors.

Please also remember to mark threads solved once the issue is resolved :)

Member Avatar for teddypwns

Thanks for answering Lusiphur.

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.