How to create simple ul li menu?

Hello,

I have simple <a href links in a div like this:

<div>
<a href=“somelink1.html”>Link 1</a> |
<a href=“somelink2.html”>Link 2</a> |
<a href=“somelink3.html”>Link 3</a>
</div>

How to make it using <ul> and <li> so that | comes automatically using css ?

Thanks.

Hi, you mean something like this?


#navcontainer
	{
		margin-left: 30px;
		margin-bottom: 1em;
		overflow: hidden;
		width: 460px;
		
	}
	
	#navlist
	{
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	
	#navlist li
	{
		border-left: 1px solid #000;
		float: left;
		line-height: 1.1em;
		margin: 0 .5em 0 -.5em;
		padding: 0 .5em 0 .5em;
	}


<div id="navcontainer">
	<ul id="navlist">
		<li id="active"><a href="#" id="current">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
		<li><a href="#">Item four</a></li>
		<li><a href="#">Item five</a></li>
	</ul>
</div>

Hi,

Perfect! Thanks, after some alteration i got it what i wanted.

Thanks.

No prob. Glad it worked :slight_smile: