Heres a CSS Only Dropdown good for 2 levels. I've Garishly coloured and commented it to help with identifying what is what.
I don't think it'll work in IE 6.
The idea is that if your site was 960px wide, and you wanted 7 Level_1 items to stretch exactly across the page you would alter the width of ul.level_1 li to 960 divided by 7 = 137px
Code:
/* TO APPEAR IN FRONT OF CONTENT IE7 */
#header .inside
{
z-index:1000;
}
/* SIZE OF ENTIRE MENU AREA - BLACK */
.mod_navigation
{
width:960px;
height:60px;
background-color:#000000;
}
/* MUST INCLUDE TO COUNTER DEFAULT CONTAO .block overflow hidden */
.mod_navigation.block
{
overflow: visible !important;
}
ul.level_1
{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:16px;
}
/* EACH LEVEL 1 MENU LISTITEM - SET WIDTH HERE - 960/5 -BRIGHT RED */
ul.level_1 li
{
width:192px;
height:30px;
background-color:#ff0000;
}
ul.level_1 li a
{
}
/* EACH LEVEL 1 MENU LISTITEM HOVER - BRIGHT YELLOW */
ul.level_1 li.hover,
ul.level_1 li:hover
{
background-color:#fcdf00;
}
/* EACH LEVEL 1 MENU LISTITEM LINKTEXT (also Verical Align)
link,active,visited - WHITE */
ul.level_1 a:link,
ul.level_1 a:active,
ul.level_1 a:visited
{
top:5px;
position:relative;
text-decoration:none;
color:#ffffff;
}
ul.level_1 ul li a:link,
ul.level_1 ul li a:active,
ul.level_1 ul li a:visited
{
top:0;
position:relative;
}
/* EACH LEVEL 1 MENU LISTITEM LINKTEXT hover- ORANGE */
ul.level_1 a:hover
{
color:#f78502;
}
/* LEVEL 1 ACTIVE TEXT - PINK */
ul.level_1 li.active span.active
{
top:5px;
position:relative;
font-weight:normal;
color:#f70ad0;
}
ul.level_1 ul
{
}
/* HEIGHT OF LEVEL 2 MENU LISTITEMS - PINK (overwritten) WHITE Border */
ul.level_1 ul li
{
height:24px;
margin:0;
padding-top:2px;
padding-bottom:2px;
background-color:#fa05e5;
border:1px solid #ffffff;
border-collapse:separate;
font-weight:normal;
}
/* EACH LEVEL 2 MENU LISTITEM hover - BLACK */
ul.level_1 ul li.hover,
ul.level_1 ul li:hover
{
background-color:#000000;
font-weight:normal;
}
/* LEVEL 1 ACTIVE and ACTIVE HOVER -BRIGHT GREEN */
ul.level_1 *.active,
ul.level_1 *.active:hover
{
background-color:#5ef705;
}
/* LEVEL 1 ACTIVE TRAIL and ACTIVE TRAIL hover - GREY */
ul.level_1 *.trail,
ul.level_1 *.trail:hover
{
background-color:#80827e;
}
ul.level_1
{
}
ul.level_1 li
{
}
ul.level_1 li.hover,
ul.level_1 li:hover
{
}
/* FROG GREEN */
ul.level_1 ul
{
background-color:#7aa327;
}
/* EACH LEVEL 1 MENU LISTITEM - BROWN */
ul.level_1 ul li
{
background-color:#664413;
}
ul.level_1 ul li.hover
{
margin:0;
}
/* LEVEL 2 ACTIVE and ACTIVE HOVER - LEMON */
ul.level_1 ul *.active,
ul.level_1 ul *.active:hover
{
background-color:#f7f5da;
}
ul.level_1,
ul.level_1 li,
ul.level_1 ul
{
margin:0;
padding:0;
list-style: none;
}
ul.level_1
{
position:relative;
float:left;
z-index: 597;
}
ul.level_1 li
{
float:left;
vertical-align:middle;
line-height:1.3em;
}
ul.level_1 li.hover,
ul.level_1 li:hover
{
position:relative;
z-index: 599;
cursor: default;
}
ul.level_1 ul
{
width:100%;
left:0;
top:30px;
position:absolute;
visibility: hidden;
z-index: 598;
}
ul.level_1 ul li
{
float:none;
}
ul.level_1 ul ul
{
top:1%;
left:99%;
}
ul.level_1 li:hover > ul
{
visibility: visible;
}
/* EACH LEVEL 2 LISTITEM LINKTEXT - YELLOW */
ul.level_2 a:link,
ul.level_2 a:active,
ul.level_2 a:visited
{
color:#fae902;
}
/* LEVEL 2 ACTIVE TEXT - RED */
ul.level_2 li.active span.active
{
top:2px;
position:relative;
color:#ff0000;
}
ul.level_2
{
width:100%;
}
ul.level_2 ul li
{
float:left;
}
ul.level_2 li.hover,
ul.level_2 li:hover
{
position:static;
}
ul.level_2 ul ul
{
display: none !important;
}
I've attached one without comments for importing (EDIT no i haven't.... I can't attach css or txt)
Bookmarks