导航栏按钮

Question

我的导航栏有五个按钮。但是按钮nr.5，这是一个带登录功能的下拉菜单，需要300 px的宽度;我的CSS适用于我的所有按钮，因此如何使下拉登录框独特，宽度与其他按钮不同？

HTML

              <li>
                <a href="about.php">About Us</a>
              </li>
              <li>
                <a href="contact.php">Contact</a>
              </li>

                <li class="dropdown">
                  <a class="dropdown-toggle" data-close-others="false" data-delay="0" data-hover=
                  "dropdown" data-toggle="dropdown" href="#">Login <i class="fa fa-angle-down"></i>
                  </a>
                  <ul class="dropdown-menu">
                      <li>
                          <!--container start-->
                        <div class="login-bg">
                            <div class="container">
                                <div class="form-wrapper">
                                <form class="form-signin wow fadeInUp" action="index.html">
                                <h2 class="form-signin-heading">sign in now</h2>
                                <div class="login-wrap">
                                    <input type="text" class="form-control" placeholder="User ID" autofocus>
                                    <input type="password" class="form-control" placeholder="Password">
                                    <label class="checkbox">
                                    </label>
                                    <button class="btn btn-lg btn-login btn-block" type="submit">Sign in</button>
                                </div>
                                </form>
                                </div>
                            </div>
                        </div>
                        <!--container end-->
                    </li>
                  </ul>
                </li>        

CSS：

a { color: #444e67 }
a:hover { color: #48cfad }
p { line-height: 22px }
/*header*/
.head-section { border-bottom: 1px solid #eee }
.head-section .navbar {
    margin-bottom: 0;
}
.navbar-default { border: none }
.navbar-brand {
    color: #bcc0cd;
    font-size: 30px;
    font-weight: 100;
    line-height: 30px;
    margin-top: 30px;
    padding: 0;
}
.navbar-brand span { color: #48cfad }
.head-section .navbar-collapse  ul.navbar-nav {
    float: right;
    margin-right: 0;
    z-index: 199;
}
.head-section .navbar-default { background-color: #fff }
.head-section .nav li a,
.head-section .nav li.active ul.dropdown-menu li a {
    color: #999;
    font-size: 14px;
    font-weight: 300;
    background: none;
    ***/* I can change my width here, but that is for all buttons */***

}
ul.dropdown-menu { border: none }
.head-section .nav li a:hover,
.head-section .nav li a:focus,
.head-section .nav li.active a,
.head-section .nav li.active a:hover,
.head-section .nav li a.dropdown-toggle:hover,
.head-section .nav li a.dropdown-toggle:focus,
.head-section .nav li.active ul.dropdown-menu li a:hover,
.head-section .nav li.active ul.dropdown-menu li.active a {
    color: #fff;
    background-color: #48cfad;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.head-section .navbar-default .navbar-nav > .open > a,
.head-section .navbar-default .navbar-nav > .open > a:hover,
.head-section .navbar-default .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: #48cfad;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.head-section .navbar { min-height: 85px }
.head-section .navbar-nav > li {
    padding-bottom: 25px;
    padding-top: 30px;
}
.head-section ul.navbar-nav li:last-child() { margin-left: 10px !important }
.head-section  .navbar-nav > li > a {
    padding-bottom: 5px;
    padding-top: 5px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    margin-left: 2px;
    line-height: 30px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.dropdown-menu li a:hover { color: #fff !important }
.head-section .navbar-default .navbar-nav > .open > a .caret,
.navbar-default .nav li.dropdown > a:focus .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    color: #fff;
}
.dropdown-menu { box-shadow: none }
.head-section .nav li .dropdown-menu {
    margin-top: -5px;
    padding: 0;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
}
.head-section .nav li .dropdown-menu li a {
    line-height: 30px;
    padding: 3px 12px;
    border-bottom: 1px solid #F3E8E8;
}