• 0

CSS Navigation Problem


Question

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.

Link to comment
https://www.neowin.net/forum/topic/791696-css-navigation-problem/
Share on other sites

6 answers to this question

Recommended Posts

  • 0

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.

  • 0

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;

}

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Both a game adaptation and it's on Amazon I'll set my hopes low
    • You shut your mouth you young fart, that was just a few years ago, lol.
    • Good effort, but unfortunately not very useful in the real world, since it doesn't support UEFI - which is a major drawback. More than that, most PCs these days have Secure Boot enabled by default, so unless you're tech savvy, the average joe is not going to disable Secure Boot - which means automated Windows > Linux migration programs like this will not work. And if you're tech savvy enough to know how to disable Secure Boot, then you're tech savvy enough to just flash a USB drive and install Linux the usual way - after all, the actual installation process is just point-and-click. So I don't see a use case here to be honest, especially considering the lack of UEFI support - especially when you consider that more and more Linux distros are completely dropping BIOS support (eg Fedora dropped it back in 2022). So this program is a bit too late to the party.
    • I agree with open rights group that the age check companies should be regulated but action does need to be taken imo, they may be called irresponsible parents but the fact is that many don't know how to set up blocks. Why should kids suffer because their parents don't know something? I think the UK has always been a bit like this. We don't say healthcare is your responsibility, we tax everyone and make people register with the NHS. We also don't expect everyone to brush their teeth to maintain dental health, we just put fluoride in their water assuming people aren't brushing enough, because some probably aren't or aren't doing it properly. In general, this way of doing things works.
  • Recent Achievements

    • One Month Later
      Falcon.ai earned a badge
      One Month Later
    • Week One Done
      Falcon.ai earned a badge
      Week One Done
    • Dedicated
      EYEREX earned a badge
      Dedicated
    • First Post
      Electronic Person earned a badge
      First Post
    • Week One Done
      CyberCeps666 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      629
    2. 2
      ATLien_0
      237
    3. 3
      Xenon
      165
    4. 4
      neufuse
      142
    5. 5
      +FloatingFatMan
      123
  • Tell a friend

    Love Neowin? Tell a friend!