0

编辑 JSfiddle

简单的问题，我有以下代码，但我不知道要在我的 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;
}
4

5 回答 5

2

尝试这个：

    nav ul li ul li{
    display:none;
}

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

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

于 2014-04-29T09:07:26.573 回答
1

我认为您正在寻找的是：

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

另外，你没有 div 和 id #nav，所以你所有的样式都是不正确的，你应该只使用nav

于 2014-04-29T08:54:33.093 回答
1

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

nav li ul li{
    display:none;
}

至

nav li ul{
    display:none;
}

并添加这个

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

演示

于 2014-04-29T08:58:24.143 回答
1

尝试添加这个：

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

jsfiddle

于 2014-04-29T09:02:14.043 回答
1

添加以下规则： 

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

http://jsfiddle.net/vpZ5J/

于 2014-04-29T09:06:08.313 回答