Index

--- title: "Dropdown list open/hide behind another dropdown list on IE 7" description: "Dropdown list open/hide behind another dropdown list on IE 7" author: "Mark Devid" published: 2013-04-16 updated: 2013-04-16 canonical: https://www.mindstick.com/forum/760/dropdown-list-open-hide-behind-another-dropdown-list-on-ie-7 category: "css-css3" tags: ["css-css3"] reading_time: 5 minutes --- # Dropdown list open/hide behind another dropdown list on IE 7 Hi [Expert](https://www.mindstick.com/articles/13120/an-expert-financial-advice-will-improve-your-finances)!\ I have created two [dropdown](https://www.mindstick.com/articles/263/ajax-toolkit-dropdownextender-in-asp-dot-net) list on html page. That's [working fine](https://answers.mindstick.com/qa/95550/why-is-the-safari-browser-not-working-fine) on IE 10, IE 9 , IE 8 and other [browser](https://www.mindstick.com/blog/155254/which-is-the-best-internet-browser) such that [Firefox](https://www.mindstick.com/forum/159398/any-way-to-disable-firefox-4-textarea-resizing-handles-please-help), [Chrome](https://www.mindstick.com/blog/303260/discover-google-s-latest-ip-protection-privacy-test-feature-in-chrome) , Opera, [Safari](https://www.mindstick.com/forum/453/font-weight-bold-property-not-support-in-ie-opera-safari-chrome) but not work on IE 7. On IE 7 it hide behind another dropdown list, see [image](https://www.mindstick.com/articles/23551/an-investigate-distinctive-seafood-restaurant-for-your-image-stamp-character)\ ![Dropdown list open/hide behind another dropdown list on IE 7](http://i.stack.imgur.com/yaCqd.png)\ Line of code are given below\ **HTML code**\ ``` Index

``` **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;} ``` \ [http://tempuri.org?link=new](http://code.google.com/p/phpwcms-modules/source/browse/trunk/include/inc_module/mod_cm_calendar/template/msdropdown/js/jquery.dd.js?r=86)\ \ Please help me!\ Thanks in [advance](https://www.mindstick.com/blog/33258/jee-mains-and-jee-advance-exams)! ## Replies ### Reply by AVADHESH PATEL Hi Mark!\ set parent element position- relative with z-index 1 dynamically. Get the help from below line of code. I home it resolve your problem. \ ```

``` \ --- Original Source: https://www.mindstick.com/forum/760/dropdown-list-open-hide-behind-another-dropdown-list-on-ie-7 Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.