drop down navigation problem

[sarb]

Hi,

I am working on a project located at the following link:

http://www.sitesbysarah.com/brownbottle/bb_about.html

I found instructions online for horizontal drop down navigation which is just what I was looking for. But I am having some problems implementing it. I have never worked with a drop down menu before.

I have two items that have a drop down menu - "menu link" and "contact link" right now. Might add more later. When I click on the "menu" link, the 2nd tier links appear over to the left. This is too far away from the main link and when I drop down to click on them, they dissappear. Can't reach them fast enough. I tried "float: center;" but that didn't really work for me either.

The second part is that on the hover, the green border on the bottom extends out further than the word. I just want it to underline the word, not the padded area around it. Is there a way to change that? The only working links on this page are the "home" link and the "about" links right now.


I will put the css code below:

<style>

/* These styles create the dropdown menus. */
#navcontainer {
   position: absolute;
   top: 120px;
   right: 100px;
   margin: 0;
   padding: 0;}
#navbar li {
   list-style: none;
   float: left; }
#navbar li a {
   display: block;
   padding: 3px 15px;
   text-transform: uppercase;
   text-decoration: none; 
   color: #ffffff;
   font-weight: bold; }
#navbar li a:hover {
      border-bottom: 3px solid #bcbf54;
      color: #bcbf54;   
   }
#navbar li ul {
   display: none;  }
#navbar li:hover ul, #navbar li.hover ul {
   position: absolute;
   display: inline;
   left: 0px;
   margin: 0;
   padding: 0; }
#navbar li:hover li, #navbar li.hover li {
   float: left; }
#navbar li:hover li a, #navbar li.hover li a {
   color: #bcbf54; }
#navbar li li a:hover {
   color: #bcbf54;
    }
</style>

<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" hover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" hover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

Any advice would be greatly appreciated.

Thanks,
sarb

[Paul O'B]

Hi,

You need to add position:relative to the header so that your absolutely placed nav is positioned in relation to the header and not the viewport.

I would center the text under the dropline otherwise you are going to have to add classes to each menu if you want them to drop under each parent. Don;t change the size of an element on hover or the page will jump. If you add a border on hover then make sure that you eitehr already have a border in the current background colour so that there is n jump when changed or add and remove padding to fill the space.

To make the border match the text width then remove the side padding from the anchor and apply it to the list element instead.

#header{
    position:relative;/* stacking context for absolute menu*/
}

/* These styles create the dropdown menus. */
#navcontainer {
    position: absolute;
    top: 97px;
    right: 140px;
    margin: 0;
    padding: 0;
}
#navbar li {
    list-style: none;
    float: left;
    padding:0 15px;
}
#navbar li a {
    display: block;
    padding: 3px 0;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    padding-bottom:6px;
}
#navbar li a:hover {
    border-bottom: 3px solid #bcbf54;
    color: #bcbf54;
    padding-bottom:3px;
}
#navbar li ul {
    display: none;
}
#navbar li:hover ul, #navbar li.hover ul {
    position: absolute;
    display:block;
    margin: 0;
    padding: 0;
    width:700px;
    left:-50px;
    text-align:center;
}
#navbar li:hover li, #navbar li.hover li {
    float: none;
    display:inline;
}
#navbar li:hover li a, #navbar li.hover li a {
    color: #bcbf54;
    display:inline;
 
}
#navbar li li a:hover {
    color: #bcbf54;
}

[sarb]

Thank you so much. Working much more smoothly now. What would the benefits of "add classes to each menu" be?

Thanks,
Sarb

[Paul O'B]

Thank you so much. Working much more smoothly now. What would the benefits of "add classes to each menu" be?

Thanks,
Sarb

If you added classes to each menu then you could start the drop down under each parent menu by adding a different margin to the first of each line.

[sarb]

Is there an example of this on the internet anywhere?

Thanks,
sarb

[Paul O'B]

You might find something suitable at Stu's site but there's hundreds to look through

All you'd need to do is add a different class to the first list item in each nested ul and give it a left margin that makes it match up with its parent but taking care that the links still fit on the same line.

The centered approach is easier though.