Currently, I have dropdowns on a horizontal menu. The dropdowns line up below the parent link. I have placed the menu on the right of the page (similar to Drupal.org's links), with a page width of 880px. My question is this: if a dropdown will bleed over the right side of the page, is there a way to force the dropdown to stay within the confines of the page instead of bleeding outside and to the right of the page width? My goal here is to cater to lower resolutions. With the dropdowns bleeding over, a lower resolution screen would not be able to see the submenu links.

Please let me know if I need to provide a screenshot...thanks!

Comments

CrashNet’s picture

CrashNet commented

Any assistance on this issue would be greatly appreciated. Is there a way to edit the CSS to force dropdowns to remain within a given width and prevent them from bleeding off the page?

Thanks!

peterjmag’s picture

peterjmag commented

I had the same problem with a site. I fixed it by just adjusting the position of the dropdown ul under one specific parent item (in this case, the last item on the right in my main nav). Try adding something like this in your custom menu CSS:

ul.nice-menu li#menu-480 ul {
  margin-left: -150px;
}

Obviously, you'll need to customize that code to suit your site. If you need more help, let me know.

CrashNet’s picture

CrashNet commented

peterjmag...I will give it a go and report back...looks pretty straight forward css edit. I forgot I could pull the menu id number and edit it individually. Thanks!

CrashNet’s picture

CrashNet commented
Status: Active » Fixed

Peterjmag...it works great! Thanks for the assistance!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.