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>
tee hee, you didn't escape the ul tags in your header. Great work though.
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).
Great stuff. And very clear, also. It helps me much. Thanx.
Hi Bon,
Could you show the CSS for the clear div just to complete the picture.
Keep up the great work.
It could be something like:
.clear {
height: 0.1%;
clear: both;
overflow:hidden;
}
At least this is what I use.
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;
}
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.
thank you for your code... im looking for this and its very useful to me :-) cheers..!! nyahahaha
all the information is so usefull. And they are what I am looking for. thank you very much for this share
HTML EXPERT IS HERE
Great work. Thanks for your contribution in time and talent.