difficoltà menu dropdown con bootstrap

[bisco11]

Buongiorno.
Io vorrei aggiungere al mio menu sulla voce CHI SIAMO un sotto menu al passaggio del mouse.
Ho già bootstrap come css ma non riesco a farlo visualizzare.
Che sintassi devo usare per richiamare il dopdown?

di seguito il mio codice

il sito è www.emanuelemarazzi.com

<!-- start header menu -->        <ul class="megamenu skyblue">
            <ul class="megamenu skyblue">
            <li class="active grid"><a class="color1" href="index.html">Home</a></li>
            <li class="grid" ><a class="color2" href="whoweare.html">CHI SIAMO</a></li>
                        <li><a class="color4" href="whatwedo.html">COSA FACCIAMO</a>
                <li><a class="color8" href="promo.html">PACCHETTI CREATIVI</a>
                        <li><a class="color8" href="news.html">NEWS</a>
                <li><a class="color9" href="contact.html">CONTACT</a>
                
</div>
</div>
</div>

Ho risolto con il seguente codice

<li class="grid" class="dropdown"><a class="color1" href="whoweare.html" class="dropdown-toogle" data-toggle="dropdown">CHI SIAMO</a>
<ul class="dropdown-menu">
          <li><a href="#">AGENZIA</a></li>
          <li><a href="#">FILOSOFIA</a></li>
          <li><a href="#">PERSONE</a></li>
         
        </ul>
      </li>

Ma il menu al click mi sta tutto a sinistra ed io lo vorrei sotto alla voce dove clicco, cosa devo modificare nei css?

questo il css

 
.dropdown-menu {
  position: absolute;
  top: 100%;
  left:0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 4px 0 0;
  font-size: 14px;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}