列表项未根据给定命令执行

Question

如果我的问题没有以通常的方式提出，请原谅我，这是我第一次上这个论坛。

话虽如此，我有一个关于 css 浮动的问题。 一切都很顺利，这就是问题所在。 我正在制作一个下拉菜单并制作了一个#ul li { float:left; }。 现在，当我添加一个也是“ul li”的子菜单时，浮动对子菜单列表没有任何影响。 我一直在寻找答案，但这个问题太具体了，真的很难找到。 我认为这与我给列表项的宽度和高度有关，但我不完全确定。 任何帮助，将不胜感激。

所以我确实得到了我正在寻找的结果，我只是期待信息 li 下的 li 也向左浮动，因为我输入了（#nav ul li {float left;}。它适用于 li 的第一行，但不适用于子菜单，为什么？

代码：Html

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="./awesome/css/all.min.css">
    <title>navfinal</title>
</head>
<body>
    <div id="wrapper">
        <div id="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Info</a>

                    <ul>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">What is our goal</a>
                            <ul>
                                <li><a href="#">Past</a></li>
                                <li><a href="#">Present</a></li>
                                <li><a href="#">Future</a></li>
                            </ul>

                        </li>
                        <li><a href="#">Something</a></li>
                    </ul>

                </li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

CSS 代码：

body {
    background:#847E7E;
}

#wrapper {
    width:960px;
    height:900px;
    background:#8A8888;
    margin:0 auto;
    padding:0;
}


#nav {
    background:#363535;
    height:50px;
}

#nav ul {
    list-style:none;
    padding:0;
    margin:0;

}

#nav ul li {
    background:#363535;
    width:170px;
    height:50px;
    text-align:center;
    float:left;
}

#nav ul li a {
    font-size:22px;
    line-height:50px;
    display:block;
    text-decoration:none;
    color:#D31496;
}

#nav ul li a:hover {
    background:#C41BCA;
    color:black;
}

#nav ul li a:active {
    background:#514E4E;
    color:#9314C2;
}

#nav ul li > ul {
    display:none;
}

#nav ul li:hover > ul {
    display:block;
}


#nav ul li ul li ul {
    position:absolute;
    top:0;
    left:100%;
}

#nav ul > li {
    position:relative;
}

#nav i {
    float:right;
    font-size:35px;
    color:#218BE4;
    text-align:center;
    line-height:50px;
    padding:0 20px;
}