CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Anuj Mayank
Anuj Mayank

Reputation: 5

Bootstrap navigation bar on hover drop down

I want a border on top of the navigation bar and on hover of each menu item border top color should change.

Here is how I was approaching 

.dropdown:hover .dropdown-menu {
  display: block;
}
.navbar-nav > li > a:hover {
  border-top: 3px solid #F68220;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<nav class="navbar navbar-inverse" style="background:#ffffff;border:none;border-top:solid 2px grey;">
  <div class="container-fluid">

    <ul class="nav navbar-nav">
      <li class=""><a href="#">Home</a>
      </li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1</a>
        <ul class="dropdown-menu" style:>
          <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>

Upvotes: 0

Views: 781

Answers (1)

Stewartside
Stewartside

Reputation: 20905

You need a small amendment to your CSS. You need to add a new selector and amend one of your existing ones as below.

If you view it in full screen mode, you should see it in working order.

.dropdown:hover .dropdown-menu {
  display: block;
}
.navbar-nav > li {
  top: -2px;
}
.navbar-nav > li > a:hover {
  border-top: 2px solid #F68220;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<nav class="navbar navbar-inverse" style="background:#ffffff;border:none;border-top:solid 2px grey;">
  <div class="container-fluid">

    <ul class="nav navbar-nav">
      <li class=""><a href="#">Home</a>
      </li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1</a>
        <ul class="dropdown-menu" style:>
          <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>

Upvotes: 1

Related Questions