1 reply [Last post]
misi
Offline
newbie
Last seen: 9 years 43 weeks ago
Joined: 2009-11-16
Posts: 2
Points: 3

I have created a dropdown menu for my site.
The dropdown works great in Firefox, safari and opera but it does not drop down in IE.

The menu is displaying ok in IE but when you hover over a tab nothing happens.

This is the link http://www.misi.co.uk/2_template.php There are two menus "navigation" which is the bottom category menu in grey and "navigation_blue" - which is the top bue tabs. I have the same problem with both menus.

I normally hash around to get IE to function as I wish however only having a mac infront of me its a bit of a pain as I have to ring a friend to check IE for me, if anyone knows of a browser test that allows you to check functions in IE please let me know, I use a couple but only get screen shots so its fine for layout checks but no good at testing drop down menus and the like.

/* Categories Bottom MENU */
 
#navigation {width:985px;height:50px;margin-top:-27px;}
#navigation ul {margin-left: -40px; text-align:center;}
#navigation li {height:21px;float: left; text-align:center;position: relative;background: url(/images/top-tab-lgt.png) no-repeat}
#navigation * {cursor: pointer;}
#navigation li a {text-align:center;width:87px;float:left; color:#333333; font-size:5px; display: block; padding-left:2px;padding-top:2px; text-decoration: none; }
#navigation li a span {float: left; display: block; line-height: 21px; height: 21px; padding: 0 6px 0 1px;}
 
.os_windows #navigation li a span {padding: 0 0px 0 0px}
 
#navigation li a {color: #000000; font-size: 11px; font-weight: 100; font-family: Arial, sans-serif; }
#navigation li a:hover {color: white; background-color: #e2e0e1;}
#navigation li {list-style:none;}
#navigation li:hover .navigation_hover,
#navigation li.hover .navigation_hover {visibility: visible;}
 
#navigation .navigation_hover {
  width: auto;
  position: absolute;
  top: 18px;
  left: -40px;
  margin: 0px;
  display: block;
  visibility: hidden;
  border-top: 0;
  z-index: 4;
}
 
#navigation .navigation_hover li {float: left}
 
#navigation .navigation_hover li a {
  float: none;
  padding: 0 2px;
  line-height: 21px;
  width: 110px;
  background: #e2e0e1;
  color: #000000;
  border: 0;
}
 
#navigation .navigation_hover li a:hover {
  background: #cc205c;
  color: white;
}
 
/* TOP TABS/*
#blue_navigation {height:50px; text-align:right; margin-left: 265px; margin-top:-5px;}
 
#blue_navigation ul {text-align:right;  }
#blue_navigation li {height:40px; float: left; position: relative;list-style:none;background: url(/images/top-tab-blue.png) no-repeat;}
#blue_navigation * {cursor: pointer;}
#blue_navigation li a {width:135px; float: left; color:#333333; font-size:10px; display: block; text-align:center;padding-top:5px; text-decoration: none; }
#blue_navigation li a span{width:135px; float: left; color:#333333; font-size:10px; display: block; text-align:center;padding-top:5px; text-decoration: none; }
 
#blue_navigation li {list-style:none;}
 
 
#blue_navigation li a:hover {color: #0D7DC7; background: url(/images/top-tab-hblue.png) no-repeat}
#blue_navigation li:hover .blue_navigation_hover,
#blue_navigation li.hover .blue_navigation_hover {visibility: visible;}
 
.os_windows #blue_navigation li a span {padding: 0 0px 0 0px}
 
#blue_navigation .blue_navigation_hover {
  float: none;
  position: absolute;
text-align:left;
  width: auto;
  left: -40px;
  height:21px;
  margin-top: 20px;
  display: block;
  visibility: hidden;
   z-index: 4;
}
 
#blue_navigation .blue_navigation_hover li {float: left}
 
#blue_navigation .blue_navigation_hover li a {
  float: none;
    left: -85px;
  padding-top: 0px;
  line-height: 20px;
  color: #7c7c7c;
  border: 0;
}

misi
Offline
newbie
Last seen: 9 years 43 weeks ago
Joined: 2009-11-16
Posts: 2
Points: 3

Please note the top tabs are

Please note the top tabs are not hashed out in the actual code just a posting error

Thanks in advance for your help Wink