How can I fix my drop down? - css

Question

if you open the following link
http://dev.scopedesign.com/client/nyfarmersmarket_02/
you find an navigation bar if you go on "ABOUT US" you will see a drop down..
then you se the problem in drop down
now i want to give you a little idea from how i make this..
I am working on joomla CMS, & i do some changes in navigation module to get my style now the follwing CSS i used for this.. the problem is it is displaying the .parent.active a
background in drop downs i dont want that for this purpose i made .parent.active a ul
but it doesnt work..
you can check this how it works by inspect element in the browser.
.parent.active a{
background-image:url(../images/selected.png);
background-repeat:repeat-x;
padding-top:13px;
padding-bottom:13px;
}
.parent.active a ul{
background-image:none !important;
background-repeat:none;
padding-top:0px !important;
padding-bottom:0px !important;!
}
.menusan
{
/* Use these parameters to positions your menu. */
position: absolute;
// left: 10px;
}
.menusan, .menusan li, .menusan li ul { /* all lists */
padding: 0;
margin: 0;
// list-style: none;
display:block;
float:left;
}
.menusan li a{
padding-left:20px;
padding-right:18px;
}
.menusan li a:hover{
background-image:url(../images/selected.png);
background-repeat:repeat-x;
padding-top:13px;
padding-bottom:13px;
}
.menusan li{ /* all list items */
padding-top:11px;
padding-bottom:11px;
// padding-left:20px;
// padding-right:18px;
-moz-border-right:#537d28 groove 2px;
border-right:#7cb43f groove 2px;
[border-right:#537d28 groove 2px;
border-right:#7cb43f groove 2px;/
border-right:#7cb43f groove 2px;]
}
.menusan li ul { /* second-level lists */
//top:35px;
margin-top:13px;
float:left;
position: absolute;
border: none;
left: -98%; /* Use left instead of display to hide menus; display: none isn’t read by screen readers. */
}
.menusan li ul li{
display:list-item;
float:none;
border: none;
background-color:#537d28;
color:#fff;
//padding:10px 10px 24px 10px;
}
.menusan li ul li:hover{
display:list-item;
float:none;
background-color:#96c73d;
}
.menusan li ul li a{
display:block;
float:left;
}
.menusan li ul li a:hover{
display:block;
float:left;
background-color:#96c73d;
}
.menusan li:hover ul, .menusan li.sfhover ul { /* lists nested under hovered list items */
left: auto; /* change is to 10px, 20px, etc for indenting the sub menu */
border: none;
display:block;
float:left;
}
/* **************** Dropdown Menu styling end here ***************/
One thing i specialy want to let you know guys that it is difficult to make div in it or cheange style name because it is a dynamic module.

Answer 1

Cleaned up and fixed your CSS, try this:
.navigation {
background-color:#537D28;
color:#fff;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
height:40px;
margin-bottom:0.6em;
width:100%;
}
.menusan {
margin: 0;
list-style-type: none;
font-weight:700;
float: left;
color:#fff;
}
.menusan > li {
margin:0;
float: left;
border-right:1px groove #7cb43f;
position:relative;
}
.menusan li a {
display:block;
height:40px;
line-height:40px;
padding:0 25px;
text-decoration:none;
color:#fff;
}
.menusan .active {
background: url("http://dev.scopedesign.com/client/nyfarmersmarket_02/templates/nyfm/images/selected.png") repeat-x center center;
}
.menusan li a:hover {
background: url("http://dev.scopedesign.com/client/nyfarmersmarket_02/templates/nyfm/images/selected.png") repeat-x center center;
}
.menusan li.parent ul {
position:absolute;
z-index:9999;
top:40px;
left:0;
display:none;
background-color:#537D28;
}
.menusan li.parent:hover ul {
display:block;
}
.menusan li.parent ul a {
float:left;
}
.menusan li.parent ul a:hover {
background-color:#70A835;
}
.menusan li.parent ul a {
width:55px;
}