Question

我正在构建一个css下拉菜单，当我将鼠标悬停在我的div上时，li标签会相互堆叠，你可以看到我的意思 - JSFiddle我不确定我的css是否正确我定位事物的方式或方式。

也是一些代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <link rel="stylesheet" href="Assets/StyleSheets/StyleSheet.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Shirt Happens</title>

    <script type="text/javascript">

    </script>

    <style type="text/css">
        .Item {
            float:left;
            position:relative;
        }

        .Item > ul li {
            z-index:1000;
            float:left;
            padding:10px 15px;
            margin:2px 0 0;
            list-style:none;
            background-color:#FFF;
            border:1px solid #CCC;
            border:1px solid rgba(0, 0, 0, 0.2);
            -webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);
            -webkit-background-clip:padding-box;
            -moz-background-clip:padding;
            background-clip:padding-box;
        }

        .Item ul li:hover .MenuItem {
            border-bottom:3px solid #F00;
            background-color:#EEE;
            color:rgb(50,50,50);
        }

        .Item > ul li:after,
        .Item > ul li::after {
            position:absolute;
            top:-8px;
            right:20px;
            content:'';
            width:0;
            height:0;
            border-bottom:solid 8px #FFF;
            border-left:solid 8px transparent;
            border-right:solid 8px transparent;
        }

        .Item > ul li:before,
        .Item > ul li::before {
            position:absolute;
            top:-9px;
            right:19px;
            content:'';
            width:0;
            height:0;
            border-bottom:solid 9px #CCC;
            border-left:solid 9px transparent;
            border-right:solid 9px transparent;
        }

        .Item > ul li {
            display:none;
            position:absolute;
            top:80px;
            right:0px;  
        }

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

        .MenuItem {
            text-transform:uppercase;
            font-weight:bold;
            color:#777;
            height:80px;
            padding:0 15px;
            text-align:center;
            cursor:pointer;
            line-height:80px;
            transition:all .15s ease-in-out;
            -webkit-transition:all .15s ease-in-out;
            -moz-transition:all .15s ease-in-out;
            -ms-transition:all .15s ease-in-out;
            -o-transition:all .15s ease-in-out;
            color:rgb(105,105,105);
            position:relative;
        }

        .MenuItem:hover {
            border-bottom:3px solid #F00;
            background-color:#EEE;
            color:rgb(50,50,50);
        }

        .Triangle {
            width:0;
            height:0;
            border-left:8px solid transparent;
            border-right:8px solid transparent;
            border-top:8px solid rgb(105,105,105);
        }
    </style>
</head>

    <body>
        <div id="Wrapper">
            <div id="Header">
                <div id="HeaderC">
                    <div id="Logo"></div>

                    <div id="Menu">
                        <div class="Item">
                            <div class="MenuItem icon-down-open">Menu Item 1</div>

                            <ul>
                                <li>Inside Item</li>
                                <li>Inside Item</li>
                                <li>Inside Item</li>
                            </ul>
                        </div>
                        <div class="Item">
                            <div class="MenuItem icon-down-open">Menu Item 1</div>

                            <ul>
                                <li>Inside Item</li>
                            </ul>
                        </div>
                        <div class="Item">
                            <div class="MenuItem icon-down-open">Menu Item 1</div>

                            <ul>
                                <li>Inside Item</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div id="Middle">
                <div id="MiddleC"></div>
                <!--Middle Content-->
            </div>

            <div id="Footer">
                <div id="FooterC"></div>
                <!--Footer Content-->
            </div>
        </div>
    </body>
</html>

Answer 1

问题在于您正在使用此选择器：.item > ul li将所有这些列表项设置为具有相对于其父.item容器具有完全相同的顶部和右侧位置的绝对位置。改变这个：

.Item > ul li {
    display:none;
    position:absolute;
    top:80px;
    right:0px;  
}

对此：

.Item > ul li {
    display:none;
    position:relative;
    top:-12px;
    right:0;  
}

CSS Drop Menu <li>叠加在一起？</li>

1 个答案: