Question

我的Wordpress问题我想隐藏子菜单，直到悬停发生，我不知道怎么做？

我可以看到菜单和子菜单都没有悬停选项

   #header div#nav ul li a {
        text-decoration: none;
        color: #B1d1d7;
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
        margin: 14px;
        content:after;
        font-family: "Arial Black", Gadget, sans-serif;
        font-size:14px;
        font-weight:bold;
    }
    #header div#nav ul li a.active,
    #header div#nav ul li a:hover {
        color: #fff;
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
    }
    #header div#nav ul li {
        border-right: 1px solid #6cb8cb;
        line-height: 1.1em;
    }
    #header div#nav ul li:last-child {
        border: none;
    }

请指教谢谢大家

Answer 1

我不确定你的标题是什么引用 最后一个孩子的显示：无悬停diplay：阻止？ 但听起来你只需要创建一个简单的下拉式菜单。如果是这种情况，你可以这样做：

body {
    font-family: Arial, sans-serif;
    font-size: 13px;
}
#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;   
}
#nav li {
    float: left;
    width: 200px;
}
#nav li a {
    display: block;
    background: #777;
    color: #FFF;
    text-decoration: none;
    padding: 5px;
}
#nav li a:hover {  
    background: #333;
}
#nav li ul {
	position: absolute;
	width: 200px;
	left: -9999px;
}
#nav li:hover ul {
	left: auto;
}

<ul id="nav">
    <li>
        <a href="#">Home</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>        
    </li>
    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>
    </li>
</ul>

最后一个子显示：无悬停显示：阻止？

1 个答案: