Hi Expert!
I have created two dropdown list on html page. That's working fine on IE 10, IE 9 , IE 8 and other browser such that Firefox, Chrome , Opera, Safari but not work on IE 7. On IE 7 it hide behind another dropdown list, see image
Line of code are given below
HTML code
<html>
<head>
<title>Index</title>
<link href="../../Content/dd1.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color: #4876b9;">
<table style="">
<tr>
<td>
<select id="ItemList1" name="ItemList1" style="width: 240px; position: relative;
z-index: 0;">
<option value="" tooltipdata="">Item 1</option>
<option value="" tooltipdata="">Item 2</option>
<option value="" tooltipdata="">Item 3</option>
<option value="" tooltipdata="">Item 4</option>
<option value="" tooltipdata="">Item 5</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="ItemList2" name="Application" style="width: 240px;">
<option value="" tooltipdata="">Item 6</option>
<option value="" tooltipdata="">Item 7</option>
<option value="" tooltipdata="">Item 8</option>
<option value="" tooltipdata="">Item 9</option>
<option value="" tooltipdata="">Item 10</option>
</select>
</td>
</tr>
</table>
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/dropdown/jquery.dd.js")" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
jQuery.noConflict();
jQuery("#ItemList1").msDropDown({ mainCSS: 'dd2' });
jQuery("#ItemList2").msDropDown({ mainCSS: 'dd2' });
});
</script>
</body>
</html>
Dropdown List CSS (dd1.css)
.dd2
{
text-align: left;
background-color: #E5E5E5;
font-family: TradeGothic;
font-style: oblique;
font-size: 14px;
color: #000000;
position: relative;
}
.dd2 .ddTitle
{
text-indent: 0;
cursor: default;
overflow: hidden;
height: 25px;
}
.dd2 .ddTitle span.arrow
{
background: transparent url(../../Content/icon-arrow.gif) no-repeat 0 0;
float: right;
display: inline-block;
width: 25px;
height: 25px;
cursor: pointer;
position: relative;
}
.dd2 .ddTitle span.ddTitleText
{
text-indent: 1px;
overflow: hidden;
line-height: 25px;
margin-left: 5px;
font-family: TradeGothic;
font-style: oblique;
font-size: 14px;
}
.dd2 .ddTitle span.ddTitleText img
{
}
.dd2 .ddTitle img.selected
{
vertical-align: top;
}
.dd2 .ddChild
{
position: absolute;
background-color: #fff;
border: 1px solid #e5e5e5;
border-top: none;
display: none;
margin: 0;
width: auto;
overflow: auto;
overflow-x: hidden !important;
font-size: 14px;
}
.dd2 .ddChild .opta a, .dd2 .ddChild .opta a:visited
{
padding-left: 10px;
}
.dd2 .ddChild a
{
display: block;
text-decoration: none;
color: #000;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
padding-left: 10px;
padding-top: 1px;
margin-bottom: 0px;
height: 25px;
line-height: 25px;
}
.dd2 .ddChild a:hover
{
background-color: #d21c1c;
color: #fff;
}
.dd2 .ddChild a img
{
border: 0;
padding: 0 2px 0 0;
vertical-align: middle;
}
.dd2 .borderTop
{
border-top: 1px solid #c3c3c3 !important;
}
.dd2 .noBorderTop
{
border-top: none 0 !important;
}
AVADHESH PATEL
16-Apr-2013