...

View Full Version : mega menu background color



kevinmc
06-11-2012, 03:00 PM
I am working with a megamenu in a joomla template. There is no background on my text except during rollover or selection. I would like the background to remain on at all times. (black to give contrast to light text)
Site-http://signed-in.com/strongholdmp.com/

Im willing to pay for help on this

The css Code is:


html {
direction: rtl;
}
/*logo*/
.menusys-left {
float: right;
width: 450px;
}
.menusys-right {
float: left;
width: 400px;
}
#menusys_mega li{
float:right;
margin: 0 0 0 10px;
}
#menusys_mega .megacol ul li a span.no-image {
background: url("../images/bg-megamenu-arrow.png") no-repeat 100% 50%;
padding: 0 10px 0 0px;
}
#menusys_mega .megacol ul li a:hover ,
#menusys_mega .megacol ul li a:focus span.no-image,
#menusys_mega .megacol ul li a:active span.no-image,
#menusys_mega .megacol ul li a.active span.no-image,
#menusys_mega .megacol ul li a.active:hover span.no-image,
#menusys_mega .megacol ul li a.active:active span.no-image,
#menusys_mega .megacol ul li a.active:focus span.no-image {
background: url("../images/bg-megamenu-arrow-active.png") no-repeat 100% 50%;
}
#menusys_mega .megacol ul.mega-ul {
padding: 0 10px 0 0;
}
#zt-logo {
left: auto;
right: 365px;
}


/*title*/
.outer3 h3.moduletitle {
padding: 0 10px 0 0;
}
.outer2 h3.moduletitle {
padding: 0 10px 0 0;
}

ul.menu li {
background: url("../images/zt-iner-bg-list-menu.png") repeat-x right top;
padding:0 15px 0 0;
}
ul.menu li a {
padding-left: auto;
padding-right: 0px;
}
ul.menu li a span {
background: url("../images/arrow_rtl.png") no-repeat right 50%;
padding-left: auto;
padding-right: 20px;
}

ul.menu2 li .man {
background: url("../images/zt-iner-icon-man.png") no-repeat scroll 95% 7px;
padding: 4px 30px 4px 10px;
}
ul.menu2 li .woman {
background: url("../images/zt-iner-icon-woman.png") no-repeat 95% 7px;
padding: 4px 30px 4px 10px;
}
/*col 1*/

#zt-col1 .jvcarousel-pagi {
float: left;
right: auto;
left: 10px;
}
#zt-col1 .readon {
float: right;
}

/*col 2*/
#zt-col2 .readon{
float:right;
}
#zt-col2 div.latestnewsitems img{
float:right;
}
#zt-col4 li.jv-article-title a {
float: right;
}
#zt-col4 .jv_news_wrap li.jv-article-title h4 a {
margin: 0 7px 0 0;
}

/*footer*/
#zt-footer-menu {
float: left;
width: 50%;
}
#zt-footer-menu ul {
float: right;
}
#zt-footer-menu ul li {
background: url("../images/zt-iner-hr-menu.png") no-repeat scroll right 50% transparent;
float: left;
}
#zt-footer-menu ul li.first {
padding: 0 10px 0 0px !important;
}
#zt-footer-menu ul li.last {
padding: 0 0 0 10px !important;

SB65
06-11-2012, 03:11 PM
The following will give you a background colour on your left and right menus in their entirety:


.menusys-left {
background-color: red;
float: left;
width: 450px;
}
.menusys-right {
background-color: blue;
float: right;
width: 400px;
}


or, to give each button its own background:


#menusys_mega li {
background: none repeat scroll 0 50% green;
display: block;
float: left;
height: 28px;
margin: 0 10px 0 0;
padding: 0;
}

Adjust colours to taste, obviously....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum