问题
症状大概是这个样子：
解决办法
给当前设置 border 和 border-radius 属性的元素加：
overflow: auto;
...小于 1 分钟
CSS背景上下渐变的实现
background: -webkit-linear-gradient(top, #eefaef, #ffffff);
/* 关于渐变色的兼容 */
background: -ms-linear-gradient(top, #eefaef, #ffffff); /* IE 10 */
background: -moz-linear-gradient(top, #eefaef, #ffffff); /*火狐*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eefaef), to(#ffffff)); /* Safari 4-5, Chrome 1-9*/
background: -o-linear-gradient(top, #eefaef, #ffffff); /*Opera 11.10+*/
...小于 1 分钟
纯CSS实现下拉菜单
ul，li版本
<nav role="navigation">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a>
<ul class="dropdown">
<li><a href="#">Sub-1</a></li>
<li><a href="#">Sub-2</a></li>
<li><a href="#">Sub-3</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
</ul>
</nav>
<style>
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
background: darkorange;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #fff;
background: darkorange;
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
background: red;
cursor: pointer;
}
ul li ul {
background: orange;
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li:focus-within > ul, /* this is the line we add */
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
</style>
...大约 2 分钟