The dropdown links for the notification icon activates and flashes the background-color of the bell icon, is there a way to stop this happening?

This behaviour also occurs when the dropdown is open and you click the searchbox field it activates the background color of the bell icon as well, need to stop this some how?

```css
 body {
   padding-top: 102px;
   background-color: #4d4d4d;
   font-family: 'Lato', verdana, sans-serif;
 }
 .container {
   width: 1530px;
   margin-top: 0;
 }
 .navbar-fixed-top {
   background-color: #fff;
 }
 .navbar-header {
   min-height: 80px;
 }
 .hamburger-icon {
   margin-top: 20px;
 }
 .navbar-default .navbar-brand {
   line-height: 45px;
   font-size: 45px;
   color: #010101;
   text-transform: uppercase;
 }
 .navbar-default .navbar-brand span {
   font-style: normal;
   color: #ff5500;
 }
 .search .input-group {
   padding-top: 15px;
   font-family: 'Lato', sans-serif;
 }
 .search .input-group input.search-field {
   padding: 0 10px 0 0;
   border-radius: 0;
   border: 0;
   box-shadow: none;
   background-color: #fff;
   font-size: 18px;
   font-weight: 100;
 }
 .search .input-group input.search-field:hover {
   background-color: transparent;
 }
 .search .input-group-btn button {
   padding: 2px;
   border: 0;
   box-shadow: none;
   background-color: transparent;
   border-radius: 0;
 }
 .search .input-group-btn button:hover {
   background-color: #fff;
   color: #ff5500;
 }
 .search .input-group-btn .glyphicon-search {
   font-size: 22px;
 }
 .dropdown-toggle.inbox {
   padding-top: 15px;
   margin-bottom: 5px;
 }
 .dropdown-menu.bell {
   background-color: #f8f8f8;
   border-radius: 0;
   box-shadow: 0;
 }
 .dropdown-menu.bell li a:link {
   padding-top: 5px;
   padding-bottom: 5px;
   white-space: normal !important;
   width: 350px;
 }
 .nav>li.dropdown.bell li a:hover {
   color: #ff5500;
   background-color: transparent;
 }
 .nav>li.dropdown.bell>a:hover,
 .nav>li.dropdown.bell>a:focus {
   color: #ff5500;
   background-color: transparent;
 }
 .dropdown-menu.bell li.divider {
   padding: 0;
   margin: 0 20px;
 }
 .dropdown-menu.bell .label {
   background-color: transparent;
   color: #aaa;
   font-weight: 100;
 }
 .badge-notify {
   background: #ff5500;
   margin-top: -24px;
   margin-left: -20px;
   height: 1.7em;
 }
 span.notify-link {
   display: block;
   padding: 0 5px 0 5px;
 }
 /* caret for notification dropdown */
 .dropdown-menu.bell:before {
   position: absolute;
   top: -10px;
   right: 9%;
   display: inline-block;
   border-right: 10px solid transparent;
   border-bottom: 10px solid #ccc;
   border-left: 10px solid transparent;
   border-bottom-color: rgba(0, 0, 0, 0.2);
   content: '';
 }
 .dropdown-menu.bell:after {
   position: absolute;
   top: -9px;
   right: 9%;
   display: inline-block;
   border-right: 9px solid transparent;
   border-bottom: 9px solid #f8f8f8;
   border-left: 9px solid transparent;
   content: '';
 }
 .user span.fullname {
   font-size: 14px;
   color: #010101;
   font-weight: 400;
 }
 .user span:last-child {
   padding-right: 10px;
 }
 .user span:first-child {
   padding-right: 30px;
   padding-left: 10px;
 }
 .user .dropdown-menu.user-list {
   width: 100%;
   border-radius: 0;
   border: 0;
   background-color: #f8f8f8
 }
 .user .dropdown-menu.user-list li a {
   margin: 5px 0px;
   color: #010101;
 }
 .user .dropdown-menu.user-list li a:hover {
   background-color: transparent;
   color: #ff5500;
 }
 .user .dropdown-menu.user-list li.divider {
   padding: 0;
   margin: 0 20px;
 }
 /* Large desktop */
 @media (max-width: 1590px) {
   .container {
     width: auto;
   }
 }
 /* Portrait tablet to landscape and desktop */
 @media (max-width: 979px) {}
 /* Landscape phone to portrait tablet */
 @media (max-width: 768px) {
   .container {
     width: auto;
   }
   .navbar-default .navbar-brand {
     font-size: 40px;
   }
   .dropdown.bell .inbox {
     width: 100% !important;
   }
   .search {
     padding-left: 10px;
     padding-right: 10px;
     margin-top: 0;
     width: 100%;
     overflow: hidden;
   }
   .search .input-group {
     padding-top: 0;
   }
   .dropdown-menu.bell li a {
     text-align: left;
   }
   .dropdown-menu.bell h4 {
     margin: 0 0;
   }
   .dropdown-menu.bell:before,
   .dropdown-menu.bell:after {
     display: none;
   }
   .bell,
   .user {
     text-align: center;
   }
 }
 /* Landscape phones and down */
 @media (max-width: 480px) {
   .navbar-default .navbar-brand {
     font-size: 30px;
   }
 }
```

```html
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

<div class="container">
  <div class="navbar navbar-default navbar-fixed-top navbar-md" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle hamburger-icon" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
        <a href="#" class="navbar-brand">team<span>or</span></a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">

          <!-- search bar -->
          <li class="dropdown search">
            <form class="navbar-form" role="search">
              <div class="input-group">
                <input type="text" class="form-control search-field" placeholder="Search name or keyword" name="q">
                <div class="input-group-btn">
                  <button class="btn btn-default" type="submit">
                    <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-128.png" height="30" width="30" class=" avatar-img img-square">
                  </button>
                </div>
              </div>
            </form>
          </li>

          <!-- notification bell -->
          <li class="dropdown bell">
            <a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
              <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-outline-128.png" height="45" width="45" class=" avatar-img img-square">
              <span class="badge badge-notify">1</span>
            </a>
            <ul class="dropdown-menu bell" role="menu">
              <li><a href="#"><span class="label label-default">4:00 AM</span><span class="notify-link">Favourites Snippet</span></a>
              </li>
              <li class="divider"></li>
              <li><a href="#"><span class="label label-warning">4:30 AM</span><span class="notify-link">Email marketing</span></a>
              </li>
              <li class="divider"></li>
              <li><a href="#"><span class="label label-warning">5:00 AM</span><span class="notify-link">
      Subscriber focused email design
      Subscriber focused email design
      Subscriber focused email design
      Subscriber focused email design
      </span></a>
              </li>
              <li class="divider"></li>
              <li><a href="#" class="text-center">View All</a>
              </li>
            </ul>
          </li>

          <!-- user login information -->
          <li class="dropdown user">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <span><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-128.png" height="50" width="50" ></span>
              <span class="fullname">Jacky Smith</span>
              <span><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png" height="20" width="20" ></span>
            </a>

            <ul class="dropdown-menu user-list" role="menu">
              <li><a href="#">Action</a>
              </li>
              <li class="divider"></li>
              <li><a href="#">Another action</a>
              </li>
              <li class="divider"></li>
              <li><a href="#">Something else here</a>
              </li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a>
              </li>
              <li class="divider"></li>
              <li><a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <p>dfsjfhskfs</p>

      <!-- <div class="chevron right">
     <a href="#"></a>
   </div>

   <div style="height: 1em;">
   </div> -->

    </div>
  </div>
</div>

</div>
```