Hey guys, a small CSS issue here. It's a very simple CSS dropdown menu, but as always, IE has problems with it

 

Wondered if any of you guys could tell what part of these few lines of CSS IE's having trouble with?

 

#nav_drop{list-style:none; font-size:11px; left:804px; line-height:2em; position:relative; top:29px; z-index:500; width:100px}

#nav_drop li{ float:left; z-index:500; position:relative}

#nav_drop a{display:block; line-height:2em; text-decoration:none}

#nav_drop ul{float:none; position:absolute; left:-999em; list-style:none; background-color:#fff; z-index:500;}

#nav_drop li:hover ul{float:none; left:-10px}

#nav_drop li:hover ul li a:hover{background:#2d2d2d}

#nav_drop li ul li a{background:#000; width:152px; padding-top:5px; padding-left:10px; padding-bottom:5px}

 

All other browsers its working fine, but in IE the hover doesn't work [when you hover over it it does nothing] and the relative elements seem to be pushing other things on my page down. Really don't know why it would do this, but thanks for any help.

 

Pippin.

Edited March 10, 201115 yr by pippin

just looking at that I'd be inclined to make sure each entity has a ; at the end. What's the code look like? Have you formed your UL/LI correctly? Browsers such as Firefox will accept them malformed and IE is more compliant.

Weeeeell...

 

Which version of IE are you testing on?

li:hover does not work in IE6 but works in IE7+.

 

A way to get around this, is by adding a class to the li on mouse over.

You can easily do this using jQuery.

 

Add the jQuery library in you <head> tag or just before the closing body tag.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

After the jQuery lib script, add this

$(document).ready(function(){
   $('#nav_drop li').hover(function(){
       $(this).toggleClass('hover');
   });
});

Now on your CSS file file, instead of

#nav_drop li:hover ul

You can do

#nav_drop li.hover ul

Thanks for the replys,

 

@zed - just tried it with the added a; but didn't work, but I forgot to post the second part of the code, apologies:

 

<ul id="nav_drop">                
           <li><span class="blue2"><a href="#">Control Pannel</a></span> 
               <ul>
                   <li class="m_links" ><a href="#">Upload Artwork</a></li>
                   <li class="m_links" ><a href="#">Upload Artwork</a></li>
                   <li class="m_links"><a href="#">Submit Brief</a></li>
                   <li class="m_links" ><a href="#">Upload Artwork</a></li>
                   <li class="m_links"><a href="#">Submit Brief</a></li>
                   <li class="m_links"><a href="#">Submit Brief</a></li>
                   <li class="last"><a href="#">Competition details</a></li>
               </ul>
           </li>  

 

@ Pedro - Thanks for the fix but surely there's a way of fixing this without JavaScript? I'm sure it's just me doing something wrong with the css. I've seen plenty of these using css alone, that's what I was going for.

 

I'm using IE7, so either way I think there's something I'm missing.

 

Appreciate the effort (:

Edited March 10, 201115 yr by pippin

Do you have an online version of the site so we can have a better understanding of what's happening?

Yeah sure, Just uploaded the basic parts for you to see:

 

[link removed]

 

If you try it in FF or Opera, you'll see how it's meant to act.

Edited March 10, 201115 yr by pippin

works fine in ie8

Damn, I dont have ie7!

But try this:

 

#nav_drop ul {
   background-color: #FFFFFF;
   float: none;
   left: -10px;
   list-style: none outside none;
   position: absolute;
   z-index: 500;
display: none;
}


#nav_drop:hover ul {
display: block;
}

Damn, I dont have ie7!

But try this:

 

#nav_drop ul {
   background-color: #FFFFFF;
   float: none;
   left: -10px;
   list-style: none outside none;
   position: absolute;
   z-index: 500;
display: none;
}


#nav_drop:hover ul {
display: block;
}

 

Hey thanks yeah that's worked, It's still a little glitchy but I should be able to straighten those out

 

Thanks Pedro +1's for your efforts (:

 

Edit // Just so you know, If you have IE8 , you can go to Tools > Developer Tools and select IE7 for rendering method. Just something I read the other day and found it quite useful

 

Thanks again.

Edited March 10, 201115 yr by pippin

Thanks, glad it helped.

I'm on a mac though! So no IE at alll!

Sorry to bump this, fixed a few of the bugs, but does anyone know why this doesn't work with

position:absolute

as apposed to

position:relative

? I've done it to stop the drop down pushing relative content down due to the padding of the css. But now on a rollover it only displays one item in the drop down list?

 

Any idea how to sort this out while I'm at it?

 

#nav_drop{list-style:none; font-size:11px; left:804px; line-height:2em; position:absolute; top:29px; z-index:500; width:100px}

#nav_drop li{ float:left; z-index:500; position:absolute;}

#nav_drop a{display:block; line-height:2em; text-decoration:none}

#nav_drop ul {float: none;left: -10px;list-style: none outside none;position: absolute;z-index: 500;display: none}

#nav_drop:hover ul {display: block}

#nav_drop li:hover ul{float:none; left:-10px}

#nav_drop li:hover ul li a:hover{background:#2d2d2d}

#nav_drop li ul li a{background:#000; width:152px; padding-top:5px; padding-left:10px; padding-bottom:5px}

.blue a{color:#fff}

.blue2 a{color:#fff; padding-bottom:27px}

.m_links a{color:#fff; padding-bottom:10px; border-bottom:dotted; border-bottom-width:thin; border-collapse:collapse}

.last a{color:#dadabb; border:none}

 

There's the CSS, it's the padding of the class's that's causing the issue, but you can see I've changed the

#nav_drop

&

#nav_drop li

to

position:absolute;

. But it's only displaying the first item in the list?

 

See the effect here:

 

[link removed]

Edited March 10, 201115 yr by pippin

You only need #nav_drop ul to be position: absolute.

 

#nav_drop li:hover ul li {position: relative;}

You only need #nav_drop ul to be position: absolute.

 

#nav_drop li:hover ul li {position: relative;}

 

Aahh of course, worked brilliantly Thanks al ot.

 

+1