Question

悬停效果下一个菜单项隐藏在当前菜单后面或缩小水平导航栏上的所有项目

---------------------------- 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 { 
        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-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-image: url(../images/pinkcloud.png); 
    background-repeat:no-repeat;  
    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;
}

------------------------ HTML ---------------------- ---------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baby Zone</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>

<div class="logo"><a href="index.html" title="Baby Zone"><span class="dsply">Baby Zone</span></a> </div>
<div class="nav-flag-left"><img src="images/nav-flag-left.png" width="13" height="40" /></div>
<div id="menu">

<ul>

    <li><a href="index.html">Home</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="brands.html">Brands</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="aboutus.html">About Us</a></li>
    <li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
<div class="nav-flag-plane"><img src="images/plane.png" width="109" height="71" /></div>
<div class="nav-menu-cloude"><img src="images/menucload.png" width="109" height="75" /></div>
</body>
</html>

Answer 1

为什么在悬停时将位置更改为绝对？这就是打破菜单的原因

position:absolute;

所以你的课应该是：

#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;
}

您可以看到它正在发挥作用：http://jsfiddle.net/7ZQH3/

悬停效果下一个菜单项隐藏在当前菜单后面或收缩水平导航栏上的所有项目

1 个答案: