The Amazing LI: Using CSS and Unordered List Items to Do Just About Anything
March 19th, 2008 in Design Tips & Tutorials
by: Matthew Griffin
I can still remember the day I discovered the <li> tag. It's not that I had never used list items before—I had built plenty of bulleted lists. What I discovered that day was that with a little CSS, the <li> becomes one of the most powerful and versatile tags in a web designer's arsenal. So versatile is the list item, in fact, that you could build and entire website layout out of just <ul> <li> tag pairs. Of course, that wouldn't be semantically correct, but you could do it. This article is a tutorial and a tribute to the amazing <li>.
Using <li>s for Horizontal Navigation
You can use unordered list items to present horizontal navigation buttons and other horizontal lists. When I first moved from table-based layouts to CSS, this was a big shocker for me. It opens up a world of possibilities and it makes your code oh-so-beautiful and easy to read. Not only that, it's semantically correct. The li tag is meant to denote "list items", and that's exactly what a set of navigations buttons is—a list of links. Here's an example of a five-button horizontal nav bar made completely of list items.
<!-- The CSS -->
ul{
margin: 0 auto;
padding: 0;
}
ul.horizontal_list li{
text-align: left;
float: left;
list-style: none;
padding: 3px 10px 3px 10px;
margin: 5px;
border: 1px solid #CCC;
}
<!-- The HTML -->
<ul class="horizontal_list">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>News</li>
<li>Mission</li>
</ul>
This is how it should look:
So now we have a decent-looking horizontal nav with just a few lines of HTML and CSS and we didn't use a single image. That's not to say that images are bad, but if you can cut the download size of a page by getting creative with your CSS, why not?
Multi-column Lists with <li>
Building lists that wrap into multiple columns is quick and easy with <li>. When data is actually tabular (requiring column header, columns, and rows), you should use a <table>. But when you're just looking to spice up the look of a list and make it a little easier to read, you should use this method. Just like any other set of <li>s, multi-column lists make for simple HTML code and easy rearranging of list items. Here's how it works.
<!-- Here's the HTML -->
<div id="list_wrapper">
<ul class="multiple_columns">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
</div>
<!-- Here's the CSS -->
ul{
margin: 0 auto;
padding: 0;
}
/* The wider the #list_wrapper is, the more columns will fit in it */
#list_wrapper{
width: 200px
}
/* The wider this li is, the fewer columns there will be */
ul.multiple_columns li{
text-align: left;
float: left;
list-style: none;
height: 30px;
width: 50px;
}
This is how it should look:
The list items just stack against each other horizontally until they fill the width of the containing wrapper. In this case we have a wrapper that is 200px wide and each list item is set to 50px wide. Since 50 goes into 200 four times, that means we'll have four list items in each row.
Cool <li> Background Effects
Want lists with cool bullets instead of the boring default black dot? CSS makes this possible with some simple adjustments to the background properties of your <li>. For this example, we'll borrow our code from the first example and build on it.
<!-- Here's the HTML -->
<ul class="cool_background">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>News</li>
<li>Mission</li>
</ul>
<!-- Here's the CSS -->
ul{
margin: 0 auto;
}
ul.cool_background li{
text-align: left;
float: left;
list-style: none;
padding: 3px 10px 3px 25px;
margin: 5px;
background: url(cool_background.gif) 5px 5px no-repeat;
}
IMPORTANT: Don't forget to make your "cool_background.gif" file and put it into the same directory as your page.
This is what it should look like:
Animating Your <li>s with a Rollover Effect
A combination of <li> and <a> tags, and a little CSS can make for a good-looking rollover effect. Using CSS to produce your rollovers is quicker and easier than JavaScript and it also makes it easier change in the future. All you have to do is add a link tag to each nav item and use the pseudo class ":hover" to cause a background change when a mouse moves over the link. Below is a basic example:
<!-- Here's the HTML -->
<ul class="rollover">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Mission</a></li>
</ul>
<!-- Here's the CSS -->
ul{
margin: 0 auto;
}
ul.rollover li{
text-align: left;
float: left;
list-style: none;
}
ul.rollover a{
display: block;
text-decoration: none;
background: url(cool_background.gif) 5px 5px no-repeat;
padding: 3px 10px 3px 25px;
margin: 5px;
}
ul.rollover a:hover{
background-image: url(cool_background2.gif);
text-decoration: none;
}
IMPORTANT: Don't forget to make your cool background images and put it into the same directory as your page. This is what it should look like:
The downside to this method is an inherent flicker in the rollover the first time the mouse is moved over each link. This is because the rollover image isn't actually downloaded until the hover action is activated. No worries, though, the issue can easily be fixed by using one image and hiding or revealing a portion of it when the mouse rolls over and rolls out. Read the article CSS Lite: A CSS Rollover Everyone Can Enjoy for more information. You'll also learn how to completely replace your link text with an image for slicker-looking nav buttons.
Conclusion
I'm sure this tutorial will be helpful for the CSS newbie. It's a great place to start. Once you've read and understand this articles, you'll be ready to move on to some of the more advance CSS methods presented on Mirificam Press. Check out these articles if you're looking for more.
Rollover Lite: A CSS Rollover Everyone Can Enjoy
Two Column CSS Layout: The Absolute Basics
Indestructible Website: How to Build an EM Based Layout that Won't Break
Creating CSS Flair Elements for Clarity and Style
Beautiful CSS: Organizing Your Stylesheets
UPDATED 11/2/2009
- 144 Comments
- 269909 Views
Comments
Posted By: Mark Provan on 03/19/08
Thanks man! V. Useful Digged
Posted By: igh cha on 03/19/08
"Say goodbye to <tr> because you'll probably never need it again. " Unless of course, you need to markup a data table... "you could build and entire website layout out of just <ul> <li> tag pair" Same goes for p, cite, abbr, del ... etc - a huge number of other elements
Posted By: on 03/19/08
Great post, Matt. I only discovered this functionality of the LI tag when I started using the Yahoo! UI Library. Your write-up is much more succinct and noob-friendly, though. I wish I had seen an article like this a couple of years ago! p.s. - the image of you still has your head split in half horizontally (I am running Firefox v. 2.0.0.12 on Windows XP Pro, SP 2).
Posted By: Roshan Shrestha on 03/19/08
Multi-columns list is fine, however, It doesn't adjust the width automatically when the browser windows are resized. Tables still are the way to go to represent "tabular" data.
Posted By: John Sutherland on 03/19/08
There's nothing new here, but it's always good to have this sort of thing written down. @Roshan If you were to specify the widths of the <li>s you could make them resize WRT the width of the parent element (which in turn could be the browser width). I'd suggest it was also generally accepted that tables are *only* for tabular data.
Posted By: Pixel Head on 03/19/08
Sweet, I'll have to change the boring arrow graphic. Hmm...Have to come up with a little pointing hand graphic for a bullet.
Posted By: on 03/19/08
Great comments, everyone. Thanks.
Posted By: Stefan Hayden on 03/19/08
How is it that an OL can only be shown in descending order? I would love to have an OL count down from a number I choose.
Posted By: Fire-pixel.com on 03/19/08
What are everyone's suggestions on good online tutorials? Like the best of the best? Here's another article y'all might like. Top 10 Awesome Websites That Sell Cool Products You Probably Have Never Visited But Need To. http://www.comember.net/blogs/firepixel/ Take it easy
Posted By: on 03/19/08
I like to use pixelgroovy.com. Just check out the tutorials that have a lot of votes.
Posted By: Luke Hutscal on 03/19/08
@Stefan: unfortunately, it looks like there isn't a *nice* way to do it using only CSS or HTML - a quick google for "ol count backwards" seems to only return that you might want to try out some custom javascript.
Posted By: Steven Snell on 03/19/08
Matt, I second PixelGroovy. It's a pretty good resource.
Posted By: Jermayn Parker on 03/20/08
One thing I hate more than table based design websites is the improper useage of lists. People using (ordered and unordered) lists for tabular data and for form structure.
Posted By: synistar on 03/20/08
Using the LI element for column layout is a semantic misuse of the element. The exact same behaviour can be achived using DIVs and the display:inline property (plus a little margin for breathing room). What you are advocating is just as misguided as using tables for layout.
Posted By: Wes P on 03/20/08
Hey Matt! Great post. Lists are awesome and have taken my navigation by storm since I discovered their usefulness. One thing that might be useful here, though, is a demo page showing this code in action, or at the very least inline examples, rather than images. Thanks for your hard work!
Posted By: on 03/20/08
Thanks for the suggestion, Wes. I will consider it on my next post. It's really just an issue of taking the time to do it.
Posted By: NewSunSEO on 03/20/08
Hello again Matthew, This article is very good for CSS beginners. There are plenty of people who are still trying to learn tableless xhtml and css and this is a good start to understanding some easy ways to make it work and valid.
Posted By: erica on 03/20/08
Wonderful article Matt. A big plus to using this in navigation is the accessibility issue. Using a list for navigation is much better for extended accessibility. I happen to disagree with synistar because of that as well. The <div> would be less accessible than a list would if style sheets were disabled or a screen reader read them.
Posted By: on 03/20/08
Thanks, NewSunSEO and erica. Also, very good point erica. Using list items where they are appropriate makes your site more accessible and more search engine friendly.
Posted By: Dennison Uy - Graphic Designer on 03/20/08
The issue with multi-column lists is the ordering goes first from left to right then from top to bottom. Normal lists go from top to bottom first and then left to right.
Posted By: on 03/20/08
Any words on Ordered lists? Especially a way to start them at a number besides "1"?
Posted By: Bobby Jack on 03/21/08
@Phil: You could use counters (see the link under my name) as in: #years { counter-reset: years 1969; list-style: none; } #years li:before { content: counter(years) " "; } #years li { counter-increment: years; } <ol id="years"> <li>one</li> <li>two</li> <li>three</li> </ol> but they don't seem to be supported in IE (7) and there's no counter-decrement.
Posted By: Chetan S on 03/21/08
Can I use this link as an educational reference?
Posted By: Stever on 03/21/08
yup, lists are rad. The multi-column list thingy is new to me. ty
Posted By: Matthew Griffin on 03/21/08
Absolutely, Chetan S.
Posted By: Golem Estonsko on 03/21/08
oh, very good post aboit lists. thank you.
Posted By: maher on 03/23/08
This is a great article for beginners, definately a good read
Posted By: Xiong Chiamiov on 03/25/08
One note with the image rollovers. Overall, usually it's better to simply change the background color, border, etc., as you can eliminate more images that aren't really necessary. If you do stay with images, however, I feel that it's always a good idea to preload the alternate image; ever rollover something, then it changes only after a delay?
Posted By: on 03/25/08
I agree, Xiong. There are some good tutorials out there for preloading as well.
Posted By: Vinyl Shutters on 03/27/08
This was an interesting article - I had no idea you could use the li this way. Thanks for the great read.
Posted By: Rick on 04/14/08
This is neat, but say you have a dynamic horiz nav with n elements. You want them to spread out even across a width of x pixels. Anyone encounter this problem before?
Posted By: on 04/14/08
Yeah, easiest way to do this is to set a right or left margin value on the li. Just adjust that value until they are spread evenly.
Posted By: Badang on 04/22/08
Nice guide Matt. I am always nervous whenever I see or hear the word "CSS" because I have yet to grasp its' real concept. At the same time I am witnessing its' power being showcased day after day leaving me no choice other than to embrace it.
Posted By: Milan Barać on 04/22/08
Just a note: HOVER effect works for lists only in normal browsers, which do not include Internet Explorer 6!!! IE6 supports hover ONLY for links.
Posted By: bilgisayar on 06/15/08
css table properties and examples... -- http://css-lessons.ucoz.com/table-examples-1.htm -- and -- http://css-lessons.ucoz.com/table-examples-2.htm
Posted By: annddrew on 06/21/08
I would like to use li in a horizontal menu but I would like the background color of the clicked menu item to stay fixed as long as the user hasn't clicked on another menu item. Would you please show me how to achieve that ? Thanks
Posted By: Bursa in�aat on 06/23/08
Great tip for css beginners. thanks
Posted By: on 06/23/08
Andrew, If I understand you correctly, you want the link of the page that the visitor is on to stay highlighted. To do this, you will need to assign a unique id to each navigational button and then embed some CSS at the top of each page that keeps the rollover highlighted on just that page. Hope that helps.
Posted By: wison on 10/30/08
Thanks.That's what i need.
Posted By: darbez on 11/03/08
good tutorials
Posted By: mobify on 11/07/08
I really like your article, it is simple, clear and consise; and also your background image and layout is nice.
Posted By: Matthew Grffin on 11/07/08
Thanks, everyone.
Posted By: Gazikent on 11/11/08
Thanks for the suggestion, Wes. I will consider it on my next post. It's really just an issue of taking the time to do it.
Posted By: on 12/11/08
The example "Multi-column Lists with <li>" doesn´t work in IE7. Thanks!
Posted By: Jeganathan on 12/30/08
Thanks a lot... :)
Posted By: Teknoloji on 01/11/09
Thanks, everyone.
Posted By: Exterior Shutters on 02/01/09
Thanks, I will be able to use this!
Posted By: yerel seçimler on 02/03/09
Thanks a lot... :)
Posted By: tianzhe on 03/06/09
feel well after learn this
Posted By: on 03/16/09
this article might help me to design my own li link..thank for helping newbie like me
Posted By: Clubturk.net-2. Seo Yarı�mas&A on 03/18/09
Thanks, I will be able to use this!
Posted By: Anon on 04/09/09
Just remember that there is still a place for tables. It is semantically incorrect to not use tables for tabular data, such as your second example.
Posted By: �erife on 04/10/09
thanks for css codes
Posted By: Blog, Haber, Ä°nternet, Siyaset on 04/14/09
feel well after learn this
Posted By: NodakNetwork on 04/22/09
Well put together, better than a few others I've read recently.
Posted By: Clubturk.net-2. Seo Yarı�mas&A on 04/27/09
thank for helping newbie like me
Posted By: Honey Singh on 05/07/09
Very basic idea and can be implement and optimized into very advance styles. Very simple and easy tutorial to get the things done. Sweet thanks for the share. :P
Posted By: mu�la on 05/18/09
Very very nice and clean
Posted By: Bethy on 05/26/09
Thanks, your entry is very helpful. I used for <ul> though. I was having difficulties understanding how to use it. @_@
Posted By: bizdevariz on 05/29/09
Thanks, I will be able to use this!
Posted By: shutters on 05/29/09
thanks for the tips
Posted By: Josh on 06/01/09
This was exactly what I was looking for. Thanks.
Posted By: ICIP on 06/05/09
Very useful insights.
Posted By: on 06/12/09
Thanks.good tutorials. this is what i really need
Posted By: craps play book on 06/13/09
I�m having a horrific problem with triple-layered (nested) Ordered Lists. Is there any kind of tool you can use to assist in executing these complex lists? I�ve tried Home Site and using the �Select All� option, but it still my page didn�t validate in Firefox. Any suggestions or any tools that one has used would be really helpful. Thanks.
Posted By: Matthew Griffin on 06/15/09
Sorry, I don't know of any that are specifically for nested lists. You're just going to have to organize it well so that you can tell when there is a discrepancy between an opening and a closing tag.
Posted By: John on 06/17/09
Exactly what I needed to start of, thanks! How would I get the order to go straight down on the first column then continue over on the second column? I'm creating a page that would display test questions (images). I want to get about 6-8 questions on each page, with a dividing border in the middle. Any pointers are highly appreciated.
Posted By: Matthew Griffin on 06/18/09
There's no easy way to do this right now. It looks like CSS3 may have some solutions but that's about it. You will just have to separate the lists out into separate lists.
Posted By: Webhostright on 07/04/09
Thanks it's good basic info and explained well, a good bit of CSS starter information.
Posted By: Mark on 07/15/09
Awesome guide, thanks, busy trying to implement it into my wordpress templates while calling child pages, just so that they look alot neater. Thanks again.
Posted By: Adi on 07/21/09
This was great tutorial, especially for beginner like me. This give me clear idea how to develop new menu style for my company website. Thanks a lot for guide.
Posted By: MoneyPa on 08/12/09
Know more deep about the LI tag. Thanks for sharing
Posted By: lida fx15 biber hapı ikibindokuz seo on 09/01/09
Well put together, better than a few others I've read recently.
Posted By: Smithfield Real Estate on 10/01/09
Excellent! I am just getting into the web design, and this is going to help a bunch. Thanks for the incredible resource. Lists ftw! :)
Posted By: aydemir akba� on 10/18/09
thanks
Posted By: Karadeniz on 11/01/09
Awesome guide, thanks, busy trying to implement it into my wordpress templates while calling child pages, just so that they look alot neater. Thanks again.
Posted By: yeliz on 11/12/09
How would I get the order to go straight down on the first column then continue over on the second column? I'm creating a page that would display test questions
Posted By: Matthew Griffin on 11/12/09
Yeliz, the only way right now is to create to completely separate lists and float one to the right and one to the left. Maybe CSS3 will make it easier on us.
Posted By: Ben D on 11/17/09
It's worth noting that you could do all the same things using any tags inside the body... One could build an entire page out of only <a> and <b> tags if one was willing to write an ugly css library and have unreadable markup-structure. When using any given tag it's important that you think about what kind of data you're supposed to be representing within that tag, so that the data is structured logically. LIs are perfect for menus and other groups of items that conceptually are lists-type data, but (as others have mentioned) there are places for tables, and almost any other tag.
Posted By: Webdesign on 01/23/10
Nice little informaion :)