javascript - Submenu CSS dropdown menu disappears in CSS dropdown menu when mouse moves off of <li> -

-

well not in js, think 1 can solving problam. got sub menu sub menu also. simple:

<div class="dr_nav"> <ul> <li><a href='#'>home</a> <ul>    <li><a href='#'>list example #1</a></li>    <li><a href='#'>list example #2</a>        <ul>           <li> <a href='#'>list example child #1</a> </li>        </ul>    </li>  <li><a href='#'>list example #3(hover)</a></li> </ul> </li> </ul> </div>

but! thing want, when hovers on "list example #2" , "list example child #1" appears (in css put display:none it) stay visible if move out coursor parent "list example #2". hope can me this.

my css bit hard , unorganized:

.dr_menu {      margin: 0;     padding: 0;     list-style: none;     position: relative;     z-index: 999; }  .dr_menu>ul {      margin: 0;     padding: 0;     text-align: center; }  .dr_menu>ul>li {      display: inline-block;     padding: 0 0 10px 0;     margin-right: 40px; }  .dr_menu>ul>li:last-child {      margin:0; }  .dr_menu ul li>ul {      display: none;     position: absolute;     left: 0;     background-color: white;     margin: 0;     padding-top: 10px;     top: 100%;     -webkit-padding-start: 0px;     width: 1400px; }  .dr_menu ul li ul li, .dr_menu ul li ul li {      padding: 10px 0px 10px 30px;     text-align: left;  } .dr_menu ul li ul li {      display: block;     width: 770px;     color: #a0a0a0;     margin-left: 300px; }  .dr_menu ul li ul li ul {      display: none;      padding: 0;     position: relative;     padding-top: 20px; }  .dr_menu ul li ul li ul li {          margin-left: 330px;         width: 740px; } .dr_menu ul li ul li ul li  {          padding: 0; }  .dr_menu {          text-decoration: none;         color: #a0a0a0; }  .dr_menu>ul>li>ul>li {      padding-left: 0; }  .dr_menu ul>li:hover {      background-image: url('./img/nav_copy.png');     background-position: bottom;     background-repeat: no-repeat;  }   .dr_menu ul>li>a:hover {      color: white; }  .dr_menu ul li a:hover {      color: white; }  .dr_menu>ul>li>ul>li:last-child {      margin-bottom: 30px; }  .dr_menu li:hover>ul {      display: block;     color: white; }  .dr_menu ul li ul li a:hover {      background-color: #a0a0a0;     color: black; }

here mu js:

jquery(document).ready(function(){ $('#child').mouseleave(function() {$('#child').show()},  false); }

you can make menu css:

demo fiddle

.dr_nav li:hover>ul{     display:block; } .dr_nav li>ul{     display:none; }

Comments

Post a Comment

Popular posts from this blog

c# - How to get the current UAC mode -

-
can check current uac type set in device before running application through c#. i got know approach check whether current user administrator or not. but, need know uac type set (i.e. default/never notify) internal logic. is possible? please help. this article self-elevation , checking level program runs in. due security reasons i'm afraid won't able retrieve uac level set. http://code.msdn.microsoft.com/windowsdesktop/csuacselfelevation-644673d3
Read more

postgresql - Lazarus + Postgres: incomplete startup packet -

-
i've been building lazarus pascal program using postgresql on back-end. used work fine following lines opening db. dbconn:= tpqconnection.create(nil); dbconn.hostname := 'localhost'; dbconn.databasename:= 'dbhrs'; dbconn.username:='mizk'; dbconn.password:='123'; dbconn.open; if dbconn.connected openhrsdb := true else openhrsdb := false; but moment change localhost server's ip (on lan), program stops. no errors or warnings. have no clue happening. here related details may narrow down problem. the program i'm running workstation on same lan server. both machines run ubuntu 12.04 desktop i can access postgres db on server using pgadmin iii, guess it's not firewall issue. i have allowed postgresql ufw , ufw disabled. strangely, when firewall disabled, can ssh server terminal using workstation. when it's enabled, can't my biggest concern right why pascal program not working when i...
Read more