我該如何修復我的下拉菜單？

Question

如果您打開以下鏈接 http://dev.scopedesign.com/client/nyfarmersmarket_02/

，如果你去上「關於我們」，你會看到一個下拉你找到一個導航欄.. 那麼你現在瑟下來

在下降的問題，我想給你一點點從我如何使這個想法.. 我正在Joomla CMS，&我做了一些導航模塊的變化，以獲得我的風格，現在的follwing CSS我用這個..問題是它顯示.parent.active a 背景下降我不想爲此目的，我做了.parent.active a ul 但它不起作用.. 您可以通過檢查瀏覽器中的元素來檢查它是如何工作的。

.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 ***************/ 

有一件事我specialy不想讓你知道的傢伙，這是很難做出格的，或cheange風格的名字，因爲它是一個動態模塊。

Answer 1

清理，固定你的CSS，試試這個：

.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; 
}