Menu Dropdowns not working - Joomla! Forum - community, help and support

i'm trying design first template. i've gone through course on lynda.com both joomla3 essentials , joomla3 responsive design. got through both without trouble. of course when go design own, doesn't work. made menu , gave class " nav-pills" give dropdown. happens submenus show time. did fresh install of joomla wipe out settings , start fresh.
i've spent hours on today, going , forth between templates, rewriting code, , no avail. can work practice templates, not mine. don't see differences in code menu.
so after pulling hair out, thought should ask help.
thanks ideas.
here's have in template's index.php menu:

code: select all

        <div class="row">
        <nav class="span12 navbar">
             <div class="navbar-inner">
            <div class="container">
               <a class="brand" href="home.html"> <object data="templates/echovalley/images/logo.svg" type="image/svg+xml"></object> </a>
                        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                        </a>
                <div class="nav-collapse collapse">
                  <jdoc:include type="modules" name="nav" style="none" />
                </div>
             
            </div><!--container-->
           
        </div>  <!--navbar-inner-->
       

        </nav> <!--navbar-->
        </div> <!--row -->

here how rendered in browser:

code: select all

 <div class="row">
        <nav class="span12 navbar">
             <div class="navbar-inner">
            <div class="container">
               <a class="brand" href="/echovalley/home.html"> <object data="/echovalley/templates/echovalley/images/logo.svg" type="image/svg+xml"></object> </a>
                        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                        </a>
                <div class="nav-collapse collapse">
                  <ul class="nav menu  nav-pills">
<li class="item-101"><a href="/echovalley/" >home</a></li><li class="item-102 current active"><a href="/echovalley/index.php/about" >about</a></li><li class="item-103 deeper parent"><a href="/echovalley/index.php/services" >services</a><ul class="nav-child unstyled small"><li class="item-105"><a href="/echovalley/index.php/services/industrial-commercial" >industrial/commercial</a></li><li class="item-106"><a href="/echovalley/index.php/services/workshops" >workshops</a></li><li class="item-104"><a href="/echovalley/index.php/services/general-photography" >general photography</a></li></ul></li><li class="item-107 deeper parent"><a href="/echovalley/index.php/gallery" >gallery</a><ul class="nav-child unstyled small"><li class="item-108"><a href="/echovalley/index.php/gallery/lighthouses" >lighthouses</a></li><li class="item-110"><a href="/echovalley/index.php/gallery/commercial" >commercial</a></li><li class="item-109"><a href="/echovalley/index.php/gallery/waterfalls" >waterfalls</a></li></ul></li><li class="item-111"><a href="/echovalley/index.php/news" >news</a></li></ul>

                </div>
             
            </div><!--container-->
           
        </div>  <!--navbar-inner-->
       

        </nav> <!--navbar-->
        </div> <!--row -->

and here additional css have template:

code: select all

.brand {
  display: block;
  float: left;
  padding: 0 14%;
  margin-left: -2%;
  margin-right: 2%;
  font-size: 20px;
  font-weight: 200;
  color: #777777;
  text-shadow: 0 1px 0 #ffffff;
  width: 20%;
  /*margin-top:-2%;*/
 
}

.brand object {
    max-width: 100%;
}


.item-page, .blog, .category-list, .blog-featured, .contact-category, #xmap, .categories-list, .login {
    margin-bottom: 3em;
    min-height: 50%;
    padding: 0 3.5em;
}

/** blog **/
.blog > h2 {
    font-size: 1em;
    font-style: italic;
}

    /**separation between articles**/
.item.column-1 {
    margin-top: 4%;
}