Member Avatar for aizel 
<div id="navmenu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Services</a></li>
        </ul>
    </div>

output that i want:
i want it to start at the right so here is the sample output:
<----HOME ABOUT US SERVICES

so if i add contact from the list it should be:
<----HOME ABOUT US SERVICES CONTACT

but this is the result when i float navmenu to right:
<----CONTACT SERVICES ABOUT US HOME

  • 2 Contributors
  • 3 Replies
  • 76 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Kraai

Dani AI

Generated

sorted the immediate problem with a float-based fix and suggested reversing the HTML order. Both will change the visual result, but reversing source order can break keyboard/tab order and screen-reader semantics. A simpler, more robust approach is to keep the logical DOM order (Home, About, Services, Contact) and align the group to the right with layout CSS.

A recommended modern method is Flexbox: make the UL a flex container and push items to the end so visual order matches source order and keyboard focus follows the same sequence.

#navmenu ul {
  display: flex;
  justify-content: flex-end; /* aligns list to the right while preserving DOM order */
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#navmenu a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
}

For older-IE compatibility, use a text-align technique instead of reversing HTML: set the nav container to text-align: right and make li elements display: inline-block. Always reset ul margins/padding and list-style to avoid unexpected offset. Flexbox details and browser notes are documented at the MDN Flexbox guide: Basic Concepts of Flexbox.

Recommended Answers

All 3 Replies

Member Avatar for Kraai

Hi aizel

Float it to the left, I think.

Member Avatar for aizel

i just solve it

#navmenu {
	width:800px;
	float:right;
	height:30px;
}

#navmenu ul {
	line-height:30px;
	float:right;
	position:relative;
	list-style:none;
	padding: 0px 20px 0px 0px;
}

#navmenu ul li {
	display:inline;
}

#navmenu ul li a {
	text-decoration:none;
	float:left;
	color:#FFF;
	font-size:12px;
	width:100px;
	text-align:center;
  	margin: 0px 0px 0px 3px;
  	padding: 0px 0px 0px 6px;
	background:#999999;
}

btw: thanks krai for your reply

Member Avatar for Kraai

Hi aizel

I wasn't reading properly the first time, and see now you actually want the menu to display on the right of the page. I am glad you solved it, as I was just thinking, another easy way would be to reverse the order in the div id="navmenu like so:

<div id="navmenu">
        <ul>
            <li><a href="#">Services</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Home</a></li>
        </ul>
    </div>

And then just ad the new items on top everytime.

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.