为什么我的:悬停不起作用？

Question

为什么我的:悬停不起作用？

嗨,我正在尝试建立一个不同级别的菜单.当我尝试将鼠标悬停在我的li项目上以显示下一级别时,它不起作用.

有人能帮帮我吗？

CSS的代码是:

/********************* RESET  ********************/
.menu, .memu ul{
    margin:0;
    padding: 0;
    list-style: none;
}

/********************* MENU ITEMS  ********************/
.menu > li {float:left;}

.menu > li.floatr{float:right;}

.menu li{position:relative;}

.menu li > a{display:block;}

/********************* SUB MENU  ********************/

.menu ul{
    display:none;
    position:absolute;
    width:125px;
}

.menu li:hover > ul {display:block;}

.menu ul ul{
    top:0px;
    left:125px;

}

.menu > li.floatr > ul {right:0;}
.menu > li.floatr > ul ul {left:-125px;}

Run Code Online (Sandbox Code Playgroud)

而html是:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Menu</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body style="padding:20px;">
    <ul class="menu">
        <li><a href="#">Blog</a></li>
        <!-- strat level 2 -->
            <ul>
                <li><a href="#">Add post</a></li>
                <li><a href="#">Archive</a></li>
                    <!-- start level 3 -->
                        <ul>
                            <li><a href="#">By Author</a></li>
                            <li><a href="#">By Year</a></li>
                            <li><a href="#">By Category</a></li>
                        </ul>
                    <!-- end level 3 -->

                <li><a href="#">Comments <span class="bubble">50</span></a></li>
            </ul>
        <!-- end level 2 -->
        <li><a href="#">Products</a></li>


        <li><a href="#">Messages <span class="bubble-alt">4</span></a></li>

        <li><a href="#">Updates <span class="bubble">23</span></a></li>

        <li class="floatr"><a href="#">Envanto</a></li>
        <li class="floatr"><a href="#">Social</a></li>
            <!-- strat level 2 -->
                <ul>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Google+</a></li>
                </ul>
            <!-- end level 2 -->
    </ul>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

LeB*_*Ben 6

您实际上是在列表项目中使用无序列表.menu li:hover > ul.

但是在你的HTML中,你<ul>不在里面<li>,它在后面.

您可以修改HTML以适合CSS选择器,方法是将<ul>内部放在上面,<li>也可以使用相邻的兄弟选择器(+).menu li:hover + ul.

归档时间：	12 年，5 月前
查看次数：	159 次
最近记录：	12 年，5 月前