SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    drop down navigation problem

    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:

    Code:
    <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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    #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;
    }

  3. #3
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much. Working much more smoothly now. What would the benefits of "add classes to each menu" be?

    Thanks,
    Sarb

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sarb View Post
    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.

  5. #5
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there an example of this on the internet anywhere?

    Thanks,
    sarb

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •