Quote from: tretch at Mar 27, 2010, 03:40 AM
looks very nice, i am currently working on my site and was wondering how I could get a similar drop-down menu setup like the one you have? thanks.
I have developed something very similar for a site under development. Here’s the css based on a default wayfinder call:
It’s not clean at all because it took me a while to get it to work. Should give you a good starting point though:
#shop_nav{
position:relative;
left:30px;
width:900px;
height:40px;
background-image:url(shop_nav_bg.gif);
z-index:1000;
}
#shopnav ul{
position:relative;
list-style:none;
}
#shop_nav li{
display:block;
position:relative;
float:left;
}
#shop_nav li:hover{
background-image:none;
background-color:#FFFFFF;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
margin-left:-1px;
margin-right:-1px;
}
#shop_nav li a{
position:relative;
text-transform:capitalize;
font-weight:bold;
display:block;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
margin:0 0 0 2px;
padding:0 20px;
}
#shop_nav li a:hover{
background-color:#fff;
color:#0EBDE5;
border-bottom:0;
}
#shop_nav li.active a{
background-color:#fff;
color:#999;
}
#shop_nav li li.active a, #shop_nav li li.last a{
color:#000;
}
#shop_nav li.active a:hover{
background-color:#fff;
color:#0EBDE5;
}
#shop_nav li ul {
position:absolute;
display:none;
top:40px;
margin-left:-1px;
min-width:100%;
white-space:nowrap;
background-color:#FFFFFF;
border: 1px solid #ccc;
border-top:0;
}
#shop_nav li ul:hover { /* second-level lists */
display:block;
}
#shop_nav li:hover ul, #shop_nav li.over ul { /* lists nested under hovered list items */
display: block;
}
#shop_nav li li{
clear:both;
border:0;
min-width:100%;
}
#shop_nav li li a{
margin:0;
border:0;
}
#shop_nav li li a:hover, #shop_nav li ul li.active a:hover, #shop_nav li ul li.last a:hover{
border:0;
background-color:#eee;
}
#shop_nav li ul li.active a:hover, #shop_nav li ul li.last a:hover{
color:#0EBDE5;
background-color:#eee;
}
☆ A M B ☆
