PDA

Click to See Complete Forum and Search --> : IE doesn't show Drop down menu.pls help

lohumihem
04-27-2009, 05:08 AM
The below code is running ok in mozila 3.0, IE 7 but not in IE, pls have a look.



<div id="sub-navigation">
<div class="float-left"><img src="img/img_subnavi_left.jpg" /></div>
<div id="sub-navigation-buttons">
<div class="sub-menu">
<ul>
<li ><a href="listing.php?cat_id=1">wellbeing</a>
<ul>
<li ><a href="listing.php?cat_id=1&sub_cat_id=12">Deep Sleep</a>
<li ><a href="listing.php?cat_id=1&sub_cat_id=13">Divine Calm</a>
<li ><a href="listing.php?cat_id=1&sub_cat_id=14">Gently Purify</a>
<li ><a href="listing.php?cat_id=1&sub_cat_id=15">Total Energy</a>
<li ><a href="listing.php?cat_id=1&sub_cat_id=16">Massage Oils & Balms</a>
<li ><a href="listing.php?cat_id=1&sub_cat_id=17">Accessories</a>

<li class="footer"></li>
</ul>

</li>
<li ><a href="listing.php?cat_id=2">make-up</a>
<ul>
<li ><a href="listing.php?cat_id=2&sub_cat_id=18">Nature's Minerals&trade; make-up</a>
<li ><a href="listing.php?cat_id=2&sub_cat_id=19">Bronzing</a>
<li ><a href="listing.php?cat_id=2&sub_cat_id=20">Cheeks</a>
<li ><a href="listing.php?cat_id=2&sub_cat_id=21">Eyes</a>
<li ><a href="listing.php?cat_id=2&sub_cat_id=22">Face</a>
<li ><a href="listing.php?cat_id=2&sub_cat_id=23">Lips</a>
<li ><a href="listing.php?cat_id=2&sub_cat_id=24">For a Fabulous Glow</a>
<li ><a href="listing.php?cat_id=2&sub_cat_id=25">For Fabulous Eyes</a>
<li ><a href="listing.php?cat_id=2&sub_cat_id=26">For Fabulous Lashes</a>
<li ><a href="listing.php?cat_id=2&sub_cat_id=27">For Fabulous Lips</a>
<li ><a href="listing.php?cat_id=2&sub_cat_id=28">Accessories</a>
<li ><a href="listing.php?cat_id=2&sub_cat_id=29">New! Roseflower Make-Up Collection</a>

<li class="footer"></li>
</ul>

</li>
<li ><a href="listing.php?cat_id=3">bath & body</a>
<ul>
<li ><a href="listing.php?cat_id=3&sub_cat_id=30">Accessories</a>
<li ><a href="listing.php?cat_id=3&sub_cat_id=31">Body Butter and Scrubs</a>
<li ><a href="listing.php?cat_id=3&sub_cat_id=32">Body Cleansing</a>
<li ><a href="listing.php?cat_id=3&sub_cat_id=33">Body Focus</a>
<li ><a href="listing.php?cat_id=3&sub_cat_id=34">Body Moisturising</a>
<li ><a href="listing.php?cat_id=3&sub_cat_id=35">Body Others</a>
<li ><a href="listing.php?cat_id=3&sub_cat_id=36">Feet</a>
<li ><a href="listing.php?cat_id=3&sub_cat_id=37">Hair Removal</a>
<li ><a href="listing.php?cat_id=3&sub_cat_id=38">Hands</a>
<li ><a href="listing.php?cat_id=3&sub_cat_id=39">Lips</a>
<li ><a href="listing.php?cat_id=3&sub_cat_id=40">Massage Oils & Balms</a>
<li ><a href="listing.php?cat_id=3&sub_cat_id=41">Spa Wisdom &trade;</a>
<li ><a href="listing.php?cat_id=3&sub_cat_id=42">New! Raspberry</a>

<li class="footer"></li>
</ul>

</li>
<li ><a href="listing.php?cat_id=4">skin care</a>
<ul>
<li ><a href="listing.php?cat_id=4&sub_cat_id=43">Accessories</a>
<li ><a href="listing.php?cat_id=4&sub_cat_id=44">Aloe</a>
<li ><a href="listing.php?cat_id=4&sub_cat_id=45">Exfoliators & Masks</a>
<li ><a href="listing.php?cat_id=4&sub_cat_id=46">Eyes</a>
<li ><a href="listing.php?cat_id=4&sub_cat_id=47">Moisture White&trade;</a>
<li ><a href="listing.php?cat_id=4&sub_cat_id=48">Seaweed</a>
<li ><a href="listing.php?cat_id=4&sub_cat_id=49">Tea Tree Oil</a>
<li ><a href="listing.php?cat_id=4&sub_cat_id=50">Vitamin C</a>
<li ><a href="listing.php?cat_id=4&sub_cat_id=51">Vitamin E</a>
<li ><a href="listing.php?cat_id=4&sub_cat_id=52">Wise Woman&trade;</a>

<li class="footer"></li>
</ul>

</li>
<li ><a href="listing.php?cat_id=5">men's</a>
<ul>
<li ><a href="listing.php?cat_id=5&sub_cat_id=53">Accessories</a>
<li ><a href="listing.php?cat_id=5&sub_cat_id=54">Arber</a>
<li ><a href="listing.php?cat_id=5&sub_cat_id=55">For Men Maca Root</a>
<li ><a href="listing.php?cat_id=5&sub_cat_id=56">Kistna</a>
<li ><a href="listing.php?cat_id=5&sub_cat_id=57">White Musk&reg; For Men</a>
<li ><a href="listing.php?cat_id=5&sub_cat_id=58">Of A Man</a>

<li class="footer"></li>
</ul>

</li>
<li ><a href="listing.php?cat_id=6">home fragrance</a>
<ul>
<li ><a href="listing.php?cat_id=6&sub_cat_id=59">Burners & Diffusers</a>
<li ><a href="listing.php?cat_id=6&sub_cat_id=60">Candles</a>
<li ><a href="listing.php?cat_id=6&sub_cat_id=61">Home Fragrance Oils</a>
<li ><a href="listing.php?cat_id=6&sub_cat_id=62">Spring Summer 2009</a>

<li class="footer"></li>
</ul>

</li>
<li ><a href="listing.php?cat_id=7">fragrance</a>
<ul>
<li ><a href="listing.php?cat_id=7&sub_cat_id=63">Aqua Lily</a>
<li ><a href="listing.php?cat_id=7&sub_cat_id=64">Cassis Rose</a>
<li ><a href="listing.php?cat_id=7&sub_cat_id=65">Invent Your Scent</a>
<li ><a href="listing.php?cat_id=7&sub_cat_id=66">Neroli Jasmin</a>
<li ><a href="listing.php?cat_id=7&sub_cat_id=67">Perfume Oils</a>
<li ><a href="listing.php?cat_id=7&sub_cat_id=68">White Musk&reg;</a>
<li ><a href="listing.php?cat_id=7&sub_cat_id=69">White Musk&reg; Intrigue</a>
<li ><a href="listing.php?cat_id=7&sub_cat_id=70">New! Limited Edition Mandarin Orchid</a>
<li ><a href="listing.php?cat_id=7&sub_cat_id=71">New! Moroccan Rose</a>
<li ><a href="listing.php?cat_id=7&sub_cat_id=72">New! Japanese Cherry Blossom</a>

<li class="footer"></li>
</ul>

</li>
<li ><a href="listing.php?cat_id=8">hair</a>
<ul>
<li ><a href="listing.php?cat_id=8&sub_cat_id=73">Accessories</a>
<li ><a href="listing.php?cat_id=8&sub_cat_id=74">Conditioner</a>
<li ><a href="listing.php?cat_id=8&sub_cat_id=75">Hair Styling</a>
<li ><a href="listing.php?cat_id=8&sub_cat_id=76">Hair Treatment</a>
<li ><a href="listing.php?cat_id=8&sub_cat_id=77">Shampoo</a>

<li class="footer"></li>
</ul>

</li>
<li ><a href="listing.php?cat_id=9">accessories</a>
<ul>
<li ><a href="listing.php?cat_id=9&sub_cat_id=78">Accessories</a>

<li class="footer"></li>
</ul>

</li>
<li ><a href="listing.php?cat_id=10">best sellers</a>
<ul>
<li ><a href="listing.php?cat_id=10&sub_cat_id=79">Best Sellers</a>

<li class="footer"></li>
</ul>

</li>
<li ><a href="listing.php?cat_id=11">gifts</a>
<ul>
<li ><a href="listing.php?cat_id=11&sub_cat_id=80">Spring Summer 2009</a>

<li class="footer"></li>
</ul>

</li>


</ul>
</div>
</div>
<div class="float-right"><img src="img/img_subnavi_right.jpg" /></div>
<!-- end #sub-navigation -->
</div>


YOU many check the drop down effect @ : http://www.thebodyshop.com.sg/en/index.aspx
lohumihem
04-27-2009, 05:10 AM
CSS:


#sub-navigation {
BACKGROUND: url(../img/bg_subnavi.jpg) repeat-x; HEIGHT: 43px
}
#sub-navigation-buttons {
FLOAT: left; WIDTH: 920px; PADDING-TOP: 11px
}
.sub-navigation-buttons {
FLOAT: left; MARGIN: 5px 7px 0px
}
A.sub-navigation-buttonlink:link {
COLOR: #e0f0bf; TEXT-DECORATION: none
}
A.sub-navigation-buttonlink:visited {
COLOR: #e0f0bf; TEXT-DECORATION: none
}
A.sub-navigation-buttonlink:active {
COLOR: #e0f0bf; TEXT-DECORATION: none
}
A.sub-navigation-buttonlink:hover {
COLOR: #fff
}
.sub-menu {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; Z-INDEX: 100; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 920px; POSITION: relative; HEIGHT: 25px; BORDER-RIGHT-WIDTH: 0px
}
.sub-menu UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.sub-menu UL UL {

}
.sub-menu LI {
FLOAT: left; POSITION: relative
}
.sub-menu A {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 11px; BACKGROUND: url(http://www.thebodyshop.com.sg/_global/img/img_subnavi_breaker.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN-LEFT: 1px; COLOR: #e0f0bf; LINE-HEIGHT: 29px; PADDING-TOP: 0px; HEIGHT: 25px; TEXT-DECORATION: none
}
.sub-menu A:visited {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 11px; BACKGROUND: url(http://www.thebodyshop.com.sg/_global/img/img_subnavi_breaker.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN-LEFT: 1px; COLOR: #e0f0bf; LINE-HEIGHT: 29px; PADDING-TOP: 0px; HEIGHT: 25px; TEXT-DECORATION: none
}
.sub-menu UL UL {
LEFT: 0px; VISIBILITY: hidden; WIDTH: 149px; POSITION: absolute; TOP: 25px; HEIGHT: 0px
}
.sub-menu TABLE {
LEFT: 0px; POSITION: absolute; TOP: 0px; BORDER-COLLAPSE: collapse
}
.sub-menu UL UL A {
BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 15px; PADDING-LEFT: 15px; BACKGROUND: #fff; PADDING-BOTTOM: 1px; MARGIN-LEFT: 0px; BORDER-LEFT: #999999 1px solid; WIDTH: 184px; COLOR: #666; LINE-HEIGHT: 1em; PADDING-TOP: 5px; HEIGHT: auto; TEXT-ALIGN: left
}
.sub-menu UL UL A:visited {
BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 15px; PADDING-LEFT: 15px; BACKGROUND: #fff; PADDING-BOTTOM: 1px; MARGIN-LEFT: 0px; BORDER-LEFT: #999999 1px solid; WIDTH: 184px; COLOR: #666; LINE-HEIGHT: 1em; PADDING-TOP: 5px; HEIGHT: auto; TEXT-ALIGN: left
}
.sub-menu .footer {
BORDER-RIGHT: #999999 1px solid; BACKGROUND: #fff; MARGIN-LEFT: 0px; BORDER-LEFT: #999999 1px solid; WIDTH: 214px; BORDER-BOTTOM: #999999 1px solid; HEIGHT: 10px
}
.sub-menu A:hover {
BACKGROUND: #f9f9f9; COLOR: #7dba00
}
.sub-menu UL UL A:hover {
BACKGROUND: #f9f9f9; COLOR: #7dba00
}
UNKNOWN {
BACKGROUND: #f9f9f9; COLOR: #7dba00
}
.sub-menu UL LI:hover UL {
VISIBILITY: visible
}
.sub-menu UL A:hover UL {
VISIBILITY: visible
}
.sub-menu .btn1 {
WIDTH: 30px
}
.sub-menu .btn2 {
WIDTH: 62px
}
.sub-menu .btn3 {
WIDTH: 79px
}
.sub-menu .btn4 {
WIDTH: 65px
}
.sub-menu .btn5 {
WIDTH: 49px
}
.sub-menu .btn6 {
WIDTH: 98px
}
.sub-menu .btn7 {
WIDTH: 69px
}
.sub-menu .btn8 {
WIDTH: 40px
}
.sub-menu .btn9 {
WIDTH: 81px
}
.sub-menu .btn10 {
WIDTH: 77px
}
.sub-menu .btn11 {
WIDTH: 41px
}
Fang
04-27-2009, 09:06 AM
Works in IE8