how do I prevent my drop-down from stretching the navigation bar

Question

How do I prevent my drop-down from stretching the navigation bar? I'm trying to basically find a way to isolate the deals tab from the rest of the drop down, that way it does not affect the whole navigation bar. I am very new at webdesign btw.

XHTML:

<div id="nav-bar">
      <ul>
          <li><a href="#home-pge">home</a></li>

          <li class="navbar-drop">
            <a class="navbar-edit">deals</a>
            <div class="navbar-drop-content">
                <a href="#opt1">option 1</a>
                <a href="#opt2">option 2</a>
                <a href="#opt3">option 3</a>
            </div>
          </li>

          <li><a href="#about-us-pge">about us</a></li>
          <li><a href="#contact-pge">contact</a></li>
          <li><a href="#howto-pge">how to</a></li>
      </ul>
  </div>

CSS:

 #nav-bar ul{
      list-style-type:  none;
      margin:           0;
      padding:          0;
      overflow:         hidden;
      background-color: #666666;
      width:            100%;
      position:         fixed;
      top:              80px;

  #nav-bar li{
      float:            left;
      border-right:     3px inset gray;
  }
  #nav-bar li a{
      display:          block;

      height:           25px;
      width:            150px;

      text-decoration:  none;
      text-transform:   capitalize;
      text-align:       center;

      color:            white;
      padding:          15px 15px 10px 15px;
  }
  #nav-bar li a:hover{
    background-color:   #C4BCB9;
  }
  #nav-bar li:last-child{
         border-right: none;
  }

The drop-down part of the css:

#nav-bar li a, .navbar-edit{/*edits the "Deals" tab if needed*/
        cursor:             pointer;
    }

    .navbar-drop:hover .navbar-drop-content{/*Displays the "dropdown box" when the navbar element is hovered over*/
        display:            block;
    }

    .navbar-drop-content{/*this edits the dropdown card itself*/
        display:            none;
        box-shadow:         0px 8px 16px 0px rgba(0,0,0,0.2);/*to make the dropdown menu look like a "card"*/
        width:              100%;
    }
    #nav-bar li .navbar-drop-content a{/*edits the links in the drop down*/
        color:              black;
        background-color:   #F5F3EF;
        text-decoration:    none;
        text-align:         left;
    }
     #nav-bar li .navbar-drop-content a:hover{/*edits the links in the dropdown when hovered*/
        background-color:   red;
        cursor:             url("1note.png"), crosshair;
    }

Answer 1

1. Remove overflow:hidden from #nav-bar ul
2. Give navbar-drop position: relative
3. Give navbar-drop-content position: absolute and position it in relation to the navbar (50px seems about right)

codepen

#nav-bar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*overflow: hidden;*/
  background-color: #666666;
  width: 100%;
  position: fixed;
  top: 80px;
}

#nav-bar li {
  float: left;
  border-right: 3px inset gray;
}

#nav-bar li a {
  display: block;
  height: 25px;
  width: 150px;
  text-decoration: none;
  text-transform: capitalize;
  text-align: center;
  color: white;
  padding: 15px 15px 10px 15px;
}

#nav-bar li a:hover {
  background-color: #C4BCB9;
}

#nav-bar li:last-child {
  border-right: none;
}

#nav-bar li a,
.navbar-edit {
  /*edits the "Deals" tab if needed*/
  cursor: pointer;
}

.navbar-drop {
  position: relative;
}

.navbar-drop:hover .navbar-drop-content {
  /*Displays the "dropdown box" when the navbar element is hovered over*/
  display: block;
}

.navbar-drop-content {
  /*this edits the dropdown card itself*/
  display: none;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  /*to make the dropdown menu look like a "card"*/
  width: 100%;
  position: absolute;
  top: 50px;
  z-index: 1000;
}

#nav-bar li .navbar-drop-content a {
  /*edits the links in the drop down*/
  color: black;
  background-color: #F5F3EF;
  text-decoration: none;
  text-align: left;
}

#nav-bar li .navbar-drop-content a:hover {
  /*edits the links in the dropdown when hovered*/
  background-color: red;
  cursor: url("1note.png"), crosshair;
}

<div id="nav-bar">
  <ul>
    <li><a href="#home-pge">home</a></li>

    <li class="navbar-drop">
      <a class="navbar-edit">deals</a>
      <div class="navbar-drop-content">
        <a href="#opt1">option 1</a>
        <a href="#opt2">option 2</a>
        <a href="#opt3">option 3</a>
      </div>
    </li>

    <li><a href="#about-us-pge">about us</a></li>
    <li><a href="#contact-pge">contact</a></li>
    <li><a href="#howto-pge">how to</a></li>
  </ul>
</div>