html - 导航栏上的下拉问题

Question

如果这是一个如此简单的修复，我深表歉意，但我在制作 Navbar 时遇到了问题。

我的问题是，将鼠标悬停在下拉菜单的 ul 时，li 未设置为事件状态。另一个问题是，当您查看 ul 时，链接会被推到右边。

如果您想在此处查看示例 Fiddle

如果其中任何一个需要 Jquery 或常规 JS，但我认为不需要，我愿意接受这个答案。

这是我的代码。

HTML

    <div class="navbar">
       <a href="#" class="brand"><img src="img/shattered.png"/>Test</a>
        <ul class="navbar-nav">
            <div class="container">
                <li class="active"><a href="#">Active</a></li>
                <li><a href="#">Hover</a></li>
                <li class="dropdown">
                    <a href="#">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="active"><a href="#">Inbox</a></li>
                        <li><a href="#">Drafts</a></li>
                        <li><a href="#">Sent Items</a></li>
                        <li><a href="#">Trash</a></li>
                    </ul>
                </li>
            </div>
         </ul>
    </div>

CSS

            body{
                margin:0;
                background-image:url(../img/shattered.png);
                background-position:center;
                background-repeat:repeat;
                font-family:Helvetica, sans-serif;
            }
            .container{
                padding:0 10%;  
            }
            .navbar{
                position:fixed;
                top:0;
                width:100%; 
            }
            .navbar-nav{
                background-color:#fff;
                min-height:50px;
                border-bottom:3px solid #ccc;
                padding-right:10px;
                margin:0;
            }

            .navbar .brand{
                margin-left:50px;
                margin-right:50px;
                display:inline-block;
                color:#333;
                font-size:20px;
                text-decoration:none;
                float:left;
                line-height:50px;
            }
            .navbar .brand:hover{
                animation:shake .75s;
                -webkit-animation:shake .75s;
                -moz-animation:shake .75s;
                -o-animation:shake .75s;
            }
            .navbar .brand img{
                padding-right:10px;
                height:50px;
                width:50px;
                float:left;
            }
            .navbar-nav li{
                display:inline-block;
                margin-right:-4px;
                list-style:none;
            }
            .navbar-nav > .container > li > a{
                font-size:17px;
                display:inline-block;
                text-decoration:none;
                color:#333;
                padding:15px 15px;
            }
            .navbar-nav > .container > li > a:hover{
                background-color:#efefef;
                transition:ease-in-out .25s;
            }
            .navbar-nav > .container > .active > a{
                background-color:#ddd;
            }
            .navbar-nav > .container > .active > a:hover{
                background-color:#ddd;   
            }
            .navbar-nav > .container > .pull-right{
                float:right;
            }
            .navbar-nav > .container > li > a > .caret{
                display:inline-block;
                width: 0px;
                height: 0px;
                margin-left: 2px;
                vertical-align: middle;
                border-bottom: none;
                border-top:4px solid #333;
                border-right: 4px solid transparent;
                border-left: 4px solid transparent;
                border-bottom-width: 0px;
                border-top-style: dotted;
            }
            .navbar-nav > .container > li ul{
                display:none;
            }
            .navbar-nav > .container > li:hover ul{
                display:block;
                background-color:#fff;
                position:absolute;
                border-bottom-right-radius:5px;
                border-bottom-left-radius:5px;
            }
            .navbar-nav > .container > li > ul > li{
                display:block;

            }
            .navbar-nav > .container > li > ul > li > a{
                display:block;
                padding:5px 20px;
                text-decoration:none;
                font-size:15px;
            }
            .navbar-nav > .container > li > ul > li > a:hover{
                background-color:#eee;
            }

Answer 1

固定:http://jsfiddle.net/wEJe9/7/

CSS 更改:

ul {  
    padding: 0;  /*Fixed padding in ul */
}

.active, .active:hover {
    background-color: #ddd;
}