Want a css menu for your website? (See here for an example)
Firstly, get this file: csshover.htc
In your stylesheet add:
BODY {
behavior: url(/csshover.htc);
}
Ok, so now you’ll have the css hover capabilities pulled into your website. Next for the menu code itself…
I’m sure you’ll find that some of this code can be reduced or perhaps completely removed to suit your specific needs, but it works as it is and should be a good base to get your menu working!
For your STYLESHEET
/** MENU **/
UL.menu {
clear:both;
float:right;
font-size: 0.90em;
padding: 0;
position: relative;
margin:40px 0 10px 0px;
width: 585px;
z-index:100;
}
UL.menu LI{
background-color: #FFF;
color:#FFFFFF;
float:left;
font-weight: bold;
list-style-type: none;
margin: 0 0 0 12px;
padding: 4px 0 0 4px;
}
UL.menu LI:hover
{
background-color: #FFF;
}
UL.menu LI A {
color: #999;
font-weight:bold;
text-decoration:none;
}
UL.menu A {
display:block;
white-space:nowrap;
margin:-4px 0 0 -5px;
padding:6px 0 1px 5px;
color: #000;
font-size: 1em;
text-decoration:none;
height: 20px;
position: relative;
z-index:100;
}
UL.menu A:hover{
color:#333;
background:#FFF;
}
UL.menu UL{
background-color: #FFF;
display:none;
list-style:none;
margin:0;
margin: -5px 0 0 40px;
margin-left: -5px;
padding: 0;
position:absolute;
top:auto;
width: 205px;
z-index:500;
}
UL.menu UL LI, UL.menu UL LI A {
width: 205px;
background-color: #F5F5F5;
background-image: none;
padding-left: 5px;
color: #999;
margin-left: 0;
}
UL.menu UL LI:hover
{
background-color: #D5D5D5;
}
UL.menu UL LI A:hover{
color:#333;
background:#F5F5F5;
}
UL.menu UL UL{
background-color: transparent;
border: 2px solid #CCC;
margin-left: 100px;
width: 300px;
margin-top: -20px;
}
UL.menu UL UL LI, UL.menu UL UL LI A
{
width: 295px;
background-image: none;
padding-left: 5px;
background-color: #666;
color: #FFF;
}
/* Begin non-anchor hover selectors */
UL.menu LI:hover{
cursor:pointer;
z-index:100;
}
UL.menu LI:hover UL UL,
UL.menu LI LI:hover UL UL,
UL.menu LI LI LI:hover UL UL,
UL.menu LI LI LI LI:hover UL UL
{display:none;}
UL.menu LI:hover UL,
UL.menu LI LI:hover UL,
UL.menu LI LI LI:hover UL,
UL.menu LI LI LI LI:hover UL
{display:block;}
UL.menu UL UL UL LI, UL.menu UL UL UL A
{
text-transform:none;
}
UL.menu UL LI UL LI A:hover {
background-color: #777;
}
/* End of non-anchor hover selectors */
/* Styling for Expand */
ul.menu a.x, ul.menu a.x:visited{
font-weight:bold;
color:#FFF;
background:#333;
}
ul.menu a.x:hover{
color:#FFF;
background:#333;
}
ul.menu a.x:active{
color:#FFF;
background:#333;
}
For your front-end
[ul class="menu"]
[li][a href="#"]Home[/a][/li]
[li][a href="#"]About Us[/a]
[ul]
[li][a href="#"]The Company[/a][/li]
[li][a href="#"]How It Works[/a][/li]
[li][a href="#"]Made-To-Order[/a][/li]
[li][a href="#"]Design your own[/a][/li]
[li][a href="#"]Flexibility[/a][/li]
[li][a href="#"]Fabric or Leather[/a][/li]
[li][a href="#"]Corner Sofas[/a][/li]
[li][a href="#"]Chesterfields[/a][/li]
[/ul]
[/li]
[/ul]