Question

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

如果你继续“关于我们”，你会找到一个导航栏，你会看到一个下拉列表.. 然后你在下拉列表中找到问题

现在我想从你如何做到这一点给你一点想法.. 我正在研究joomla CMS，＆amp;我在导航模块中进行了一些更改，以获得我的风格，现在使用的是我用过的CSS ..问题是它显示的是 .parent.active a 下降的背景我不希望为此目的我做了 .parent.active一个ul 但它不起作用.. 您可以通过浏览器中的inspect元素检查它的工作原理。

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

有一件事我特别想告诉大家，因为它是一个动态的模块，所以很难在其中制作div或cheange style name。

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

我该如何修理我的下拉？

1 个答案: