Tweet
Take a look at This Site and hover over refurbished machinery, works in every browser except IE8 where only one or two items will act correctly or it will all just be the dark green colour that hover should be, and there will be no hover effect. The menu is generated using php to get info from mysql database.
The CSS is as follows...
AND THE HTML....
The CSS is as follows...
Code:
.v{margin-top:11px; margin-left:-20px;}
.look{
position:relative;
width:177px;
height:42px;
display:table-cell;
vertical-align:middle;
}
.ddsmoothmenu{
font: 14px Verdana;
background:none;
color:#EEEEEE; /*background of menu bar (default state)*/
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
width:177;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: -webkit-gradient(linear, left top, left bottom, from(#1D4147), to(#6A94A2)); /* for webkit browsers */
background: -moz-linear-gradient(top, #1D4147, #6A94A2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1D4147', endColorstr='#6A94A2'); /*background of menu items (default state)*/
padding: 8px 10px;
color: #2d2b2b;
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color:#FFFF66;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background-color:#33737D;
background: -webkit-gradient(linear, left top, left bottom, from(#33737D), to(#9BB8C1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #33737D, #9BB8C1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33737D', endColorstr='#9BB8C1');
color:#FFFF00;
}
.ddsmoothmenu ul li a:hover{
background-color:#33737D;
background: -webkit-gradient(linear, left top, left bottom, from(#33737D), to(#9BB8C1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #33737D, #9BB8C1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33737D', endColorstr='#9BB8C1');
color:#FFFF66; /*background of menu items during onmouseover (hover state)*/
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* 1st level */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 260px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
background:#588B95;
background: -webkit-gradient(linear, left top, left bottom, from(#588B95), to(#90B0BA)); /* for webkit browsers */
background: -moz-linear-gradient(top, #588B95, #90B0BA);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#588B95', endColorstr='#90B0BA'); /*background of menu items (default state)*/
}
.ddsmoothmenu ul li ul li a:hover{
font: normal 13px Verdana;
width: 260px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
background:#588B95;
background: -webkit-gradient(linear, left top, left bottom, from(#2D5860), to(#33737D)); /* for webkit browsers */
background: -moz-linear-gradient(top, #2D5860, #33737D);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2D5860', endColorstr='#33737D'); /*background of menu items (default state)*/
}
.ddsmoothmenu ul li ul li a.selected{
font: normal 13px Verdana;
width: 260px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
background:#588B95;
background: -webkit-gradient(linear, left top, left bottom, from(#2D5860), to(#33737D)); /* for webkit browsers */
background: -moz-linear-gradient(top, #2D5860, #33737D);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2D5860', endColorstr='#33737D'); /*background of menu items (default state)*/
}
/* 2nd level */
.ddsmoothmenu ul li ul li ul li a{
font: normal 12px Verdana;
width: 300px; /*width of sub menus*/
padding: 5px;
margin: 0;
background:#588B95;
background: -webkit-gradient(linear, left top, left bottom, from(#588B95), to(#90B0BA)); /* for webkit browsers */
background: -moz-linear-gradient(top, #588B95, #90B0BA);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#588B95', endColorstr='#90B0BA'); /*background of menu items (default state)*/
}
.ddsmoothmenu ul li ul li ul li a:hover{
font: normal 12px Verdana;
width: 300px; /*width of sub menus*/
padding: 5px;
margin: 0;
background:#588B95;
background: -webkit-gradient(linear, left top, left bottom, from(#2D5860), to(#33737D)); /* for webkit browsers */
background: -moz-linear-gradient(top, #2D5860, #33737D);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2D5860', endColorstr='#33737D'); /*background of menu items (default state)*/
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{ /*shadow for NON CSS3 capable browsers*/
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: black;
}
.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
}
Code:
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="stocklist.php" class="look">
<p class="v">Refurbished Machinery</p>
</a>
<ul>
<li><a href='#'>$cat</a><ul>
<li><a href='viewitem.php?product=$id'>$name</a></li>
</ul></li>
</ul>
</li>
</ul>
</div>
Comment