Question

我有一个菜单，我试图添加另一个大致命名为＆＃34; sub sub＆＃34;将鼠标悬停在＆＃34;产品1＆＃34;上。它显示了＆＃34; sub sub＆＃34;菜单，但当鼠标悬停在＆＃34;产品2＆＃34;时，它不会消失。或＆＃34;产品3＆＃34;。我不知道我的代码做错了什么。

请查看HTML和CSS，如果有人可以提供帮助，请告诉我们？

<div class="navigation">
            <li class="active">
                <a href="#">home</a>
            </li>
            <li>
                <a href="#">about</a>
            </li>
            <li>
                <a href="#">products</a>
                <div>
                    <a href="#">product 1</a>
                        <div>
                        <a href="#">sub sub</a>
                        </div>
                        <a href="#">product 2</a>
                        <a href="#">product 3</a>

                 </div>
            </li>
            <li>
                <a href="#">services</a>
            </li>
            <li>
                <a href="#">FAQ</a>
            </li>
        </div>

CSS就在这里：

.navigation {
            float: right;
            list-style: none;
            margin: 110px 0 0;
            padding: 0;
            }

.navigation li {
            font-family: "Segoe UI Web Regular","Segoe UI","Helvetica Neue",Arial;
            font-size: 20px;
            color: Maroon;
            float: left;
            margin-left: 50px;
            position: relative;
            margin-bottom: 40px;
            z-index:999;
            }

.navigation li > a {
        color: #505050;
        text-decoration: none;
            }

.navigation li:hover > a 
            {
            color:#D30404;
            }

.navigation li > div a {
            color: #505050;
            display: block;
            text-decoration: none;
            font-size: 17px;
            padding: 4px;
            margin-top: 2px;
            }

.navigation li:hover > div {
            color: #D30404;
        display: block;
            }

.navigation li > div a:hover {
         color: #fff;
         background-color: #D30404;
            }

.navigation li > div {
         background-color:rgb(250, 250, 250);
         display: none;
         width: 110px;
         position: absolute;
             }

.navigation li div div a 
             {
             background-color:rgb(250, 250, 250);
         display: none;
         width: 110px;
         position: relative;
             }

.navigation li div:hover > div a
             {
             display: block;
             position: absolute;
             margin-left: 110px;
             top: -2px;
             }

Answer 1

知道了！（请原谅我更改代码。）http://jsfiddle.net/K7kPJ/4/

.navigation {
            list-style: none;
            margin: 0;
            padding: 0;
            }

.navigation li {
            font-family: "Segoe UI Web Regular","Segoe UI","Helvetica Neue",Arial;
            font-size: 20px;
            color: Maroon;
            float: left;
            margin-left: 50px;
            position: relative;
            margin-bottom: 40px;
            z-index:999;
            }

.navigation li > a {
        color: #505050;
        text-decoration: none;
    display:inline-block;
    height:30px;
            }

.navigation li:hover > a 
            {
            color:#D30404;
            }

.navigation li > div a {
            color: #505050;
            display: block;
            text-decoration: none;
            font-size: 17px;
            padding: 4px;

            }


.navigation li > div a:hover {
         color: #fff;
         background-color: #D30404;
            }

.navigation li > div {
         background-color:rgb(250, 250, 250);
         display: none;
         width: 110px;
         position: absolute;
             }

.navigation li div div
             {
             background-color:rgb(250, 250, 250);
         display: none;
         width: 110px;
         position: absolute;
   left:110px;
    top:0;
             }

.navigation li a:hover + div, .navigation li div:hover
             {
             display: block;
             }

2级CSS菜单

1 个答案: