Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Navigation bar(dropdown) not working correctly?

    The navigation bar was working fine before I added the background behind it.

    http://essentialgroup.info/Memberarea.php

    As you hover over one of the buttons, the drop down will appear detached from the menu, to the right.

    I'm guessing I screwed the CSS up somewhere as I was messing with the background.

    Hoping someone can shed some light on this, spent 2 days looking at this and its been driving me nuts.

    If anymore info is required let me know.

    Thank you!

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    339
    Thanks
    3
    Thanked 35 Times in 35 Posts
    The navigation bar was working fine before I added the background behind it.
    I'd be surprised, because the way to make a drop-down menu is with a nested list. Your menu is far from that. Here's how to do it: Create a Drop-down/Fly-out Menu with CSS.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Frankie View Post
    I'd be surprised, because the way to make a drop-down menu is with a nested list. Your menu is far from that. Here's how to do it: Create a Drop-down/Fly-out Menu with CSS.
    Thanks for the link, will check it out

    But the navigation was working perfect before. Here is another site i put it onto yesterday, without the image I mentioned: http://how2dev.net/IndexTemp.html

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    339
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Here is another site i put it onto yesterday, without the image I mentioned: http://how2dev.net/IndexTemp.html
    I see: a heavily Javascript-driven menu, that's how that works. But you don't need that -- with just one very short script to get it working in IE6, you can have a much (c)leaner menu.

  • #5
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Been playing around with this menu you linked now, would you be able to give me a little help getting this menu to look the same as this menu? Not having much luck with these menu's. All i want is the background the same, the dropdown style ill figure out later.

    Old: http://www.essentialgroup.info/Memberarea.php

    new:

    Code:
    #navDiv ul {
        list-style-type: none;
        margin: 0; 
       
        padding: 0px;
    
    
        }
    #navDiv ul ul {
        left: 0;
    }
    #navDiv ul li {
        float: left;
            background: url(http://www.essentialgroup.info/chrometheme/chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
        width: 120px;
        position: relative;
        }
    #navDiv ul ul { 
        display: none
        }
    #navDiv ul li:hover ul, 
    #navDiv ul li.jsHover ul {
        display: block;
        position: absolute;
        }
    #navDiv a { 
        display: block;
        padding: 0 5px 0 5px;
        width: 110px;  /* for IE6; <li> width minus padding and border */
        background: white;
        color: blue;
        text-decoration: none;  
        }
    #navDiv a:hover { 
        background: blue;
        color: white;
        }
    Code:
    <div id="navDiv">
        <ul>
          <li><a href="#">Hyperlink 1</a></li>
      <li onmouseover="this.className+=' jsHover'" onmouseout="this.className=this.className.replace(' jsHover','')"><a href="#">Hyperlink 2 &darr;</a>
                <ul>
                    <li><a href="#">Hyperlink 2-A</a></li>
                    <li><a href="#">Hyperlink 2-B</a></li>
                    <li><a href="#">Hyperlink 2-C</a></li>
                </ul>
            </li>
          <li><a href="#">Hyperlink 3</a></li>
        </ul>
    </div>
    Thank you!


  •  

    Posting Permissions

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