Question

我只是在玩一个例子并且卡在某事上。我想知道在下面的屏幕截图中可能会产生什么差距，尝试不同的东西，但我想我需要一些帮助。

Gap

代码如下：

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="menuhovercss.css">
            <base target="main" />
            <title>
                home
            </title>
        </head>
        <body>
            <div>
                <ul>
                    <li><a href="">Home</a> </li>
                    <li><a href="#">Tracks</a>
                        <ul>
                            <li><a href="">SD</a>
                                <ul>
                                    <li><a href="">Schedule</a></li>
                                    <li><a href="">Materials</a></li>
                                    <li><a href="">Contacts</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="">GIS</a>
                                <ul>
                                    <li><a href="">Schedule</a></li>
                                    <li><a href="">Materials</a></li>
                                    <li><a href="">Contacts</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="">UI</a>
                                <ul>
                                    <li><a href="">Schedule</a></li>
                                    <li><a href="">Materials</a></li>
                                    <li><a href="">Contacts</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="">Web of the week</a> </li>
                </ul>
            </div>
        </body>
    </html>

CSS

ul {
    padding: 0; /*Remove Indentation*/
    list-style: none; /*Remove leading bullet*/
    /*position:relative;
    display:block;*/
}  

ul li {
    float: left; /*Force it to one line*/
    width: 130px; /*Set each menu item to specific width*/
    text-align: center; /*centers each inside its own 'cell'*/
    /*display:list-item;*/
    /*border-bottom: 5px solid #2ecc71;*/
}

ul li a {
    display: block;
    padding: 5px 10px; /* Create Padding for each link*/
    color: #333;
    background-color: #f2f2f2;
    text-decoration: none;
    border-bottom: 4px solid green;
}

ul li a:hover { /* Change color when hovering */
    color: #fff;
    background-color: #939393;
}

ul ul {
    display: none; /*Hide the submenus*/
}

ul li:hover > ul {
    display: list-item; /*Show the submenus when hovering > means direct child*/
    /*float: left;*/
}

ul ul > li { /*Submenu*/
    float: left;
    position: relative;
    border-bottom: none;
}

ul ul ul li { /*Sub-submenu*/
    position: absolute relative;
    top: -25px;
    left: 130px;
}

Answer 1

第3级菜单位于第2级菜单的<li>内，为父元素提供高度。

只需添加此规则即可避免此效果

ul ul ul{position:absolute;}

使用css的下拉列表行为不正常（项目之间的间隙）

1 个答案: