我点击菜单后会显示一个列表。但是,除非您按住您的点击,否则它会立即消失。点击后怎样才能让它停留?我必须使用javascript吗?
如果我制作元素菜单:悬停然后它会在悬停时出现,并且它会停留,但我希望能够点击菜单,并且子菜单在点击后仍然会出现。
@charset "UTF-8";
/* CSS Document */
body{
height:1000px;
width:100%;
background:#FCF;
}
#first-div{
width:auto;
height:auto;
background:#9CF;
}
#first-div img:hover{
opacity:0.3;
}
#clear{
clear:both;
display:block;
margin: 50px 0 50px 0;
}
#menu{
width:auto;
height:auto;
background:#0C9;
display:inline-block;
}
ul.nav-menu{
display:inline;
width:auto;
height:auto;
display:none;
}
#menu:active ul.nav-menu{
display:inline;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ns-3.css"/>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="first-div">
<img src="http://www.todayifoundout.com/wp-content/uploads/2014/06/african-elephant-bull.jpg" width="300" height="300" alt=""/>
</div>
<div id="clear"></div>
<nav id="menu">
Menu
<ul class="nav-menu">
<li>text 1</li>
<li>text 2</li>
<li>text 3</li>
</ul>
</nav>
</body>
</html>
答案 0 :(得分:1)
你可以用一些jquery来做到这一点。 将此活动类添加到您的CSS。删除#menu:活动的ul.nav菜单选择器。(p.s。我正在手机上写字)
.active {
display:inline;
}
然后将其添加到脚本标记或文件中:
$('#menu').click(function(){
$('.nav-menu').toggleClass('active');
});
答案 1 :(得分:1)
使用:focus
和tabindex
菜单。
@charset "UTF-8";
/* CSS Document */
body {
height: 1000px;
width: 100%;
background: #FCF;
}
#first-div {
width: auto;
height: auto;
background: #9CF;
}
#first-div img:hover {
opacity: 0.3;
}
#clear {
clear: both;
display: block;
margin: 50px 0 50px 0;
}
#menu {
width: auto;
height: auto;
background: #0C9;
display: inline-block;
}
ul.nav-menu {
display: inline;
width: auto;
height: auto;
display: none;
}
#menu:focus ul.nav-menu {
display: inline;
}
&#13;
<div id="first-div">
<img src="http://www.todayifoundout.com/wp-content/uploads/2014/06/african-elephant-bull.jpg" width="300" height="300" alt="" />
</div>
<div id="clear"></div>
<nav id="menu" tabindex="1">
Menu
<ul class="nav-menu">
<li>text 1</li>
<li>text 2</li>
<li>text 3</li>
</ul>
</nav>
&#13;