bootstrap drop down menu not aligned - html

Question

I can not seem to figure out why my menu does not align properly on the sub dropdowns. They display at the lower edge of its parent cell and it makes trying to navigate through them almost impossible. You have to drop down diagonally just right to get the next menu.
http://imgur.com/zxWcmZf "Screenshot of menu"
I have posted the menu's code below does anything stand out to anyone as to what I am missing? This is my first play with bootstrap. Thanks a million for everyone's time on help with this.
<div class="navbar-wrapper">
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<div class="buttons-container">
</div>
<ul class="blue nav" id="css3-menu">
<li>Home </li>
<li class="dropdown"><a tabindex="-1" class="dropdown-toggle_" data-toggle="dropdown"
href="">Choice 1</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a tabindex="-1" href="#">Choice 1a</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">Choice 1a1
<ul class="dropdown-menu">
<li><a tabindex="-1" href="">Choice 1a1a</a></li>
<li><a tabindex="-1" href="">Choice 1a1b</a></li>
</ul>
</li>
<li class="dropdown-submenu">Choice 1a2
<ul class="dropdown-menu">
<li><a tabindex="-1" href="">Choice 1a2a</a></li>
<li><a tabindex="-1" href="">Choice 1a2b</a></li>
</ul>
</li>
<li class="dropdown">Choice 1b </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle_" data-toggle="dropdown" href="">Choice
2</a>
<ul class="dropdown-menu">
<li>Choice 2a</li>
<li>Choice 2b</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle_" data-toggle="dropdown" href="">Choice
3</a>
<ul class="dropdown-menu">
<li>Choice 3a</li>
<li>Choice 3b</li>
</ul>
</li>
<li>Choice 4 </li>
<li>Choice 5 </li>
</ul>
</div>
</div>
</div>
</div>
EDIT:
Sorry I forgot the CSS don't know what I was thinking. Here is the CSS relating to it. Thanks for the input so far :)
/* css3 menu */
ul#css3-menu{
width: 940px;
min-width: 940px;
margin: 0 auto;
list-style: none;
font-family: 'Open Sans', Arial, "MS Trebuchet", sans-serif;
height: 46px;
padding: 0;
}
ul#css3-menu > li{
display: block;
float: left;
-webkit-transition: background .4s linear;
-moz-transition: background .4s linear;
-ms-transition: background .4s linear;
-o-transition: background .4s linear;
transition: background .4s linear;
<!--[if IE]>
position: relative;
<![endif]-->
}
ul#css3-menu > li:first-child{
border-left: none !important;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
-ms-border-top-left-radius: 4px;
-ms-border-bottom-left-radius: 4px;
-o-border-top-left-radius: 4px;
-o-border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
ul#css3-menu > li:last-child{
border-right: none !important;
}
ul#css3-menu > li > a{
display: block;
padding: 15px 30px;
color: white;
text-decoration: none;
font-weight: 600;
font-weight: bold;
}
/*
ul#css3-menu > li:hover > div{
-webkit-transform: translateY(-80px);
-moz-transform: translateY(-80px);
-ms-transform: translateY(-80px);
-o-transform: translateY(-80px);
transform: translateY(-80px);
}
*/
/*visibility: visible;*/
ul#css3-menu > li > div{
-webkit-transition: -webkit-transform .2s linear;
-moz-transition: -moz-transform .2s linear;
-ms-transition: -ms-transform .2s linear;
-o-transition: -o-transform .2s linear;
transition: transform .2s linear;
text-align: center;
margin: 0 auto;
-webkit-transform: translateY(-60px);
-moz-transform: translateY(-60px);
-ms-transform: translateY(-60px);
-o-transform: translateY(-60px);
transform: translateY(-60px);
width: 37px;
height: 37px;
/*visibility: hidden;*/
margin-bottom: -37px;
z-index: -1;
<!--[if IE]>
margin-top: -60px;
<![endif]-->
}
ul#css3-menu.blue > li > div{
background: url(../img/icons-blue.png) 0 0 no-repeat;
}
.navbar-wrapper {
background: #2773AE;
background-color:#2773AE; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#2773AE, offX=0, offY=0, positive=true);
box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
-webkit-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
-moz-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
}
ul#css3-menu.blue{
background: #2773AE;
background-color:#2773AE; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#2773AE, offX=0, offY=0, positive=true);
box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
-webkit-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
-moz-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
}
ul#css3-menu.blue > li{
border-right: 1px #074979 solid;
border-left: 1px #3e92d0 solid;
height: 46px;
}
ul#css3-menu.blue > li:hover{
background: #074979;
}

Answer 1

It is something in your additional CSS file (that you haven't posted) that is causing this, not the html you posted, nor any of the bootstrap css files. When I test the html you posted (my entire html file below), I get the dropdowns to align as expected: http://imgur.com/XyYV5pE.
You may want to post the CSS you are including so folks can look at what might be causing this -- or simplify your CSS to bare bones and add each part back one by one to track the culprit.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
</head>
<body>
<!--your exact markup posted in its entirety, unaltered, here-->
</body>