HTML – 隐藏溢出的背景和悬停效果

概述我正在研究 CSS3导航,但是我对悬停效果的溢出有些麻烦. 我试图添加溢出：隐藏 – 没有成功. 这就是它的样子： 这应该是这样的： HTML： <header><div id="header-top"> <nav id="main-navigation" role="navigation"> <ul class="menu"> <li><a href 我正在研究 CSS3导航,但是我对悬停效果的溢出有些麻烦.
我试图添加溢出：隐藏 – 没有成功.

这就是它的样子：

这应该是这样的：

HTML：

<header><div ID="header-top">    <nav ID="main-navigation" role="navigation">        <ul >          <li><a href="#">Home</a></li>          <li><a href="#">About</a></li>          <li><a href="#">Events</a></li>          <li><a href="#">Artists</a></li>        </ul>    </nav></div>

CSS：

#header-top {    height: 70px;    left: 0;    position: fixed;    right: 0;    top: 0;    z-index: 100;}#header-top:after {    background: rgba(0,0.35);    content: "";    height: 120px;    position: absolute;    top: -50px;    left: 0px;    transform: skewY(-4deg);    wIDth: 100%;    z-index: -1;}#main-navigation ul {    display: inline;    float: right;    padding: 0;    margin: 0;}#main-navigation ul li {    display: inline;    line-height: 30px;}#main-navigation ul li a {    display: inline-block;    Font-size: 14px;    Font-weight: 400;    color: #fff;    padding: 20px;}#main-navigation ul li a:hover {    padding: 20px;    background-color: red;}

这是一个小提琴：
http://jsfiddle.net/v9dfjq4L/1/

提前致谢！

解决方法 将背景颜色放在标题上并使用：after元素剪切#header-top的底部.
http://jsfiddle.net/ovtphrqL/

#header-top:after {    background: rgba(255,255,1);    content: "";    height: 120px;    position: absolute;    top: 74px;    left: 0px;    transform: skewY(-3deg);    wIDth: 100%;    z-index: 5;}

总结

以上是内存溢出为你收集整理的HTML – 隐藏溢出的背景和悬停效果全部内容，希望文章能够帮你解决HTML – 隐藏溢出的背景和悬停效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。