Question

简单的问题，我有以下代码，但我不知道要添加到我的CSS中以解除显示：无;如果您需要进一步解释，请随时在评论中提问。

<nav>
        <ul>
            <li>
               <a href="[[~[[+id]]]]" title="[[+pagetitle]]">
                 [[+longtitle:default=`[[+pagetitle]]`]] 
               </a>
               <ul>
                  <li>
                     <a href="#" title=lorem>
                        [[Wayfinder? &startId=`[[+id]]` &level=`2` ]]
                     </a>
                  </li>
               </ul>
            </li>
        </ul>
    </nav>

/** Navigation **/

#nav ul{list-style: none; padding: 0; display: block;}
#nav ul li{display: inline-block; position: relative;}
#nav ul li a{ display: block; padding: 5px 8px; text-decoration: none; font-size: 16px; }

#nav ul li ul{
    position: absolute;
    left: 0px;
    background: rgba(0,0,0,0.8);
    border-radius: 0 0 5px 5px;
    display: none;
    z-index: 9000;
    display:none;
}
.ie7 #nav ul li ul,
.ie8 #nav ul li ul{
    background: url('../../assets/img/transparent-black.png') repeat;
}
#nav ul li.last ul{ right: 0px; left: auto; }
#nav ul li.last ul li a{ text-align: right; }
#nav ul li:hover ul,
#nav ul li ul:hover{ display: block; }
#nav ul li ul li{
    display: block;
    padding: 0;
    overflow: hidden;       
}
#nav ul li ul li a{
    min-width: 100px;
    margin: 0;
    padding: 7px 14px;
    color: #ffffff;
}
#nav ul li ul li:hover{ background: #f1f1f1; }
#nav ul li ul li a:hover{ color: rgba(253,183,46,1); }


nav li:hover > nav li ul li{
    background-color:red;
    overflow:visible;
}
nav li ul li{
    display:none;
}

Answer 1

试试这个：

    nav ul li ul li{
    display:none;
}

    nav ul li:hover > ul li{
        display:block;
    }

http://jsfiddle.net/vpZ5J/4/

Answer 2

我认为你在寻找的是：

nav ul li:hover > ul {
   display: block;
}

此外，您没有ID为#nav的div，因此您的所有样式都是incorect，您应该只使用nav

Answer 3

您试图隐藏子菜单中的li项。而是隐藏子菜单ul，然后在悬停时显示它。为了改变这个

nav li ul li{
    display:none;
}

到

nav li ul{
    display:none;
}

并添加此

nav li:hover > ul{
    display:block;
}

<强> DEMO

Answer 4

尝试添加此内容：

nav ul li:hover li,
nav ul li:hover ul{
    display:block;
}

jsfiddle

Answer 5

添加以下规则：

nav li:hover, nav li:hover ul li{
    display:block;
}

http://jsfiddle.net/vpZ5J/

html / css下拉菜单没有掉线

5 个答案: