让菜单停留在它上面

您好！这是我的菜单！我现在想要的是，当我点击程序时，我想要下拉菜单仍然显示，但不太确定如何操作。如果有人还对如何我还可以在下拉菜单中逗留，我点击下拉菜单，将是不错的（当我引导到另一个页面）的链接后

<!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

非常感谢！这个问题是，当你点击它一次，然后再次点击它隐藏，它不会隐藏：/任何线索解决它？ –

请在下面找到另一个具有隐藏功能的演示 –

让菜单停留在它上面

回答

相关问题