Twitter Bootstrap Nav-pills with “notification” not placing as desired

Question

I am trying to put "notification" icons in the top corner of my nav pills, however I cannot seem to get them to place correctly. When I place the span in the li element it makes the element larger, and I do not want this behavior. If I try to put it between the li elements it adds a blank space.

The nav pills also have styling so in addition to the html and css markup I put it all in a jsbin.

In the end I would like to be able to place the "notification" span in any corner(adjustable)

HTML

  <ul id="contentFirstMenu" class="nav nav-pills">
    <li><a href="#viewFullText">Something</a></li>
    <span class="notification">5</span>
    <li><a href="#inTheLibrary">Something</a><span class="notification">20</span></li>

    <li><a href="#requestACopy">Another</a></li>
    <li><a href="#requestACopy">Another</a></li>
  </ul>

Notification CSS

.notification {
    color: #222;
    position: relative;
    background: #fff;
    border: 1px solid #830600;
    border-radius: 15px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    font-weight: bold;
    font-size: 12px;
    -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
    padding: 0 7px;
}

http://jsbin.com/ohofus/2/edit

Answer 1

Seems to me the easiest thing to do here is put the .notification elements inside the <li/> s and set the positioning. To do this just add:

.notification {
    top: 0; /* to align to top....*/
}

#contentFirstMenu > li {
    position: relative; /* ensures the spans are positioned according to this elements bounds */
}

as I have done here: http://jsbin.com/ohofus/7

Hope it helps :)

Answer 2

I'm not sure if this is what you want, I added:

#contentFirstMenu > li {
    // width: 70px;
    position: relative;
}

.notification {
    position: absolute;
    top: -10px;
    right:-12px;
    z-index: 2;
}

The span is inside the li .