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


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:


/* 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;

// 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);
Any advice would be greatly appreciated.