css - HTML restructure for Navbar issue -


i trying make children not effect navbar , display dropdown menu.

current example at: dev4you.byethost15.com

function should follows:

  1. user hovers on parent item
  2. children shown in box list, underneath.

currently happening when children displayed on parent hover navbar pushed down compensate, not want functionality, trying create dropdown menu here.

also other html structure advice appreciated if 1 not optimal.

html

<div class="row">       <div class="navbar-header col-md-8">         <a class="navbar-brand" rel="home">portal</a>       </div>       <ul class="nav navbar-nav" ng-repeat="item in data">           <li class="innerli"><a ng-mouseover="ischildrenvisible=true" ng-mouseleave= "ischildrenvisible=false">{{item.title}}</a></li>           <ul style="padding-left:20px;">             <li class="menuchild" ng-show="ischildrenvisible" ng-repeat="child in item.children ">                     <p>{{child.title}}</p>             </li>           </ul>       </ul>     </div> 

use these css settings in inner children li.

<li ng-show="ischildrenvisible" ng-repeat="child in item.children " class="ng-scope ng-hide innerli"  ">  <p class="ng-binding">long sub2</p></li>  

css:

  .innerli{       position: absolute;       top: 65%;       margin-left: -25px;     } 

Comments

Popular posts from this blog

How to connect android app to App engine -

gcc - MinGW's ld cannot perform PE operations on non PE output file -

php - display validation error message next to the textbox in codeigniter -