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

我正在研究

CSS3导航,但是我对悬停效果的溢出有些麻烦.

我试图添加溢出：隐藏 – 没有成功.

这就是它的样子：

这应该是这样的：

HTML：

• Home
• About
• Events
• Artists

CSS：

#header-top {

height: 70px;

left: 0;

position: fixed;

right: 0;

top: 0;

z-index: 100;

}

#header-top:after {

background: rgba(0,0,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;

}

提前致谢！