Taurus
11-04-2008, 10:07 AM
I want slightly adjust main level menu, in Joomla.
original css was:
a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(../images/menu_bg.png) no-repeat;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ccc;
text-align: left;
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: 100%;
text-decoration: none;
}
a.mainlevel:hover {
background-position: 0px -25px;
text-decoration: none;
color: #fff;
}
I want to remove menu background image, and replace it with color swap. One question: what do background-position: 0px -25px; Does it related to background image? Should I remove it also, am I correct?
So what I have now:
a.mainlevel:link, a.mainlevel:visited {
display: block;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #333333;
text-align: left;
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: auto;
text-decoration: none;
border-bottom: 1px solid #cccccc;
}
a.mainlevel:hover {
text-decoration: none;
color: #fff;
background: #900000;
}
original css was:
a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(../images/menu_bg.png) no-repeat;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ccc;
text-align: left;
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: 100%;
text-decoration: none;
}
a.mainlevel:hover {
background-position: 0px -25px;
text-decoration: none;
color: #fff;
}
I want to remove menu background image, and replace it with color swap. One question: what do background-position: 0px -25px; Does it related to background image? Should I remove it also, am I correct?
So what I have now:
a.mainlevel:link, a.mainlevel:visited {
display: block;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #333333;
text-align: left;
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: auto;
text-decoration: none;
border-bottom: 1px solid #cccccc;
}
a.mainlevel:hover {
text-decoration: none;
color: #fff;
background: #900000;
}