Date: 08/13/07 (WebDesign)    Keywords: no keywords

I'm trying to make a drop down box appear when I hover over an item in a unordered list.
So far, I can manage to get it to display on Firefox, but in IE6 - nothing happens when I hover over the item.

Any idea why this is happening? Any pointers would be much appreciated!!




<style type="text/css"> ul#global-nav{ list-style: none; margin:0; padding:0; } ul#global-nav li{ float: left; padding: 0 0 0 0.4em; font-size: 8pt; font-weight: normal; border-right: 1px solid #c30; } ul#global-nav li a{ color: #000; text-decoration: none; margin-right: 0.6em; } ul#global-nav li a:hover{ text-decoration: underline; } ul#global-nav li div{ display: none; } ul#global-nav li:hover div, ul#global-nav li a:hover div{ display: block; position: absolute; background:#ccc; width:150px; padding:5px; } ul#global-nav li:hover div a{ color: red; text-decoration: underline; margin-right: 0; padding:0; } </style> <ul id="global-nav"> <li><a href="#">Item A</a></li> <li><a href="#">Item B</a></li> <li><a href="#">Item C</a></li> <li><a href="#">Item D</a></li> <li><a href="#">Item E</a></li> <li><a href="#">Item F</a></li> <li><a href="#">Item G</a> <div> You can get around on <a href="#nogo">planes</a>, <a href="#nogo">trains</a>, or <a href="#nogo">buses</a> </div> </li> </ul>

Source: http://community.livejournal.com/webdesign/1294568.html