UL table-style menu

A menu is basically a list of links, so it's probably best to mark it up as such. That doesn't mean you can't make it look like a table too though.

This line : * html #ul-table li a {width: 100%;} is important as it makes the background of the whole cell change colour on hover in IE.

OK... So that's what I came up with. Now have a look at Listamatic - there are links to tons of different kinds of styled lists there.

CSS
#ul-table li a {
background-color:#F4F7FA;
font: 12px Arial, sans-serif;
display:block;
line-height:40px;
}
#ul-table a:link, #ul-table a:visited, #ul-table a:active {
color: #255FDC; text-decoration: none;
}
#ul-table a:hover {
background-color:#CCD9E9;
color:navy;
text-decoration: none;
}
#ul-table {
width:562px;
text-align:center;
margin: 0px auto;
padding:0;
color: navy;
list-style-type:none;
clear:both;
}
#ul-table li {
width: 139px;
float:left;
border:1px solid navy;
border-right:none;
text-align: center;
}
* html #ul-table li a {
width: 100%;
}
#ul-table li.top {
border-bottom:none;
}
#ul-table li.right {
border-right:1px solid navy;
}
.clear {
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}
HTML
<h1>UL table-style menu</h1>
<ul id="ul-table">
<li class="top"><a href="">first link</a></li>
<li class="top"><a href="">second link</a></li>
<li class="top"><a href="">third link</a></li>
<li class="top right"><a href="">fourth link</a></li>
<li><a href="">fifth link</a></li>
<li><a href="">sixth link</a></li>
<li><a href="">seventh link</a></li>
<li class="right"><a href="">eighth link</a></li>
</ul>
<div class="clear"></div>
<p>A menu is basically a list of links, so it's probably best to mark it up as such.
That doesn't mean you can't make it look like a table too though.</p>
<p>This line :
<code class="centre">* html #ul-table li a {width: 100%;} </code> is important as it makes the background of the whole
cell change colour on hover in IE.</p>
<p>OK... So that's what I came up with. Now have a look at <a href="http://css.maxdesign.com.au/listamatic/index.htm">
Listamatic</a> - there are links to tons of different kinds of styled lists there.</p>

Comments

#1
2005-01-27 andy Wheeler says :

Great work. Thanks for your contribution in time and talent.

#2
2005-03-25 Paul Carpenter says :

tee hee, you didn't escape the ul tags in your header. Great work though.

#3
2005-03-25 BonRouge says :

D'oh! I don't know how that got there...
Thanks for pointing it out. (Oh, and thanks for the encouraging comments Paul and Andy).

#4
2005-11-23 TeddyX says :

Great stuff. And very clear, also. It helps me much. Thanx.

#5
2005-12-02 Simon Bahr says :

Hi Bon,

Could you show the CSS for the clear div just to complete the picture.

Keep up the great work.

#6
2005-12-07 TeddyX says :

It could be something like:

.clear {
height: 0.1%;
clear: both;
overflow:hidden;
}


At least this is what I use.

#7
2005-12-07 BonRouge says :

Sorry...
I've added the code for the .clear div above - it's close to what Teddy suggested, but different...
.clear {
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}

#8
2006-03-10 Keith says :

May have been discussed before but jst in case it hasn't. If doing a vertical list, you may wish to take off the left indentation by setting #ul {margin:0; padding;0} IE did this in my case by default but firefox didn't. Took me quite some time to figure it out.

#9
2009-03-03 febie says :

thank you for your code... im looking for this and its very useful to me :-) cheers..!! nyahahaha

#10
2010-03-07 erhan says :

all the information is so usefull. And they are what I am looking for. thank you very much for this share

#11
2011-05-29 YAKUZA says :

HTML EXPERT IS HERE

Comment form

Please type the word 'chocolate' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url