Hello All, Im a beginner at sitepoint.
I need a little help here.
I’ve a css drop down menu in joomla:
<ul class="menu">
<li id="current" class="active item1"><a href="http://localhost/"><span>HOME</span></a></li>
<li class="parent item7"><a href="#"><span>ABOUT US</span></a>
<ul>
<li class="item9"><a href="#"><span>Board of Members</span></a></li>
<li class="item10"><a href="#"><span>In the News</span></a></li>
<li class="item11"><a href="#"><span>Announcements</span></a></li>
<li class="item12"><a href="#"><span>Job Vacancies</span></a></li>
</ul>
</li>
<li class="item13"><a href="#"><span>PARTNERS</span></a></li>
<li class="item8"><a href="/Mission"><span>MISSION</span></a></li>
<li class="parent item14"><a href="#"><span>LOGISTICS</span></a>
<ul>
<li class="item15"><a href="#"><span>Fright Transportation</span></a></li>
<li class="item16"><a href="#"><span>Distinations</span></a></li>
<li class="item18"><a href="#"><span>Routes</span></a></li>
</ul>
</li>
<li class="item17"><a href="#"><span>CONTACT</span></a></li>
</ul>
And the CSS:
#mainmenu {
background:url(../images/mainmenu-bg.png) repeat-x #FFF;
height:67px;
width:503px;
float:right;
}
.menu {
border:none;
border:0px;
margin:0px;
padding:0px;
font: 12px Arial, Helvetica, sans-serif bold;
font-size:12px;
font-weight:bold;
list-style:none;
height:67px;
}
.menu ul {
height:67px;
list-style:none;
margin:0;
padding:0;
}
.menu li {
float:left;
padding:0px;
}
.menu li a:hover {
}
.menu li a {
background:url("../images/mainmenubg-sep.gif") center right no-repeat;
color:#939393;
display:block;
font-weight:bold;
line-height:35px;
margin:0px;
padding:16px 12px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #68af44 url("../images/mainmenu-bg-hover.png") repeat-x;
color:#FFFFFF;
text-decoration:none;
}
.menu .parent:active, .menu .parent:hover, .menu .parent:active:hover, {
background: #68af44 url("../images/mainmenu-bg-hover.png") repeat-x;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul {
background:#fff;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:200px;
z-index:200;/*top:1em;
/*left:0;*/
}
.menu li:hover ul {
display:block;
}
.menu li li {
border-bottom:1px solid #e8e8e8;
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
}
.menu li ul a {
display:block;
height:35px;
font-size:11px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background:#68af44 url("../images/mainmenu-bg-hover.png") bottom repeat-x;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p {
clear:left;
}
.menu li.parent active a {
color: #e32;
background-color:#330;
}
So it gives me an output like this which is pretty annoying:
Please help.