I am having trouble figuring out a way to keep the tab open when a header is selected. 目前,选项卡仅在鼠标悬停时保持打开状态,但一旦鼠标移动到另一个区域,选项卡就会关闭。谢谢
}
.verticalaccordion>ul {
margin: 0;
padding: 0;
list-style:none;
width: 280px;
float: right;
}
.verticalaccordion>ul>li {
display:block;
overflow: hidden;
margin: 0;
padding: 0;
list-style:none;
height:40px;
width: 280px;
/* Decorative CSS */
background-color:#f0f0f0;
}
.verticalaccordion>ul>li>h3 {
display:block;
margin: 0;
padding:10px;
height:19px;
/* Decorative CSS */
border-top:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
color: #FFFFFF;
background: #074377;
}
.verticalaccordion>ul>li>div {
margin:0;
overflow: auto;
padding:10px;
height:220px;
}
.verticalaccordion>ul>li:hover {
height: 280px;
}
.verticalaccordion:hover>ul>li:hover>h3 {
/* Decorative CSS */
color:#fff;
background: #CA006C;
}
verticalaccordion section:target
{
width: 30em;
padding: 0 1em;
color: #333;
background-color: #fff;
}
verticalaccordion section:target h2
{
position: static;
font-size: 1.3em;
text-indent: 0;
color: #333;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
这是其余代码的示例:
<div id="google-map">
<iframe src="frame link" name="frame" width="550" marginwidth="0" height="650" marginheight="0" scrolling="No" frameborder="0" id="frame-window"></iframe></div><div class="verticalaccordion" >
<ul>
<li>
<h3>Menu</h3>
<div>
<ul class="location">
<li><a href="Link" target="frame">Link 1</a><br />
<font color="#000000">Link Info</font></li>
<li><a href="Link 2" target="frame">Link 2</a><br />
<font color="#000000"> Link Info</font> </li>
</ul>
</div>
</li>
</ul>
</div>
我试图让下拉菜单保持打开状态,即使鼠标不再悬停,直到选择另一个类别