CSS Navigation Problem

[The Scarecrow]

I have developed a menu system that works except one little quark I cant figure out. If you roll over where the drop down menu should be it appears. Do you don't even have to rollover the buttons to make the menu appear is there a way to fix that? Have a made CSS errors? Any help would be greatly appreciated. Thanks.

[Mathachew Veteran]

Do you have a page where we can view it? I think you need to revise your question because it's a bit difficult to understand exactly what you mean.

[The Scarecrow]

  Mathachew said:

Do you have a page where we can view it? I think you need to revise your question because it's a bit difficult to understand exactly what you mean.

Here is the sample link.

[bolerodan]

Now I dont know the solution off by hand, but I can tell you where to possibly look. When viewing your site with Chromes inspector or Firebug for that matter, each <li> has the height of the nested <ul> even though you cant see it. So you must have a hover event on each <li> element, but the li element extends much farther down than the button. If you use firebug and hover over that element you will see what I mean.

[The Scarecrow]

My navigation code for the first button is this:

<div id="navigation">

<ul id="nav">

<li><a href="#" id="whoweare">Who We Are</a>

<ul id="who">

<li><a href="#">> 4-H Purpose</a></li>

<li><a href="#">> 4-H FAQ</a></li>

<li><a href="#">> 4-H Staff</a></li>

</ul>

</li>

</ul>

</div>

The CSS code is this:

@charset "utf-8";

/* CSS Document */

/* NAVIGATION */

#navigation {

float: left;

position:absolute;

z-index: 500;

width:850px;

top:106.5px;

background-image:url(../images/nav_bkg.jpg);

background-repeat:no-repeat;

margin-left:-10px;

height: 40px;

/*left:3px;*/

}

/* NAVIGATION */

ul#nav {

/*border-left: 1px dashed #999999;*/

margin: 0;

padding: 0;

list-style: none;

float: left;

font-size:75%;

font-family:Arial, Helvetica, sans-serif;

}

#nav li {

float: left;

width: 11em;

}

#nav a {

text-decoration: none;

color: #FFFFFF;

font-size: 1em;

text-transform: uppercase;

/*border: 1px dashed #999999;*/

border-right: 1px solid #000000;

display: block;

text-align:center;

padding-left:1px;

padding-right:5px;

padding-top:10px;

padding-bottom:10px;

/*padding: 7px 1px 7px 10px;*/

background: url(images/button_up.jpg) no-repeat left center;

}

#nav a:hover {

/*background: url(images/button_over.jpg) no-repeat left center;*/

background-image:url(../images/button_over.jpg);

background-repeat:no-repeat;

background-position:center center;

font-weight: bold;

}

/* special formatting for home page link

a#whoweare {

background: #E7E7E7 url(images/button_up.jpg) no-repeat left center;

}*/

/* styles for the "you are here" buttons

#home #nav a#whoweare,

#feature #nav a#getinvolved {

background: #FFFFFF url(images/button_over.jpg) no-repeat left center;

padding-right: 1px;

padding-left: 1px;

font-weight: bold;

}*/

#home #nav a#whoweare:hover,

#feature #nav a#getinvolved:hover {

color: #B2F511;

}

/* IE Fixes */

/* force hover on entire width of link */

* html #nav a {

height: 1px;

}

.preload {

background-image:url();

display: none;

}

#nav li ul {

position: relative;

width: 7em;

left: -300em;

top:5px;

background-color: #FFF;

}

#nav li ul li {

list-style:none;

}

#nav li ul a:link {

text-decoration: none;

color: #006633;

font-size: 95%;

/*border: 1px solid #000000;*/

border:none;

display: block;

text-align:left;

padding-left:1px;

padding-right:5px;

padding-top:5px;

padding-bottom:5px;

background:#fff;

width:11em;

}

#nav li. opportunities a:link {

width:32em;

}

#nav li ul a:hover {

font-weight: bold;

}

#nav li:hover ul {

left: -3em;

}

#nav li:hover ul, #nav li.sfhover ul {

left: -3em;

}

[fall3n]

instead of using visability: hidden, use display: none. Visibility hidden only hides the element, but the space it "takes up" is still present. Display none will actually not display anything and the space it takes up does not exist.

[Kalint]

  The Scarecrow said:

Here is the sample link.

I just learned people still use Coldfusion.