jquery - horizontal center align nested ul li -


well trying design navigation menu such when hover on menu item fork horizontal child list sub menu, till working properly. want child list should aligned center respect parent. drawn equal-to(=) sign, please help. 

  =        =      = = = =      =   = = = =

this html structure: 

 <ul>        <li><a href="jjbrides.php" rel="pageurl">collection</a>      <ul>          <li><a href="jjbrides.php" rel="pageurl">jj brides</a></li>          <li><a href="maketime-stop.php" rel="pageurl" class="subnav">make time stop</a></li>          <li><a href="jjbrides.php" rel="pageurl">jj brides</a></li>          <li><a href="maketime-stop.php" rel="pageurl" class="subnav">make time stop</a></li>      </ul>      </li>      <li><a href="upcoming-event.php" rel="pageurl">events</a>          <ul>              <li><a href="upcoming-event.php" rel="pageurl">upcoming</a></li>          </ul>      </li> </ul>

/* css style */

.nav > li {     line-height: 20px;     text-align: center;     float: left;     list-style: none; } .nav li {     color: #737663;     display: block;     text-decoration: none;     text-align: center;     opacity: 1;     padding: 10px 42px;     font-family:'sangbleu_bp_sanslight';     text-transform:lowercase } .nav > li > {     text-transform: lowercase;     font-size:20px; } .nav li.navhover > {     color: #737663!important;     text-decoration: none;     opacity: 1; } .nav li a:active, .nav li a:focus {     text-decoration: none; } /*.nav li > ul{margin-left: 20px;}*/ .nav li> ul li {     text-transform: lowercase;     font-family:'farnhamdisplay-lightital'!important;     font-size:18px; } .nav li ul li {     text-transform: lowercase;     color:#737663;     padding:10px 20px!important; } .nav li.navhover ul li:hover {     color: #737663;     opacity: 1; } .nav li > ul {     display: none;     margin: 0 0 0 20px;     padding:0;     list-style:none;     float: left;     position: absolute;     width: 500px;     z-index: 10; } .nav li.navhover > ul {     display: block; } .nav li ul li {     padding:0;     margin-top:3px;     float: left;     display: inline-block; } .nav li ul li:hover a, .inviewlink {     border-bottom:3px solid #737663; } .inviewlink:hover {     margin-bottom:-3px } .nav > li.active, .nav > li.active:hover {     /*background-color: #eee;*/ } .nav > li.active {     color:#737663 } .nav > li.active:before {     width:100%;     height:100%;     content:' ';     visibility:visible;     top:0;     left:0;     z-index:10; } .nav > li.active > ul {     display:block; } .nav > li:first-child + li {     margin-right: 365px; } .nav > .sidebar-brand {     height: 55px;     line-height: 55px;     font-size: 18px; } .nav>li {     z-index:1 } .nav li.navhover {     z-index:3 } .nav li.navhover:after {     content:' ';     display:block;     width: 3000px;     background:#fff;     position:absolute;     z-index: 1;     /* top:0; */     height: 45px;     left: -1000px; }

hello there should check link in example sub menu comes in center , hope helps you.

* { margin:0; padding:0; } .nav{   display:block;   list-style:none;   text-align: left;     position: relative;     height: 30px; } .nav li {    display: block;   position: relative;   float: left;     border: 1.5px solid #fff; } .nav li {    width: 125px;   height: 30px;   display: table-cell;     vertical-align: middle;   text-decoration: none;   font-size: 12px;   font-family: arial, verdana, helvetica, sans-serif;   text-align: center;   color: #000;   z-index: 2000;       background-color: #999; } li.active {   background-color: #999 ;   color: #000; } .nav li a:hover {     top: 30px;   }  .nav li:hover > {   color:#fff;   background-color:#333;   }  .nav li ul {    width: 125px;   height: 25px;   position: absolute;   left: -9999px;     border: 1.5px solid #fff; } .nav li:hover ul {   left: -2px; }  .nav li li:hover > {   color:#000;   background-color:#999;   }  .nav li li{    position: relative;   border: 1.5px solid #fff;   height: 25px;  } .nav li li {   height: 25px;   top: 25px;   text-decoration: none;   font-size: 9px;   font-family: arial, verdana, helvetica, sans-serif;   text-align: center;   display: table-cell;     vertical-align: middle;   color: #000;   z-index: 2000;       background-color: #999; } li li.active {   background-color: #a9d9d9 ;   color: #007f7b; }  .nav li li:hover ul {   left: -2px;     top: 25px;  }  ul.nav li > ul {   width: 700px;   height: 25px;   background-color:red; }  ul.nav li > ul > li > ul {   background-color:green;   height: 25px;  }  ul.nav li > ul > li { display: none; } ul.nav li:hover li { display: block; }

demo


Comments

Post a Comment

Popular posts from this blog

javascript - Jquery show_hide, what to add in order to make the page scroll to the bottom of the hidden field once button is clicked -

i have button on website when clicked, reveals map. button can seen when page first loads up, when clicked, section holding map slides open , goes out of screen since page loads @ top (normal). want page scroll down bottom of div select when button pushed, if map out of screen. if page scrolled down, , clicks show map button, don't want page jump bottom of map. i tried figure out myself, no luck. seasoned jquery coders able give me guidance? many thanks! map = mapdiv.gmap3("get"); infobox = new infobox({ pixeloffset: new google.maps.size(-220, -310), closeboxurl: '', enableeventpropagation: true }); mapdiv.delegate('.infobox .close','click',function () { infobox.close(); }); jquery(".slidingdiv").hide(); jquery(".show_hide").show(); jquery('.show_hide').click(function(){ lastcenter=map.getcenter(); jquery(".slidingdiv&quo
Read more

javascript - Highcharts multi-color line -

Image
i looking create highchart multi-colored line. if goes down under value, become red, , when comes on value, become green . here picture example: or maybe highcharts have other charts models differentiate high or low level color? you can achieve coloring using lineargradient coloring: color: { lineargradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, stops: [ [0, 'red'], [0.25, 'yellow'], [0.50, 'green'], [0.75, 'yellow'], [1, 'red'] ] } here 0 in stops relates minimum value of series , 1 maximum value, , in between percentages between values. if find percentages according values prior creating chart use correct stops values make relate specific values in data (at least approximately). see this jsfiddle example .
Read more

javascript - Enter key does not work in search box -

tried search guys sorry. input in search box doesnt work (or search) when hit enter when user clicks search button. doing wrong? here code. thanks. <script type="text/javascript"> $(document).ready(function() { $("#submit").click(function() { var url = "http://asla.org/awardssearch.html"; url += "?s=" + $('#googlecse').val(); window.location = url; }); $('#googlecse').keydown(function(event) { if (event.keycode == '13') { $("#submit").click(); } else { //do nothing :) } }); }); </script> <form class="navbar-form navbar-right" role="search"> <div class="search"> <input id="googlecse" type="text" onblur="if(this.value=='')this.value=this.defaultvalue;" onfocus="if(this.value==this.defaultvalue)t
Read more