CODEWITHSUNDEEP
css
user2610699
user2610699

Reputation: 39

CSS menubar ul li

Hi guys i'm trying to learn css ul and li menu bar. i'm trying to create this design http://s13.postimg.org/5bz1a4kw7/divider.jpg having the spaces and the divider per each menu bar, i can't seem to get the spacing, i tried adjusting it, but i can't get a grip on how to have this spacing per menu bar (li). Can you please get me to the right direction? Thanks

here's what i've done so far http://jsfiddle.net/blackknights/Wbfjg/

<ul id="mcolor">
    <li><a href="default.asp"><font color="#000000"> Home </a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
</ul>

Upvotes: 1

Views: 890

Answers (2)

Samarth Agarwal
Samarth Agarwal

Reputation: 2134

Try this Fiddle. Basically, make use of padding-left and padding-right and min-width for li elements.

Upvotes: 0

Nitesh
Nitesh

Reputation: 484

I have updated your code.

li a{
   display:block;
   padding:5px 10px;
   background:#ccc;
   border-right:1px solid #fff;
}
li a.last{
   border-right:none; 
}

Check the jsfiddle

Upvotes: 4

Related Questions