Question

好的我正在制作一个导航条示例，除非嵌套的 li 悬停在背景中，否则它不会完全覆盖空间。

我的HTML代码如下：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <title>NavBar</title>
    </head>

    <body>
        <div id="nav">
            <ul>
                <li><a href="#">Home</a></li><li>
                <a href="#">About</a></li><li>
                <a href="#">Contact</a>
                   <ul>
                       <li><a href="#">Email</a></li>
                       <li><a href="#">Phone</a></li>
                   </ul>
               </li>
            </ul>
        </div>
    </body>
</html>

我的CSS代码如下：

html, body {
    margin: 100px;
    padding:0px;
    }
#nav {
    margin: 0px;
    padding: 0px;
    background-color: #909090;
    font-familY: Courier;
    font-size: 19pt;
    color: #afc0ff;
    }
#nav ul ul {
    display: none;
    background-color: #909090;
    }
#nav ul li:hover > ul{
    margin: 0px;
    padding:0px;
    display:block;
    position:absolute;
    top: 100%;
    left: 0px;
    width: 100%;
    }
#nav ul li:hover {
    background: #808080;
    }
#nav ul li {
    margin: 0px;
    padding: 10px 5px 10px;
    list-style: none;
    display: inline-table;
    position: relative;
    }
#nav ul li a {
    text-decoration: none;
    color: #260026;
    }

我的问题是：

我无法让我嵌套的li背景颜色覆盖整个区域，就像你在电子邮件中看到的那样，整个区域都没有悬停！

JSFiddle

Answer 1

将此添加到您的CSS：

#nav ul ul li {
    display:block;
}

<强> Check JSFiddle Demo

我的HTML / CSS出了什么问题？

1 个答案: