134 lines
2.5 KiB
CSS
134 lines
2.5 KiB
CSS
|
/*隐藏滑动黑条*/
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.my_style_nav {
|
||
|
|
font-size: 14rem;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-end;
|
||
|
|
|
||
|
|
padding: 0 0;
|
||
|
|
min-width: 10rem;
|
||
|
|
|
||
|
|
/*border: 1px blue solid;*/
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.my_style_nav ul {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 99;
|
||
|
|
/*left: 0;*/
|
||
|
|
top: 26rem;
|
||
|
|
|
||
|
|
/*height: 0;*/
|
||
|
|
/*width: 60rem;*/
|
||
|
|
transform: translate(1em, 0rem);
|
||
|
|
|
||
|
|
|
||
|
|
display: none;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-end;
|
||
|
|
/*justify-content: center;*/
|
||
|
|
/*align-content: center;*/
|
||
|
|
|
||
|
|
/*opacity: 0;*/
|
||
|
|
/*min-height: 70rem;*/
|
||
|
|
max-height: 120rem;
|
||
|
|
/*overflow: hidden;*/
|
||
|
|
overflow: auto;
|
||
|
|
|
||
|
|
padding: 5rem 0;
|
||
|
|
border-radius: 5rem;
|
||
|
|
box-shadow: 0 40rem 80rem rgba(31, 35, 41, 0.1);
|
||
|
|
background-color: rgb(255, 255, 255);
|
||
|
|
border: 1px #f5f5f5 solid;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.my_style_nav ul li {
|
||
|
|
float: none;
|
||
|
|
/*过渡代码*/
|
||
|
|
transition: all .3s;
|
||
|
|
background-color: rgb(255, 255, 255);
|
||
|
|
/*opacity: 0;*/
|
||
|
|
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 1.2;
|
||
|
|
padding: 2rem 5rem;
|
||
|
|
min-width: 55rem;
|
||
|
|
/*border-radius: 5rem;*/
|
||
|
|
/*min-width: 45rem;*/
|
||
|
|
|
||
|
|
/*border: 1px blue solid;*/
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
/*flex-direction: column;*/
|
||
|
|
/*align-items: center;*/
|
||
|
|
justify-content: flex-end;
|
||
|
|
/*align-content: center;*/
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.my_style_nav ul li span {
|
||
|
|
min-width: 20rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*.my_style_nav ul li.done::before{*/
|
||
|
|
/* */
|
||
|
|
/*}*/
|
||
|
|
|
||
|
|
.my_style_nav ul li[data-my-select="true"]::before {
|
||
|
|
content: attr(data-my-select-v);
|
||
|
|
width: 1.2em;
|
||
|
|
transform: rotate(-3deg);
|
||
|
|
|
||
|
|
|
||
|
|
/*content: "";*/
|
||
|
|
/*border-color: black;*/
|
||
|
|
/*border-style: solid;*/
|
||
|
|
/*border-width: 0 0.1em 0.1em 0;*/
|
||
|
|
/*height: 1em;*/
|
||
|
|
/*width: 0.5em;*/
|
||
|
|
/*transform: rotate(50deg);*/
|
||
|
|
/*top: 1em;*/
|
||
|
|
margin-right: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*!*奇数项初始往右边偏移100%*!*/
|
||
|
|
/*.my_style_nav ul li:nth-of-type(1n) {*/
|
||
|
|
/* transform: translate3d(100%, 0, 0);*/
|
||
|
|
/*}*/
|
||
|
|
/*!*偶数项初始往左边偏移100%*!*/
|
||
|
|
/*.my_style_nav ul li:nth-of-type(2n) {*/
|
||
|
|
/* transform: translate3d(-100%, 0, 0);*/
|
||
|
|
/*}*/
|
||
|
|
|
||
|
|
/*.my_style_nav:focus ul {*/
|
||
|
|
/* overflow: visible;*/
|
||
|
|
/*}*/
|
||
|
|
|
||
|
|
|
||
|
|
.my_style_nav span {
|
||
|
|
min-width: 14rem;
|
||
|
|
min-height: 20rem;
|
||
|
|
padding: 0 1rem;
|
||
|
|
/*border: 1px red solid;*/
|
||
|
|
}
|
||
|
|
|
||
|
|
/*透明度和互动同时进行*/
|
||
|
|
.my_style_nav span:hover {
|
||
|
|
/*background: whitesmoke;*/
|
||
|
|
border-radius: 5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*兄弟 ul*/
|
||
|
|
.my_style_nav span:hover + ul {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.my_style_nav ul:hover {
|
||
|
|
display: flex;
|
||
|
|
}
|