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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I need a mega menu to stick from right to left on some buttons

    I have been working for a while on trying to build a mega menu for the college I work at. It's almost done so I can stick in in the page however the last two buttons I need to stick to the bottom right of the button instead of the bottom left. I can see in the code where I think to change that however when I do it changes all of them to go the other way. As you can see from my example I need especially the last two buttons to start from the opposite end of the button so they don't go off the page.
    http://www.losmedanos.edu/toTrash/me...htandleft.html

    I think in the code this is it were I change both left to right however how to a define in the code only the last two go the other way? I know that the drop menu is asking for the class of sub and I tried to duplicate that and assign another class name like classright but the only thing that happened is the menu didn't work anymore.

    I am not real fluent in CSS but I am assuming below is where I change it. How do I write it?


    ul#topnav li .sub {
    position: absolute;
    top: 37px;
    left: 0;
    background:url(images/graybox.png) ;
    padding: 20px 20px 20px;
    float: left;
    /*--Bottom right rounded corner--*/
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    /*--Bottom left rounded corner--*/
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    display: none;
    }

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    If you make your html something like:

    <ul id="topnav">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li class="menuright">...</li>
    <li class="menuright">...</li>
    </ul>

    and add new css:

    Code:
    ul#topnav li.menuright .sub{right:0;left:auto}
    Then for the left hand two li elements the megamenu should start from the bottom right of the li - the left:0 in your css is overridden by the more specific css.


  •  

    Posting Permissions

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