这是代码
--------------------------- CSS ------------------- ---
body {
width:100%;
margin: 0px;
padding: 0px;
text-align: left;
font: 12px Arial, Helvetica, sans-serif;
font-size: 13px;
background: url('../images/bg.jpg');
background-repeat:repeat-x 0px 30px;
}
.dsply { display: none; }
.logo { background: url(../images/logo.jpg) no-repeat 25px 25px;
float:left;
width: 175px;
height: 150px;
}
.nav-flag-left { /* background: url(../images/nav-flag-left.png) no-repeat 13px 40px; */
float:left;
margin-top:47px;
margin-left:0px;
width: 13px;
height: 40px;
}
#menu {
width: 50%;
height: 40px;
margin-top:47px;
margin-left:0px;
margin-right:0px;
font-size: 14px;
font-family:Trebuchet MS,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
font-weight: bold;
text-align:left;
float:left;
text-shadow: 3px 2px 3px #DA9AFB;
background-color:#F6F9E8;
/* background-image: url(../images/logo.jpg);*/
background-repeat: no-repeat;
border-radius: 0px;
}
#menu li {
display:inline;
padding:5px;
text-align:left;
margin:auto;
}
#menu a {
text-decoration:none;
color:#7D169D;
padding:8px 8px 8px 8px;
text-align:center;
}
#menu li:hover {
display:inline;
color:#FFF;
text-shadow: 3px 2px 3px #FCF;
padding-top:20px;
/* background-color:#7D169D;*/
background-image: url(../images/pinkcloud.png);
background-repeat:no-repeat;
/* background-size: 100%;
background-size: 60px 90px; */
top:40px;
height:60px;
width:90px;
position:absolute;
}
.nav-flag-plane {
float:left;
margin-top:32px;
margin-left:0px;
width: 109px;
height: 71px;
}
.nav-menu-cloude {
float:left;
margin-top:32px;
margin-left:35px;
width: 109px;
height: 75px;
}
使用上面给出的css和悬停效果的图像。问题是鼠标悬停在第一个菜单项上的其他项目变得缩小而第二个项目变为隐藏。