Horizontal menu with CSS

Hi,

I want to create a horizontal menu using UL with CSS styling.

The user wants it this way:

Home Policies & Investment People Events Internal
Procedures Funds Team Templates

Is it possible to achieve this ?

I appreciate your response. I am a programmer but very new to this web design stuff.

Thanks,
Palyam

 

each menu is like this. But should show horizontally but Policies & should be
on one line and Procedures below it (next line)

Home


Policies &
Procedures


Investement
Funds

People
Team

Internal
Apps

 

apply float:left to the ul li - give everything a margin:0; and padding:0; then give the ul li a some padding

 

Hi,

Thank you very much. I tried but I am not getting as I wanted.
I dont' know how to do a file attachment for reply. Otherwise, I can attach
it, so that you can take a look at it. OK. I will start a new thread again
with attachement. Please take a look at it. I appreciate your response.
Tne new subject of thread will be: Horizontal menu with attachment.

THanks,
palyam.

 

How about putting each one on div ? ul li div /li li div /li... i dont know if thats possible though

 

No point in that. It's just HTML which don't have to be there.

Show us your test page. Unzipping attachments is not something I prefer to spend time on.

 

This should work:

/********** NAVIGATION HTML *************/
<div id="nav">
<ul>
   <li><a href="http://www.xxx.com/1">Menu Item 1</a></li>
   <li><a href="http://www.xxx.com/2">Menu Item 2</a></li>
   <li><a href="http://www.xxx.com/3">Menu Item 3</a></li>
</ul>
</div>


/********** NAVIGATION CSS *************/
#nav {
   background:#222;
   height:30px;
   padding-top:10px;
}
#nav ul{
   padding : 0px;
   margin : 0px;
   white-space : nowrap;
   font-size:13px;
} 
#nav ul li{
   display : inline;
} 
#nav ul li a{
   color : #fff;
   font-weight:bold;
   text-decoration : none;
   padding-left: 1px;
   padding-right: 1px;
   padding : 10px;

}
#nav ul li a:hover{
   color : #eee;
   text-decoration : none;
   font-weight:bold;
   padding-left : 1px;
   padding-right : 1px;
   padding-bottom: 14px;
   padding-left: 9px;
   padding-right: 9px;
   padding-top: 10px;
   border-left-style:solid; 
   border-left-width:1px; 
   border-left-color:#666666; 
   border-right-style:solid; 
   border-right-width:1px; 
   border-right-color:#666666;
   background:#333333;
}

Code (markup):