Drop Down Menu Issues [Archive]

View Full Version : Drop Down Menu Issues

kidtone

01-07-2005, 07:02 PM

Sorry bout that anyway here's a link to my site thats in developement and I got this nasty bug that makes the menu jump to the right only seems to happen in IE6, I have firefox installed and have no problems. Anybody know what code is making this happen? I've already put in a few IE Work-arounds and I am stumped on this one (8 wasted hours of trying different fixes).

The site. (jumps in ie6)
http://test.stonebridgeranch.com/tegacaygolfclub/index.html

CSS Code
/*****************************************************
DROP DOWN NAVIGATION
******************************************************/
#nav {width:705px;height:8px;margin:0px 0px 8px 0px;padding:8px 0px;background:#BDCAB5;}
#nav ul {list-style: none;padding: 0;margin: 0;}
#nav a {font-weight:bold;color:black;}
#nav a {text-decoration:none;}
#nav li li a {display:block;font-weight:normal;color:#000000;padding:0.2em 10px;}
#nav li li a:hover {padding:0.2em 5px;background-color:#BDCAB5;border:5px solid #BDCAB5;border-width:0 4px;}
li {font-size: 11px;font-weight:bold;color:black;float:left;text-align:center;cursor:default;}
li#space {width:100px;}
li ul {display:none;position:absolute;top:100%;left:0;font-weight:normal;background: url(img/menu/background.gif) bottom left no-repeat;border-right: solid 1px #7d6340;}
li>ul {top:auto;left:auto;}
li li {display:block;float:left;position:inherit;background-color:transparent;border:0;}
li:hover ul, li.over ul {display:block;}
hr {display:none;}

chilipie

01-08-2005, 05:41 PM

fdgdgf
I've got to say, you've got a really good point there :D .

_Aerospace_Eng_

01-08-2005, 09:45 PM

lol, think wut chilipie is trying to say wut kind of drop down menu? its not good when we try to help you in the dark if u know wut i mean

kidtone

01-10-2005, 05:39 PM

lol sorry about the djklfjkf post, updated question at top.

musher

01-10-2005, 06:50 PM

Kidtone here's a link that may help, I've used this style of drop down before and it looks like what your trying to do.

http://www.htmldog.com/articles/suckerfish/dropdowns/

kidtone

01-10-2005, 08:10 PM

Ok I have the movement issue fixed but now can't get the menu's to drop below the links in IE... they work fine in firefox. Anybody have a quick fix for this. I posted the updated CSS Style Sheet below.

Site Link
http://test.stonebridgeranch.com/tegacaygolfclub/

CSS Code:

/*****************************************************
DROP DOWN NAVIGATION
******************************************************/
#container {width:705px;height:8px;margin:0px 0px 8px 0px;padding:8px 0px;background:#BDCAB5;}
#nav ul { /* all lists */ padding: 0; margin: 0; list-style: none; line-height: 1;padding: 0px 10px 0px 10px;}

#nav a {display: block;}

#nav li { /* all list items */ padding: 0px 38px 0px 0px;font-size: 11px;font-weight:bold;float: left; /* width needed or else Opera goes nuts */}

#nav li ul { /* second-level lists */ position: absolute; background: #BDCAB5; width: 10em; left: -999em; top: 2em; /* using left instead of display to hide menus because display: none isn't read by screen readers */}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */ left: auto;}

#content {clear: left;}

#nav #home a {width:29px;padding: 0px 0px 0px 38px;}
#nav #aboutus a {width:46px;}
#nav #courses a {width:79px;}
#nav #memberships a {width:79px;}
#nav #guestservices a {width:103px;}
#nav #newsandevents a {width:103px;}

musher

01-10-2005, 08:50 PM

kidtone I checked this out in IE6 works fine, this is one example of code u need for a down menu (with your menu).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<title>Drop down menu</title>

<style type="text/css">

body {
font-family: arial, helvetica, serif;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#nav a {
display: block;
width: 10em;
}

#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
position: absolute;
background: white;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
clear: left;
color: #ccc;
}

</style>

<script type="text/javascript"><![CDATA[//><!]]></script>

</head>
<body>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="#">Courses</a>
<ul>
<li><a href="courses.html">Grande View 9</a></li>
<li><a href="courses.html">The Cove 9</a></li>
<li><a href="courses.html">The Pines 9</a></li>
</ul>
</li>
<li><a href="#">Memberships</a>
<ul>
<li><a href="#">Join our Newsletter</a></li>
<li><a href="membership_programs.html">Membership Programs</a></li>
</ul>
</li>
<li><a href="#">Guest Services</a>
<ul>
<li><a href="event_hosting.html">Event Hosting</a></li>
<li><a href="grand_view_grille.html">Grand View Grille</a></li>
<li><a href="golf_academy.html">Golf Academy</a></li>
</ul>
</li>
<li><a href="#">News & Events</a>
<ul>
<li><a href="shamrock_invitational.html">Shamrock Invitational</a></li>
<li><a href="tournament_schedule.html">Tournament Schedule</a></li>
</ul>
</li>
<li><a href="#">News & Events</a>
<ul>
<li><a href="carolina_charm.html">Carolina Charm</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="scorecard.html">Scorecard</a></li>
<li><a href="javascript:popUp('gallery/photogallery.html')">Photo Gallery</a></li>
</ul>
</li>
</ul>
</body>
</html>

kidtone

01-10-2005, 11:24 PM

Thanks your a lifesaver I was about to have to rethink the design of the navigation completely. Looks like it works so far.