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 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Exclamation CSS3 Dropdown Menu Issues

    I’ve added the following code to my site ( http://webdesignerwall.com/tutorials/css3-dropdown-menu ); here’s a copy of my CSS – http://pastebin.com/Dn38bB0Y

    On the site, when I hover over the LI that is supposed to “drop” it puts the dropdown list in the top left corner – if I change the positioning from ABSOLUTE to REALTIVE it puts the menu in the “right” location, but it acts as if there is a space for it, stretching the menu and moving the last top-level item to a second row.

    The demo of the site can be found here - http://webbetasite.com/family

    Please help,

    Thanks

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello andwfara1,
    Look what happens when you make the parent li relative:
    Code:
    #header-container #header-content .top-nav ul.menu li.menu-item, #header-container #header-content .top-nav ul.menu li.current-menu-item {
        color: #5F4D5A;
        float: left;
        font-family: Arial;
        font-size: 12px;
        height: 20px;
        margin-left: 3px;
        margin-right: 10px;
        position: relative;
    }
    You will need to be more specific as that bit I posted made everything relative and you only want that one li to be relative.
    You will also need to adjust the positioning of the dropped ul since top: 50px; isn't quite right.
    Last edited by Excavator; 11-14-2012 at 07:09 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    andwfara1 (11-14-2012)

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    14
    Thanked 0 Times in 0 Posts
    I added Position:relative to the LI you suggested and nothing changed - am I missing something?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Your dropped ul is not in the upper left corner anymore. Am I missing something?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    14
    Thanked 0 Times in 0 Posts
    nvm - chrome was displaying cached content - sorry about that thanks for the help!!
    Love learning something new every day.

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    14
    Thanked 0 Times in 0 Posts
    do you know how i can make it so that when SERVICES dropdown is active that the hover state that shows the "tab" remains highlighted?


  •  

    Posting Permissions

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