HI there
Could someone PLEASE help me;
I have a drop-down menu on my site and when I hover, the drop-down goes behind the content.
This is the address : www.beds24.co.za
I dont know how to fix this, I've tried so many different settings.
This is my CSS file.
The menu in question is /* 2nd Menu */
/* Root = Horizontal, Secondary = Vertical */
ul#dsm {
margin: 0;
border: 0 none;
padding: 0 0 0 10px;
width: 956px; /*For KHTML*/
list-style: none;
height: 28px;
}
ul#dsm li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
width:auto;
/* height: 28px;*/
}
ul#dsm ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 36px;
left: 0;
}
ul#dsm ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
ul#dsm ul li {
width: 160px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
}
/* Root Menu */
ul#dsm a {
border-right: 1px dotted #92ABBF;
border-left: 1px dotted #92ABBF;
/* border: 1px solid #356AA0;
border-bottom-color: #356AA0;*/
padding: 0 17px 0 17px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
/*background: #356AA0;*/
color:#333333;
font: bold 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
line-height:36px; width:auto;
}
/* Root Menu Hover Persistence */
ul#dsm a:hover,
ul#dsm li:hover a,
ul#dsm li.iehover a {
background:none;
color: #FFF;
}
/* Root Menu Hover Persistence */
ul#dsm a:hover.top,
ul#dsm li:hover a.top,
ul#dsm li.iehover a.top {
background:none;
color: #FFF;
padding-right:18px
}
ul#dsm a.top {
background:#eeb2a2;
padding-right:18px
}
/* 2nd Menu */
ul#dsm li:hover li a,
ul#dsm li.iehover li a {
text-align:left;
background: #cccccc;
color: #333333;
border-top: 1px dotted #2B547E;
line-height:26px;
width: 120%;
font: bold 1.3em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
padding: 4px 17px 4px 17px;
}
/* 2nd Menu Hover Persistence */
ul#dsm li:hover li a:hover,
ul#dsm li:hover li:hover a,
ul#dsm li.iehover li a:hover,
ul#dsm li.iehover li.iehover a {
background: #eeb2a2;
color: #FFF;
}
/* 3rd Menu */
ul#dsm li:hover li:hover li a,
ul#dsm li.iehover li.iehover li a {
background: #eeb2a2;
color: #5d6d6d;
border-top: 1px dotted #2B547E;
}
/* 3rd Menu Hover Persistence */
ul#dsm li:hover li:hover li a:hover,
ul#dsm li:hover li:hover li:hover a,
ul#dsm li.iehover li.iehover li a:hover,
ul#dsm li.iehover li.iehover li.iehover a {
background: #eeb2a2;
color: #FFF;
}
/* 4th Menu */
ul#dsm li:hover li:hover li:hover li a,
ul#dsm li.iehover li.iehover li.iehover li a {
background: #223E54;
color: #ccc;
border-top: 1px dotted #2B547E;
line-height:26px;
}
/* 4th Menu Hover */
ul#dsm li:hover li:hover li:hover li a:hover,
ul#dsm li.iehover li.iehover li.iehover li a:hover {
background: #21496A;
color: #FFF;
}
ul#dsm ul ul,
ul#dsm ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#dsm li:hover ul ul,
ul#dsm li:hover ul ul ul,
ul#dsm li.iehover ul ul,
ul#dsm li.iehover ul ul ul {
display: none;
}
ul#dsm li:hover ul,
ul#dsm ul li:hover ul,
ul#dsm ul ul li:hover ul,
ul#dsm li.iehover ul,
ul#dsm ul li.iehover ul,
ul#dsm ul ul li.iehover ul {
display: block;
}
/* uncomment if using okto template or it's modifications */
#dsm {overflow:visible}