Question

我正在尝试使用其中一个子菜单。 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">&#9660;</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">&#9660;</a>
        <ul class="sub-menu">
                <li><a href="">SCHEDULE</a></li>
        </ul>
    <li><a href="">CLIENTS <span class="arrow">&#9660;</a>
        <ul class="sub-menu">
                <li><a>PARTIAL LIST <span class="arrow">&#9658;</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>

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 lol时我是侏罗纪。

Answer 1

好吧，我没有为您提供解决方案，但我可以告诉您问题所在。所有子菜单都有绝对位置。 - 你有相同的＆＃34;子菜单＆＃34;子菜单和子子菜单上的样式。

如果您希望子子菜单的行为与子菜单不同，那么我建议您编写子子菜单样式。

它们都可以具有两者共有的属性，但是它们有自己的属性 - 例如定位。

.sub-menu, .sub-sub-menu {
   width:160%;
   padding:5px 0px;
   position:absolute;
   top:100%;
   opacity:0;
   transition:opacity linear 0.15s;
   box-shadow:0px 2px 3px rgba(0, 0, 0, 0.2);
   background:#2e2728;
}
.sub-menu {
   left:0px;
   z-index:-1;
}
.sub-sub-menu
   left:50px;
   z-index:-1;
}

或其他......

您还需要更新子菜单帽内的所有样式具有绝对定位。

然而 - 如果你不需要，我的建议是不使用绝对定位。

开始慢慢移除＆＃34;位置：绝对;一次一个，看看有什么变化...修复每个变化，使它看起来正确...并继续删除它，直到你没有任何剩余的删除或直到删除它不能修复。 / p>

Answer 2

我想这些都是您需要的所有变化，以使其有效：

<强> Working : Demo

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;

}

子子菜单的行为不应该如此

2 个答案: