I'm trying to set a background which spans all the menu items but doesn't span the full width of the site.
If I target the CSS at div#menu1 ul.rMenu li I get an individual background for each menu item (which doesn't look right because my design uses an inset box shadow around the menu as a whole, not the individual menu items).
Instead, I've used div#menu1 ul.rMenu, but it spans the full width of the layout, unless I set a limiting width value (which causes problems on mobile devices, if fall back fonts are a different size, etc.)
Website: www.cumbria-stone-walling.co.uk
Current CSS:
Code:
div#menu1 ul.rMenu { background-color: rgba(135, 135, 135, 0.25) !important; -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.25) inset; -moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.25) inset; box-shadow: 0 0 50px rgba(0, 0, 0, 0.25) inset; -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; width: 385px; height: 40px; margin-top: -6px; padding: 0px 0px 0px 0px; border: solid 1px transparent !important; }
Thanks, Paul