2016-01-21 71 views
0

下拉菜单对我的主题工作正常,但对于最后一个孩子子菜单有点问题,例如修复文本位置不能移动到另一个子菜单的顶部,以及有关如何删除最后一个子菜单的透明背景,如我的概念: drop-down menu在wordpress中定位最后一个孩子的下拉菜单?

CSS的下拉菜单

.navbar-default { 
    box-shadow: 0 2px 10px rgba(0,0,0,0.67); 
    background: #fff; 
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…IxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdG9wVG9Cb3R0b21HcmFkaWVudCkiLz48L3N2Zz4=); 
    background: -moz-linear-gradient(top, #fff 0, #e6e6e6 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100%, #e6e6e6)); 
    background: -webkit-linear-gradient(top, #fff 0, #e6e6e6 100%); 
    background: -o-linear-gradient(top, #fff 0, #e6e6e6 100%); 
    background: -ms-linear-gradient(top, #fff 0, #e6e6e6 100%); 
    background: linear-gradient(to bottom, #fff 0, #e6e6e6 100%); 
    width: 100%; 
    height: 44px; 
    border-width: 0 0 1px; 
    border-style: solid; 
    border-color: #fff; 
    position: relative; 
    margin-top: 5px; 
} 

.navbar-default .navbar-collapse, .navbar-default .navbar-form { 
    border-color: #e7e7e7; 
    position: relative; 
    z-index: 20; 
} 

.navbar-nav { 
    background: url(img/logo.png) no-repeat scroll right/ 91% 100%; 
    z-index: 0; 
    position: absolute; 
    left: 0; 
    right: 0; 
    height: 0 
} 

.navbar-nav a { 
    display: block; 

} 

.navbar-nav li { 
    display: block; 
    /* margin: 0 47%; */ 
    padding: 0; 
    /* width: 180px; */ 
    /* height: 138px; */ 
    /* text-indent: -999em; */ 
    direction: ltr; 
    float: none; 
} 

.navbar-nav li:hover .dropdown-menu { 
    opacity: 1; 
    top: 105px; 
    visibility: visible; 
} 

.navbar-default .navbar-nav>li>a { 
    color: transparent; 
    background: url(img/logo.png) no-repeat scroll right/ 91% 100%; 
    display: block; 
    margin: -33px auto 0 auto; 
    width: 180px; 
    height: 150px; 
    /* text-indent: -999em; */ 
    direction: ltr; 
    float: none; 
} 

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { 
    background: url(img/logo.png) no-repeat scroll right/ 91% 100%; 
    color: transparent; 
    display: block; 
    margin: -33px auto 0 auto; 
    width: 180px; 
    height: 150px; 
    direction: ltr; 
    float: none; 
} 

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { 
    color: transparent; 
} 

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { 
    background: url(img/logo.png) no-repeat scroll right/ 91% 100%; 
    color: transparent; 
    display: block; 
    margin: -33px auto 0 auto; 
    width: 180px; 
    height: 150px; 
    direction: ltr; 
    float: none; 
    } 

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { 
    color: transparent; 
    background-color: transparent; 
} 

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { 
    background: url(img/logo.png) no-repeat scroll right/ 91% 100%; 
    color: transparent; 
    display: block; 
    margin: -33px auto 0 auto; 
    width: 180px; 
    height: 150px; 
    direction: ltr; 
    float: none; 

} 


.navbar-nav ul { 
} 

.nav .open>a, .nav .open>a:hover, .nav .open>a:focus { 
    /* background-color: #eeeeee; */ 
    border-color: #337ab7; 

} 

.navbar-nav>li>.dropdown-menu { 
    margin: -1px 0 0 45%; 
    border-top-right-radius: 0; 
    border-top-left-radius: 0; 

} 

.dropdown-menu { 
    /* background: url(img/submenu.png) no-repeat scroll right/ 91% 100%; */ 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 1000; 
    display: none; 
    float: left; 
    min-width: 153px; 
    padding: 1px 0; 
    margin: 2px 0 0 0; 
    list-style: none; 
    font-size: 14px; 
    text-align: center; 
    background-color: #5c4d4a; 
    border: 1px solid #ccc; 
    border: 1px solid rgba(0,0,0,0.15); 
    border-radius: 4px; 
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175); 
    box-shadow: 0 6px 12px rgba(0,0,0,0.175); 
    background-clip: padding-box; 
    opacity: 0; 
    top: 35px; 
    visibility: hidden; 
    -webkit-transition: all .25s ease; 
    -moz-transition: all .25s ease; 
    -ms-transition: all .25s ease; 
    -o-transition: all .25s ease; 
    transition: all .25s ease; 
} 

.dropdown-menu li a { 
    display: block; 
    background: url(img/submenu.png) no-repeat scroll right/ 104% 108%; 
    padding: 10px 20px; 
    clear: both; 
    font-weight: normal; 
    line-height: 1.428571; 
    color: #fff; 
    white-space: nowrap; 

} 
.dropdown-menu li a:hover, 
.dropdown-menu li a:focus { 
    background: url(img/submenu.png) no-repeat scroll right/ 104% 108%; 
    color: #ccc; 
    text-decoration: none; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); 
     -webkit-transition: all .25s ease; 
     -moz-transition: all .25s ease; 
     -ms-transition: all .25s ease; 
     -o-transition: all .25s ease; 
      transition: all .25s ease; 
} 

.dropdown-menu li:last-child a { 
    display: block; 
    background: url(img/submenu.png) no-repeat scroll right/ 104% 108%; 
    padding: 10px 20px; 
    clear: both; 
    font-weight: normal; 
    line-height: 1.428571; 
    color: #fff; 
    white-space: nowrap; 

} 

.dropdown-menu li:last-child a:hover, 
.dropdown-menu li:last-child a:focus 
{ 

    color: #000; 
    text-decoration: none; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); 
     -webkit-transition: all .25s ease; 
     -moz-transition: all .25s ease; 
     -ms-transition: all .25s ease; 
     -o-transition: all .25s ease; 
      transition: all .25s ease; 
} 

.dropdown-menu ul { 

list-style: none; 

} 

如需进一步信息,您可以检查出my theme。以前感谢。

回答

1

如果你想放的文字在上面,你可以在你的.dropdown-menu li:last-child a更改为类似:

.dropdown-menu li:last-child a { 
    padding-left: 20px; 
    padding-right: 20px; 
    padding-top: 10px; 
    padding-bottom: 52px; 
} 

如果要删除透明背景,但你有菜单阴影.dropdown-menu必须在机器人添加此规则汤姆:

.dropdown-menu { 
    ... 

    border-bottom-right-radius: 77px; 
    border-bottom-left-radius: 77px; 
} 
0

变化

.dropdown-menu li:last-child a { 
    padding: 31px 20px; 
} 

.dropdown-menu li:last-child a { 
    padding-left: 20px; 
    padding-right: 20px; 
    padding-top: 10px; 
    padding-bottom: 70px; 
} 
0

以获得所需的效果你可以:

.dropdown-menu li:last-child a { 
    padding: 8px 20px 62px 20px 
}