我在尝试使用其中一个子菜单时遇到问题。 Partial 的子子菜单的行为不正常。这是我们公司网站的备用导航栏,以防另一个未获批准。我对两者都使用了不同的代码,另一个工作正常,所以没有问题。
我希望 Partial 的子菜单在右侧而不是下方。
这个新的是我找到的代码的组合。
这是代码:https://jsfiddle.net/shamrocksdee/20rgfom5/
HTML:
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li><a href="">HOME</a></li>
<li><a class="" href="">ABOUT <span class="arrow">▼</a>
<ul class="sub-menu">
<li><a href="">M - V - V</a></li>
<li><a href="">CHOOSE US</a></li>
</ul>
<li><a href="">PROGRAMS</a></li>
<li><a class="current-item" href="">EVENTS <span class="arrow">▼</a>
<ul class="sub-menu">
<li><a href="">SCHEDULE</a></li>
</ul>
<li><a href="">CLIENTS <span class="arrow">▼</a>
<ul class="sub-menu">
<li><a>PARTIAL LIST <span class="arrow">►</a>
<ul class="sub-menu">
<li><a href="">PUBLIC</a></li>
<li><a href="">IN-HOUSE</a></li>
</ul>
</li>
<li><a href="">TESTIMONIALS</a></li>
</ul>
<li><a href="">GALLERY</a></li>
<li><a href="" rel="ddsubmenu3">SOCIAL</a></li>
</ul>
</nav>
</div>
CSS:
body {
background:#ffffff /*url('body-bg.jpg')*/;
}
container {
position: absolute;
width: 1000px;
}
.clearfix:after {
display:block;
clear:both;
content:"";
}
// Menu Outline
.menu-wrap {
width:100%;
display: block;
box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2);
background:#3e3436;
}
.menu {
width:1400px;
margin-left:2.2%;
margin-top:3.6%;
height:78px;
float:left;
padding-left:5px;
padding-top:5px;
margin-bottom:10px;
z-index:100;
}
.menu li {
margin:0px;
list-style:none;
font-family:'Raleway';
font-weight:bold !important;}
.menu a {
transition:all linear 0.15s;
color:#919191;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#d3d3d3;
display: block;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
// Top Level
.menu > ul > li {
float:center;
display:inline-table;
position:relative;
font-size:19px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-table;
text-shadow:0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#2e2728;
}
// Bottom Level
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
float: none;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0, 0, 0, 0.2);
background:#2e2728;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#3e3436;
}
.sub-menu ul {
width:160%;
position: absolute;
padding:0;
left:0;
display:none; /* hides sublists */
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0, 0, 0, 0.2);
background:#2e2728;
float: none;
}
// hides sub-sublists
.sub-menu li:hover ul ul {
display:none;
}
// shows sublist on hover
.sub-menu li:hover ul {
display: block;
position:relative;
}
.sub-menu li ul li:hover ul {
font-size:16px;
display: block; /* shows sub-sublist on hover */
position: inherit;
padding: 10px 30px;
left:100%;
top:0;
margin:0;
}
谢谢。我不习惯 CSS 代码……说到 CSS,我就像侏罗纪一样。哈哈。
最佳答案
我想这些是您需要的所有更改,以使其正常工作:
CSS:仅提及需要的更改,其余保持不变。
.sub-menu
{
width:100%;
padding:0px;
}
.sub-menu li a
{
padding:10px 28px 10px 10px;
}
.sub-menu ul
{
position:absolute !important;
width:100%;
left:171px;
top:0px;
}
关于html - 子子菜单的行为不正常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33558936/