.
http://www.cssplay.co.uk/menus/image_dropdown.html#nogo31
#nav {
font-family:arial,verdana,sans-serif;
height:50px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position:relative;
width:608px;
z-index:200;
}
#nav li.top {
display:block;
float:left;
}
#nav li a {
border-color:#DDDDDD #888888 #000000 #CCCCCC;
border-style:solid;
border-width:1px;
cursor:pointer;
display:block;
float:left;
height:50px;
padding:0;
text-decoration:none;
width:150px;
}
#nav li a b {
margin-left:-999px;
}
#nav li a.fruit {
background:transparent url(fruit/fruit.jpg) repeat scroll 0 0;
}
#nav li a.veg {
background:transparent url(veg/veg.jpg) repeat scroll 0 0;
}
#nav li a.greens {
background:transparent url(greens/greens.jpg) repeat scroll 0 0;
}
#nav li a.nuts {
background:transparent url(nuts/nuts.jpg) repeat scroll 0 0;
}
#nav li:hover a, #nav a:hover {
background-position:0 50px;
}
#nav table {
border-collapse:collapse;
height:0;
left:0;
margin:-1px;
padding:0;
position:absolute;
top:0;
width:0;
}
#nav .sub {
height:0;
left:-9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position:absolute;
top:-9999px;
width:0;
}
#nav li:hover {
position:relative;
z-index:200;
}
#nav a:hover {
position:relative;
white-space:normal;
z-index:200;
}
#nav :hover ul.sub {
background:#EEDDBB none repeat scroll 0 0;
height:auto;
left:0;
top:52px;
width:152px;
z-index:300;
}
#nav :hover ul.sub li {
display:block;
float:left;
font-weight:normal;
height:52px;
position:relative;
width:152px;
}
#nav :hover ul.sub li a {
border-color:#DDDDDD #888888 #000000 #CCCCCC;
border-style:solid;
border-width:1px;
cursor:pointer;
display:block;
height:50px;
padding:0;
text-decoration:none;
width:150px;
}
#nav :hover ul.sub li a b {
left:-9999px;
margin:0;
position:absolute;
}
#nav :hover ul li a.apples {
background:transparent url(fruit/apples2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.oranges {
background:transparent url(fruit/oranges2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.pears {
background:transparent url(fruit/pears2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.bananas {
background:transparent url(fruit/bananas2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.lemons {
background:transparent url(fruit/lemons2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.potatoes {
background:transparent url(veg/potatoes2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.carrots {
background:transparent url(veg/carrots2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.turnips {
background:transparent url(veg/turnip2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.parsnips {
background:transparent url(veg/parsnip2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.cabbages {
background:transparent url(greens/cabbage2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.cauliflower {
background:transparent url(greens/cauliflower2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.beans {
background:transparent url(greens/beans2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.sprouts {
background:transparent url(greens/sprouts2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.peas {
background:transparent url(greens/peas2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.broccoli {
background:transparent url(greens/broccoli2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.almonds {
background:transparent url(nuts/almonds2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.cashews {
background:transparent url(nuts/cashews2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.walnuts {
background:transparent url(nuts/walnuts2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.pistachios {
background:transparent url(nuts/pistachios2.jpg) repeat scroll 0 0;
}
#nav :hover ul.sub li a:hover {
background-position:0 50px;
position:relative;
}
#nav :hover ul.sub li a:hover b {
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #888888;
color:#000000;
display:block;
font-size:12px;
height:20px;
left:100px;
line-height:18px;
text-align:center;
top:15px;
width:100px;
}
#nav {
font-family:arial,verdana,sans-serif;
height:50px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position:relative;
width:608px;
z-index:200;
}
#nav li.top {
display:block;
float:left;
}
#nav li a {
border-color:#DDDDDD #888888 #000000 #CCCCCC;
border-style:solid;
border-width:1px;
cursor:pointer;
display:block;
float:left;
height:50px;
padding:0;
text-decoration:none;
width:150px;
}
#nav li a b {
margin-left:-999px;
}
#nav li a.fruit {
background:transparent url(fruit/fruit.jpg) repeat scroll 0 0;
}
#nav li a.veg {
background:transparent url(veg/veg.jpg) repeat scroll 0 0;
}
#nav li a.greens {
background:transparent url(greens/greens.jpg) repeat scroll 0 0;
}
#nav li a.nuts {
background:transparent url(nuts/nuts.jpg) repeat scroll 0 0;
}
#nav li:hover a, #nav a:hover {
background-position:0 50px;
}
#nav table {
border-collapse:collapse;
height:0;
left:0;
margin:-1px;
padding:0;
position:absolute;
top:0;
width:0;
}
#nav .sub {
height:0;
left:-9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position:absolute;
top:-9999px;
width:0;
}
#nav li:hover {
position:relative;
z-index:200;
}
#nav a:hover {
position:relative;
white-space:normal;
z-index:200;
}
#nav :hover ul.sub {
background:#EEDDBB none repeat scroll 0 0;
height:auto;
left:0;
top:52px;
width:152px;
z-index:300;
}
#nav :hover ul.sub li {
display:block;
float:left;
font-weight:normal;
height:52px;
position:relative;
width:152px;
}
#nav :hover ul.sub li a {
border-color:#DDDDDD #888888 #000000 #CCCCCC;
border-style:solid;
border-width:1px;
cursor:pointer;
display:block;
height:50px;
padding:0;
text-decoration:none;
width:150px;
}
#nav :hover ul.sub li a b {
left:-9999px;
margin:0;
position:absolute;
}
#nav :hover ul li a.apples {
background:transparent url(fruit/apples2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.oranges {
background:transparent url(fruit/oranges2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.pears {
background:transparent url(fruit/pears2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.bananas {
background:transparent url(fruit/bananas2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.lemons {
background:transparent url(fruit/lemons2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.potatoes {
background:transparent url(veg/potatoes2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.carrots {
background:transparent url(veg/carrots2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.turnips {
background:transparent url(veg/turnip2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.parsnips {
background:transparent url(veg/parsnip2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.cabbages {
background:transparent url(greens/cabbage2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.cauliflower {
background:transparent url(greens/cauliflower2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.beans {
background:transparent url(greens/beans2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.sprouts {
background:transparent url(greens/sprouts2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.peas {
background:transparent url(greens/peas2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.broccoli {
background:transparent url(greens/broccoli2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.almonds {
background:transparent url(nuts/almonds2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.cashews {
background:transparent url(nuts/cashews2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.walnuts {
background:transparent url(nuts/walnuts2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.pistachios {
background:transparent url(nuts/pistachios2.jpg) repeat scroll 0 0;
}
#nav :hover ul.sub li a:hover {
background-position:0 50px;
position:relative;
}
#nav :hover ul.sub li a:hover b {
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #888888;
color:#000000;
display:block;
font-size:12px;
height:20px;
left:100px;
line-height:18px;
text-align:center;
top:15px;
width:100px;
}
#nav {
font-family:arial,verdana,sans-serif;
height:50px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position:relative;
width:608px;
z-index:200;
}
#nav li.top {
display:block;
float:left;
}
#nav li a {
border-color:#DDDDDD #888888 #000000 #CCCCCC;
border-style:solid;
border-width:1px;
cursor:pointer;
display:block;
float:left;
height:50px;
padding:0;
text-decoration:none;
width:150px;
}
#nav li a b {
margin-left:-999px;
}
#nav li a.fruit {
background:transparent url(fruit/fruit.jpg) repeat scroll 0 0;
}
#nav li a.veg {
background:transparent url(veg/veg.jpg) repeat scroll 0 0;
}
#nav li a.greens {
background:transparent url(greens/greens.jpg) repeat scroll 0 0;
}
#nav li a.nuts {
background:transparent url(nuts/nuts.jpg) repeat scroll 0 0;
}
#nav li:hover a, #nav a:hover {
background-position:0 50px;
}
#nav table {
border-collapse:collapse;
height:0;
left:0;
margin:-1px;
padding:0;
position:absolute;
top:0;
width:0;
}
#nav .sub {
height:0;
left:-9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position:absolute;
top:-9999px;
width:0;
}
#nav li:hover {
position:relative;
z-index:200;
}
#nav a:hover {
position:relative;
white-space:normal;
z-index:200;
}
#nav :hover ul.sub {
background:#EEDDBB none repeat scroll 0 0;
height:auto;
left:0;
top:52px;
width:152px;
z-index:300;
}
#nav :hover ul.sub li {
display:block;
float:left;
font-weight:normal;
height:52px;
position:relative;
width:152px;
}
#nav :hover ul.sub li a {
border-color:#DDDDDD #888888 #000000 #CCCCCC;
border-style:solid;
border-width:1px;
cursor:pointer;
display:block;
height:50px;
padding:0;
text-decoration:none;
width:150px;
}
#nav :hover ul.sub li a b {
left:-9999px;
margin:0;
position:absolute;
}
#nav :hover ul li a.apples {
background:transparent url(fruit/apples2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.oranges {
background:transparent url(fruit/oranges2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.pears {
background:transparent url(fruit/pears2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.bananas {
background:transparent url(fruit/bananas2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.lemons {
background:transparent url(fruit/lemons2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.potatoes {
background:transparent url(veg/potatoes2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.carrots {
background:transparent url(veg/carrots2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.turnips {
background:transparent url(veg/turnip2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.parsnips {
background:transparent url(veg/parsnip2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.cabbages {
background:transparent url(greens/cabbage2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.cauliflower {
background:transparent url(greens/cauliflower2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.beans {
background:transparent url(greens/beans2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.sprouts {
background:transparent url(greens/sprouts2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.peas {
background:transparent url(greens/peas2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.broccoli {
background:transparent url(greens/broccoli2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.almonds {
background:transparent url(nuts/almonds2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.cashews {
background:transparent url(nuts/cashews2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.walnuts {
background:transparent url(nuts/walnuts2.jpg) repeat scroll 0 0;
}
#nav :hover ul li a.pistachios {
background:transparent url(nuts/pistachios2.jpg) repeat scroll 0 0;
}
#nav :hover ul.sub li a:hover {
background-position:0 50px;
position:relative;
}
#nav :hover ul.sub li a:hover b {
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #888888;
color:#000000;
display:block;
font-size:12px;
height:20px;
left:100px;
line-height:18px;
text-align:center;
top:15px;
width:100px;
}
