Results 1 to 6 of 6
  1. #1
    Join Date
    Sep 2012
    Posts
    23
    Plugin Contributions
    0

    Default Drop Down Menu Level 2 Position

    Hello All

    I was hoping someone could help me with what I hope to be a css solution.

    I have a navigation menu that I am almost proud of on a site that I am building here:

    http://www.thegooditcompany.com/dev/jacobeans/

    My issue is that as it's a three column display menu (as some categories will have many sub categories), the drop down menu position needs to change as the user hovers the right most categories. At the moment, the menu expands off the right hand side of the site.

    I can vary this using position:absolute and either left:0 (currently set) or right:0 to make correct on the right hand side, but incorrect on the left.

    Any way to make this automatic?

    Many thanks in advance

  2. #2
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Drop Down Menu Level 2 Position

    You can use the adjacent selector to change the position on the right dropdowns, like this:
    Code:
    #dropMenu ul.level2 {
        background-color: #B366B3;
        background-image: url("../images/l2top.png");
        background-position: center top;
        background-repeat: repeat-x;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        left: inherit;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 20px;
        position: absolute;
        right: inherit;
        top: 22px;
        z-index: 1000;
    }
    
    
    #dropMenu li+li+li+li ul.level2 {
        left: -37.5em;
        }
    This makes the fourth and following items drop 37.5em to the left of normal.

  3. #3
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Drop Down Menu Level 2 Position

    Or better:
    Code:
    #dropMenu li+li+li+li ul.level2 {
        right: 0;
        }

  4. #4
    Join Date
    Sep 2012
    Posts
    23
    Plugin Contributions
    0

    Default Re: Drop Down Menu Level 2 Position

    That's excellent. Thanks very much for this! Works perfectly

  5. #5
    Join Date
    Sep 2012
    Posts
    1
    Plugin Contributions
    0

    Default Re: Drop Down Menu Level 2 Position

    Greetings All,

    whitsolltd you did a great job with your navigation menu. I am very interested in doing something similar would you be able to provide resources to start?

  6. #6
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Drop Down Menu Level 2 Position

    It's one of the CSS Dropdown menus in Plugins, possibly customized some.

 

 

Similar Threads

  1. I want to make a dynamic drop-down menu for TOP LEVEL categories
    By knockoutcomputers in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 20 Aug 2010, 12:33 AM
  2. Attributes drop down position
    By rxalex in forum General Questions
    Replies: 1
    Last Post: 10 Jul 2010, 10:46 PM
  3. Add a 3rd level Drop Down
    By melindaf in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 10 Aug 2009, 07:25 AM
  4. position of drop down boxes
    By bettsaj in forum Templates, Stylesheets, Page Layout
    Replies: 6
    Last Post: 20 May 2009, 07:04 AM
  5. Header Drop down menu goes to level 2
    By neo2299 in forum General Questions
    Replies: 2
    Last Post: 16 May 2009, 07:48 PM

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
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR