.navbar {
    background-color: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    padding-bottom:0 !important;
    padding-left:8vw !important;
    padding-right:8vw !important;
}

.nav a{
    color:#000000 !important;
    padding-bottom:0px !important;

}
.dropdown-menu {
    border-radius: 0px !important;
    border: solid !important;
    border-width: 1px !important;
    border-color: lightgray !important;
    border-radius: 0  !important;
    -webkit-box-shadow: none  !important;
    box-shadow: none  !important;
    text-align:left !important;
    padding-left: 1vw !important;
    padding-right: 1vw !important;
    padding-top:2vw !important;
    padding-bottom:1vw !important;
    display: none  !important;
    width:100%  !important;
}

.dropdown{
    position:initial  !important;
  display: block  !important;
}
.dropdown-menu:hover{
  top:0  !important;
}

.dropdown-menu>ul>li:hover{
  display: block  !important;
}

.dropdown:hover .dropdown-menu {
  display: block  !important;
  margin-top: 0  !important;
}

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle"  href="#">Page 1
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>