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 Coder
    Join Date
    Mar 2009
    Posts
    89
    Thanks
    27
    Thanked 0 Times in 0 Posts

    Drop down menu not moving to right

    Hello!

    Been struggling with a drop down menu ...it won't cooperate.

    this is the code for the nav...
    http://pastebin.com/cvFRWX8m

    and if you mouseover on the Books button here
    http://bit.ly/SVGa5M

    you can see I'm getting a drop down, but the submenu isn't moving to the right side....

    help? =)

    thanks in advance

    carrie

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello intcon,
    Your dropped ul has the class .sub-menu. The ul dropped from there has the same class... should be something like .sub-menu2 and then positioned differently.

    Right now, you style both dropped menus the same.

    Following the way your CSS is already laid out, it looks like ul li ul.sub-menu li a:hover needs some different positioning.

    Try starting with this -
    Code:
    #nav ul li ul.sub-menu li a:hover{
    width: 200px;
    padding:5px;
      position: absolute;
      top: 100px;
      left: 200px;
    color:#ffffff;
    background:#B92604;
    font-size:10pt;
    text-transform:none;
    border-bottom:1px solid #ffffff;
    }
    ...edit// Actually, I think that is not specific enough and you should give the two ul's different id/class names so you can target them better with your CSS.
    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

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    89
    Thanks
    27
    Thanked 0 Times in 0 Posts
    oh dear....that made things interesting....lol....if you click here
    http://bit.ly/TBZn90
    you can see what happens when you mouseover books3

    ok..so if i start with this line of code
    Code:
    #nav ul li ul.sub-menu li {
    padding-left:20px;
    text-indent: 20px !important;}
    the first ul is the real ul....the second ul.sub-menu is the first drop down and then i'd need another ul.submenu2 li to add to that? like this?

    Code:
    #nav ul li ul.sub-menu li ul-submenu2 li{
    padding-left:20px;
    text-indent: 20px !important;}
    I'd really appreciate any help. =) I've been at this for days and I swear I'm just going in circles.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by intcon View Post
    oh dear....that made things interesting....lol....if you click here
    http://bit.ly/TBZn90
    you can see what happens when you mouseover books3
    Oh yes, I saw what it does. I'm sorry for not doing all the work for you but I was really hoping this would set you off in the right direction. Lots more things to fix still.
    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 2009
    Posts
    89
    Thanks
    27
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Oh yes, I saw what it does. I'm sorry for not doing all the work for you but I was really hoping this would set you off in the right direction. Lots more things to fix still.
    Sorry, not asking for someone to do all the work for me. =) And was hoping with the submenu2 i was going in the right direction.

    will keep looking.


  •  

    Posting Permissions

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