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="http://www.teddypwns.com/">HOME</a></li>
<li class="hovertarget"><a href="http://www.teddypwns.com/contact-us/">CONTACT US</a></li>
<li class="hovertarget"><a href="http://www.teddypwns.com/login.php">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?

@johny_mplayer:
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.

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

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

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 :)

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.