#menu{
position: absolute;
left:-21.5em;
width: 20em;
height: initial;
padding: 15px;
z-index: 10;
border-radius: 15px;
box-shadow: 2px 2px 5px 3px #292929;
background-color: rgb(237, 255, 202);
}
#menu:hover{
left:0em;
}
#menu h1{
margin-top: 0;
margin-bottom: 5px;
}
#menu section{
/*
column-count: 2;!*分成2列*!
column-gap: 2rem;!*分栏的间隙宽度*!
column-rule: 1px dashed #f0d187;!*分栏的间隔线样式*!
*/
}
#menu h2{
margin:3px auto;
counter-increment: mycounter;
counter-reset: mysubcounter;
padding-left: 10px;
font-size: 1em;
font-weight: bold;
text-shadow: 1px 1px 1px darkgray;
color: #191919;
background-color: rgba(146, 230, 169, 0.61);
}
#menu h2:before{
content: "—第"counter(mycounter)"章 ";
font-weight: bold;
/*font-size: 1.8em;*/
}
#menu h2:after{
content: "—";
font-weight: bold;
}
#menu section a{
counter-increment: mysubcounter;
display: block;
padding-left: 10px;
margin: 3px 2em;
/*font-family: 华文宋体, 宋体, serif;*/
font-size: .8em;
font-weight: bold;
text-decoration: none;
/*text-shadow: 1px 1px 1px darkgray;*/
color: #252525;
/*background-color: #a8e2f6;*/
}
#menu section a:before{
font-size: 1em;
content: "☞ 第"counter(mysubcounter)"节 ";
font-weight: bold;
}
#menu section a:after{
content: "";
font-weight: bold;
}
#menu section a:visited{
text-shadow:1px 1px 1px gray;
color: #666;
}
#menu section a:hover{
text-decoration:underline;
}
#menu a:active {test:expression(target="_blank");}
$(function () {
var $menu = $("#menu");
$menu.find("a").hide();
$menu.find("h2").hover(function () {
// $(this).next().find("a").show()
// .parent().siblings().css("color","red");
$(this).siblings().find("a").show()
.end().next().find("a").hide();
})
})
一键复制
编辑
Web IDE
原始数据
按行查看
历史
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
