View Full Version : I need a mega menu to stick from right to left on some buttons

Aug 16th, 2010, 08:07 AM
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.

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;

Aug 16th, 2010, 08:44 PM
If you make your html something like:

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

and add new css:

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.