我正在制作一个 bootstrap wordpress 主题，我在为主菜单添加纯平滑下拉菜单效果时遇到问题 like this example比如点击“M标志”打开下拉菜单后好像不能正常使用。您可以在此链接上查看我的主题 for more detail
这是我目前的 CSS 类:
.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;
}
.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 ul {
list-style: none;
}
最佳答案
所需的显着特征是:
.dropdown-menu {
opacity: 0;
position: absolute;
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;
}
nav li:hover .dropdown-menu {
opacity: 1;
top: 50px;
visibility: visible;
}
float:left 是一个 furfy，它被 position:absolute 覆盖了；
关于wordpress - 如何在 wordpress 中制作纯 CSS3 平滑下拉菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34847743/