讓菜單停留在它上面

您好！這是我的菜單！我現在想要的是，當我點擊程序時，我想要下拉菜單仍然顯示，但不太確定如何操作。如果有人還對如何我還可以在下拉菜單中逗留，我點擊下拉菜單，將是不錯的（當我引導到另一個頁面）的鏈接後

<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="sv"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Nösnäs</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"/> 
     <link rel="stylesheet" type="text/css" media="screen" href="mobilemenu.css"/> 
     <link rel="stylesheet" type="text/css" href="screen.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
     <script> 
     $(document).ready(function(){ 
      $(".nav-button").on('click',function() { 
      $(".nav-button,.nav").toggleClass("open"); 
      });  
     }); 
     </script> 
</head> 
<body> 

<button class="nav-button">Toggle Navigation</button> 





<ul class="nav"> 
<li><a href="#">Program</a> 
<div class="second nav"> 
    <ul> 
<li><a href="#">Teknik</a></li> 
<li><a href="#">Naturvetenskap</a></li> 
<li><a href="#">El</a></li> 
</ul></li> 
</div> 
    <li><a href="#">Nösnäs</a></li> 
    <li><a href="#">Schema</a></li> 
    <li><a href="#">Matsal</a></li> 
    </ul> 




<style>.xg_module_body img {margin:0!important;}</style> 
<span class="bilder"> 
<div align="center"><table cellpadding="0" width="150" cellspacing="0"><tr> 
<td><a href="#" target="_blank"><img src="facebookpic.png" title="Gilla våran Facebook sida" width="35" height="35" border="0"></a></td> 

<td><a href="#"target="_blank"><img src="googlepic.png" title="Gilla oss på googlde+" width="35" height="35" border="0"></a></td> 

<td><a href="#" target="_blank"><img src="twitterpic.png" title="Följ oss på Twitter" width="35" height="35" border="0"></a></td> 

<td><a href="#" target=""><img src="rsspic.png" width="35" height="35" border="0" title="Följ våran RSS"></a></td> 
</tr> 
</table></div> 
</span> 

<style>.xg_module_body img {margin:0!important;}</style> 
<span class="bilderna"> 
<div align="center"><table cellpadding="0" width="150" cellspacing="0"><tr> 
<td><a href="#" target="_blank"><img src="facebookpic.png" title="Gilla våran Facebook sida" width="35" height="35" border="0"></a></td> 

<td><a href="#"target="_blank"><img src="googlepic.png" title="Gilla oss på googlde+" width="35" height="35" border="0"></a></td> 

<td><a href="#" target="_blank"><img src="twitterpic.png" title="Följ oss på Twitter" width="35" height="35" border="0"></a></td> 

<td><a href="#" target=""><img src="rsspic.png" width="35" height="35" border="0" title="Följ våran RSS"></a></td> 
</tr> 
</table></div> 
</span> 


</body> 
</html> 


* { margin:0; 
padding:0; 
} 

html {height: 100%;} 

body{ 
    position: relative; 
    height: 100%; 
    background: #fff; 

} 



/* Första boxarna*/ 
ul.nav { 
    list-style: none; 
    display: block; 
    width: 170px; 
    position: relative; 
    top: :0px; 
    left: 10px; 
    z-index:0; 
    padding: 100px 0 50px 0; 
    background: url(sh.png) no-repeat; 
    -webkit-background-size: 50% 100%; 
    display: list-item; 
    font-family: OpenSans-Regular; 
    font-size: 18px; 

} 




li { 
    margin: 5px 0 0 0; 
} 

/* När jag drar musen över */ 
ul.nav li a { 
    -webkit-transition: all 0.3s ease-out; 

    color: #174867; 
    padding: 7px 15px 7px 15px; 
    -webkit-border-top-right-radius: 3px; 
    -webkit-border-bottom-right-radius: 5px; 

    display: block; 
    text-decoration: none; 
    -webkit-box-shadow: 2px 2px 4px 2px #888; 
} 

ul.nav li a:hover { 
    background: #ebebeb url(border.png) no-repeat; 
    color: #67a5cd; 
    padding: 9px 15px 7px 30px; 
} 
ul.nav li ul { 
display:none; 
} 
ul.nav li:active ul { 
display:block; 
position:relative; 
left:3px; 
top:0px; 
list-style: none; 
z-index:999; 
background: #888; 
} 

ul.nav li ul li 
{ 
background:#888; 

}

線索

來源

2014-01-21 Rory Galloway

javascript 

    $(".program").on('click',function() { 
        $('li div ul').toggle('.close'); // new added 
        $('li div ul').show(); 

      }); 


    css 

    .close{display:none;} // new added

http://jsfiddle.net/2N9Y8/2/

來源

2014-01-21 11:16:00

非常感謝，由於某種原因，無法在網站上正常工作，但希望能夠解決它！謝謝！ :) –

享受歡呼！ –

In you css 
ul.nav li ul { 
    display:none; 
    } 
    so thats why on click it is not displayed 

I gave a class in li for the program li. 
<li class="program"><a href="#">Program</a> 



    Below is the javascript. 



     $(".program").on('click',function() { 
          $('li div ul').show(); 

        });

的js小提琴演示http://jsfiddle.net/2N9Y8/1/

來源

2014-01-21 10:35:42

非常感謝！這個問題是，當你點擊它一次，然後再次點擊它隱藏，它不會隱藏：/任何線索解決它？ –

請在下面找到另一個具有隱藏功能的演示 –

讓菜單停留在它上面

回答

相關問題