Question

我正在尝试开发一个包含下拉菜单的网站，在下一个菜单下面有一个滑块分割，但当鼠标悬停在菜单上时，子菜单显示，滑块分割向下移动。

所以任何人都可以建议我如何完成任务代码如下

<html>
<head>
<style type="text/css">
#header{
    height: 90px;
}
#navigation{
    height: 30px;
    background-color: #0099FF;
    border: 1px solid #0099FF;
    border-radius: 10px;
    z-index:1000;
}
ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
ul li {
    display: block;
    position: relative;
    float: left;
    padding-right: 40px;    
}
li ul {
    display: none;
}
ul li a {
    display: block;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    color: #FFFFFF;
    font:Verdana, Arial, Helvetica, sans-serif;
    font-size: 20px;
}
ul li a:hover {
    background: #00CCFF;
}
li:hover ul {
    display: block;
    z-index: 1000;
}
li:hover li {
    float: none;
}
li:hover a {
    background: #00CCFF;
}
li:hover li a:hover {
    background: #D2F5FF;
}
#drop-nav li ul li {
    border-top: 0px;
}
#clearmenu{
    clear: left;
}
#sliderandnews{
    height: 300px;
}
#slidermain{
    height: 300px;
    width: 65%;
    float: left;
}
#news{
    height: 300px;
    width: 33%;
    border: 2px solid #F0FFFF;
    border-radius: 20px;
    float: right;
    background-color: #F0FFFF;
}
.clear{
    height: 40px;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="navigation">
    <ul id="drop-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Academic Programs</a>
            <ul>
                <li><a href="#">BBA</a></li>
                <li><a href="#">BCA</a></li>
                <li><a href="#">BE</a></li>
            </ul>
        </li>
        <li><a href="#">Faculties</a></li>
        <li><a href="#">Admission</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>
</div>
    <div class="clear"></div>
    <div id="sliderandnews">
        <div id="slidermain">
            This section is changes its position on mousehover
        </div>
        <div id="news">
        </div>
    </div>          
</body>
</html>

Answer 1

问题是你的元素是相对定位的。因此，当子菜单出现时，下面的所有元素都会向下移动。您可以向导航栏添加绝对定位，并使用CSS中的top属性从顶部确定其位移。这允许您消除#header（其中只有角色可以提供上边距）。

#navigation{
    position:absolute;
    top:90px;
}

同样，您可以使用#sliderandnews块。由于您已经对导航菜单进行了绝对定位，因此将从页面内的HTML元素流中删除导航。要弥补这一点，您必须为此元素添加适当的上边距。

#sliderandnews{
    height: 300px;
    margin-top:190px;
}

这是最后的fiddle。

当鼠标悬停在下拉菜单上时，页面上的分区会被移动

1 个答案: