priyadeva Posted March 21, 2010 Share Posted March 21, 2010 Hi everybodyI have a problem with the sub menu item backgroundPlease take a look at my sitehttp://socsci.tau.ac.il/mainspirit/It’s a Joomla site with Artisteer templateAt the top menu, the sub menu item is on a fixed width backgroundEnd its making all the sub menu items to grow outside the site bordersI need to define a background that matches the length of its contentHere is the codeI will be gratefulThanksPriya/* begin MenuItem */.art-menu ul li{ clear: both;}.art-menu a{ position:relative; display: block; overflow:hidden; height: 28px; cursor: pointer; text-decoration: none; margin-right: 1px; margin-left: 1px;}.art-menu a .r, .art-menu a .l{ position:absolute; display: run-in; top:0; z-index:-1; height: 84px; background-image: url('../images/MenuItem.png');}.art-menu a .l{ left:0; right:6px;}.art-menu a .r{ width:412px; right:0; clip: rect(auto, auto, auto, 406px);}.art-menu a .t {font-family: Tahoma, Arial, Helvetica, Sans-Serif;font-size: 12px;font-style: normal;font-weight: normal;text-transform: uppercase; color: #000000; padding: 0 10px; margin: 0 2px; line-height: 28px; text-align: center;}.art-menu a:hover .l, .art-menu a:hover .r{ top:-28px;}.art-menu li:hover>a .l, .art-menu li:hover>a .r{ top:-28px;}.art-menu li:hover a .l, .art-menu li:hover a .r{ top:-28px;}.art-menu a:hover .t{ color: #CCDDFF;}.art-menu li:hover a .t{ color: #CCDDFF;}.art-menu li:hover>a .t{ color: #CCDDFF;}.art-menu a.active .l, .art-menu a.active .r{ top: -56px;}.art-menu a.active .t{ color: #FFFFFF;}/* end MenuItem *//* begin MenuSubItem */.art-menu ul a{ display: inherit; text-align: center; white-space: nowrap; height: 26px; width: 280px; overflow: inherit; line-height: 26px; margin-right: 5px; background-color:#71c4f6; background-position: left top; background-repeat: repeat-x; border-width: 1px; border-style: ridge; border-color: #ffffff;}.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span{ display: list-item; float: none; margin: inherit; padding: inherit; background-color:#71c4f6; text-align: inherit; text-decoration: inherit; }.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span{ text-align: right; text-indent: 12px; text-decoration: none; line-height: 26px; color: #000000;font-family: Tahoma, Arial, Helvetica, Sans-Serif;font-size: 12px;font-style: normal;font-weight: normal;}.art-menu ul ul a{ margin-left: auto; }.art-menu ul li a:hover{ color: #CCDDFF; background-position: -26px 0; background-color:#003399; }.art-menu ul li:hover>a{ color: #CCDDFF; background-position: -26px 0; background-color:#003399; }.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span{ color: #CCDDFF; }.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span{ color: #CCDDFF; clip: rect(auto, auto, auto, 406px);}/* end MenuSubItem */ Link to comment Share on other sites More sharing options...
thescientist Posted March 21, 2010 Share Posted March 21, 2010 I'm not sure if I'm seeing it. what browser are you using? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.