如何让我的<li>项目直接放在下拉菜单中？</li>

Question

我正在为我的编程课程创建一个个人网站，但是我的“li”标签项目下拉时遇到了麻烦，而是他们向右移动了。例如，我将鼠标悬停在我的“li”标签上，让我的下拉“li”项目下拉。但相反，他们下降并走向右边。我希望他们直接走下去。有什么帮助吗？

这是CSS（是的，我知道我的一些CSS重复且不必要）：

#nav {
    background-color:#222;
    margin:-15px;
    margin-left:230px;
    margin-right:230px
}

#nav_wrappper {
    width: 960px;
    margin: 0 auto;
    text-align:left;
}

#nav ul {
    list-style-type: none;
    text-align:center;
    margin: 0 auto;
    position: relative;
    display:inline-block;
    width:100%;

}

#nav ul li {
    display: inline-block;
    position:relative;
    width:33%;
    float:left;
}

#nav ul li:hover {
    background-color:#333;
}

#nav ul li a,visited {
    color:#ccc;
    display:block;
    padding:15px;
    text-decoration:none;
}

#nav ul li a:hover {
    color: #ccc;
    text-decoration:none;
}

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

#nav ul ul {
    display:none;
    position: absolute;
    background-color:#333;
    border: 5px solid #222;
    border-top:0;
    margin-left: -5px;
    min-width:160px;
}

#nav ul ul li {
    display: block;
}

#nav ul ul li a, vistited{
    color:#ccc;
}

#nav ul ul li a:hover {
    color:#099;
}