You could do something like this:
<http://www.btinternet.com/~jtanna/menus05.htm>
The css is:
<style type="text/css">
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#104A10;
color:#fff;
font-weight: bolder;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}
#header ul li a:hover {
background:#369;
color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#header ul li a span {
display:block;
}
</style>
The html is:
<div id="header">
<ul>
<li><a href="#" class="active">About <span>MyCFO</span></a></li>
<li><a href="#">WHAT ARE OUTSOURCED<span>CFO SERVICES
?</span></a></li>
<li><a href="#">OUR <span>PHILOSOPHY</span></a></li>
<li><a href="#">A TYPICAL <span>ENGAGEMENT</span></a></li>
<li><a href="#">DO YOU NEED TO<span>WORK WITH MyCFO
?</span></a></li>
<li><a href="#">OUR <span>ACHIEVEMENTS</span></a></li>
<li><a href="#">WHAT OUT CUSTOMERS <span>SAY ABOUT
US</span></a></li>
</ul>
</div>
> How do you make a css horizontal menu
> using a list when the menu items span
> over 2 lines?
>
> For example :
> About
> What
> our customers
> Do you need to
> Our Company
> say about us
> work with
> us ?
>
> Usualy i would just use an <ul> and style accordingly
> but i can't even seem
> to think of a starting point. Can it be done by using a
> list?
>
> It needs to look like this:
> http://www.mycfoasia.com/dev/images/mycfo-final.jpg
>
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
