Css 悬停时,子菜单不会与菜单对齐
当我将鼠标悬停在菜单上时,我的菜单和子菜单出现一些问题。当鼠标悬停在菜单上时,子菜单不会对齐。它浮动在左侧,然后显示在第一个菜单的底部,因此当我选择最后一个菜单时,我无法选择它。这是参考图片 HTML(WORDPRESS)Css 悬停时,子菜单不会与菜单对齐,css,wordpress,drop-down-menu,menu,submenu,Css,Wordpress,Drop Down Menu,Menu,Submenu,当我将鼠标悬停在菜单上时,我的菜单和子菜单出现一些问题。当鼠标悬停在菜单上时,子菜单不会对齐。它浮动在左侧,然后显示在第一个菜单的底部,因此当我选择最后一个菜单时,我无法选择它。这是参考图片 HTML(WORDPRESS) 在css文件中替换该类,一切都应该正常: #navcontainer li:hover ul.children { top:18px; background:#edebd7; color:#724e32; padding:5px;
在css文件中替换该类,一切都应该正常:
#navcontainer li:hover ul.children {
top:18px;
background:#edebd7;
color:#724e32;
padding:5px;
position:absolute;
border-left:1px solid #694b0a;
border-right:1px solid #694b0a;
border-bottom:1px solid #694b0a;
white-space:nowrap;
width:160px;
height:auto;
z-index:300;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
}
左派:0的礼节是问题所在。没有其他内容:)你能粘贴菜单的整个html代码吗?我能在这里发布网站链接吗?我不知道php是如何工作的,它的代码调用了我的菜单。我不认为我可以通过html操纵菜单的结构。
.menu {
width:auto;
float:left;
display:block;
}
.children {
display:none;
}
#navcontainer {
display:inline;
padding:0px;
margin: 0px; /*-8px 0 0 10px;*/
list-style:none;
position:relative;
z-index:1;
float:left;
height: 20px;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
}
#navcontainer ul li {
display: block;
float: left;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #b37032;
background-color: #dbd2c1;
width: 100%;
}
#navcontainer ul li ul li{
display:block;
width:auto;
float: none;
background:#edebd7;
}
#navcontainer ul li ul li a {
background: transparent !important;
color: #724e32;
border-top: 0px !important;
border-left: 0px !important;
border-right: 0px !important;;
-moz-border-radius: 0 0 0 0 !important;;
-webkit-border-radius: 0 0 0 0 !important;;
border-radius: 0 0 0 0 !important;;
background-color: transparent !important;;
opacity: 1 !important;;
}
#navcontainer li:hover ul{
display:block;
}
#navcontainer ul li:hover a {
color: #724e32;
border-top: 1px solid #694b0a;
border-left: 1px solid #694b0a;
border-right: 1px solid #694b0a;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
background-color: #edebd7;
opacity: 0.5;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #d3c096;
}
#navcontainer li:hover ul.children {
left:0;
top:18px;
background:#edebd7;
color:#724e32;
padding:5px;
position:absolute;
border-left:1px solid #694b0a;
border-right:1px solid #694b0a;
border-bottom:1px solid #694b0a;
white-space:nowrap;
width:160px;
height:auto;
z-index:300;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
}
#navcontainer ul li ul li:hover {
color: #fff;
background-color: #d3c096;
}
#navcontainer ul li ul li a:hover {
color: #fff;
background-color: #d3c096;
}
#navcontainer ul li ul li:hover a{
color: #fff;
background-color: transparent;
}
#navcontainer li:hover ul.children {
top:18px;
background:#edebd7;
color:#724e32;
padding:5px;
position:absolute;
border-left:1px solid #694b0a;
border-right:1px solid #694b0a;
border-bottom:1px solid #694b0a;
white-space:nowrap;
width:160px;
height:auto;
z-index:300;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
}