Question

这是一个简单的下拉菜单。它是一个使用webkit的免费模板（只学习它是什么）。我对CSS不是很好，我可以更改，以便下拉菜单不会将其他内容推到页面上，但这会产生其他问题。

其他问题是下拉菜单的背景不再是红色，而是透明，转换不起作用。

此外，即使使用透明背景，当我将鼠标悬停在下拉菜单上时，如果没有菜单折叠，我也无法将鼠标悬停在整个列表上。例如，在下面的列表中，有4个项目，Basic，Basic Plus，Ultra和Ultra Plus。当我将 ul 设置为位置：相对时，菜单不再将其余内容推送到页面上，但是当我尝试将鼠标悬停在Ultra上时，菜单消失了。

以下是我开发它的地方：

http://www.oklahomastepparentadoption.com/truck-web/index.php

我真的很喜欢转换在整个下拉菜单中的工作方式（从顶部向下滑动）。

这是CSS代码（下面的HTML）

.top-nav{
  float: right;
  width: 70%;
}
.top-nav ul{
    padding:0;
    margin:0;
}

.top-nav ul  li{
  display: inline-block;
  width: 18%;
  margin-right: .4em;
  float: left;
  position: relative;
}

.top-nav ul  li.active{
      background: #bb1e10;
}

.top-nav ul li a{
color: #FFF;
  font-size: 18px;
  margin-right: .4em;
  float: left;
  padding: 1em 0em 1em 1.4em;
  text-align: center;
  width: 79%;
}
.top-nav ul li a i{
  display: block;
  margin-top: 1em;
  color: #FFF;
  font-size: 11px;
  font-style: italic;
}

.top-nav ul ul {
    display: none;
    left:0;
    float: left;
    position: relative;
}
.top-nav ul ul li {
    float:none;
    width:200px;
    z-index: 1;
}
.top-nav ul ul li a {
    padding: 5px 5px;
}
.top-nav ul li:hover > ul {
    display:block;

HTML CODE：

            <div class="top-nav">
                <span class="menu"><img src="images/menu.png" alt=""></span>

                <ul class="nav1" style="margin-top: .5em;">
                    <li class="hvr-sweep-to-bottom active"><a href="index.php">Home</a></li>
                    <li class="hvr-sweep-to-bottom" style="width:22%;"><a href="fleet.php" style="padding-top:0.25em; padding-bottom:.35em;">Fleet Management</a>
                        <ul class="level_1">
                            <li><a href="#">Basic</a></li>
                            <li><a href="#">Basic Plus</a></li>
                            <li><a href="#">Ultra</a></li>
                            <li><a href="#">Ultra Plus</a></li>
                        </ul>
                    </li>
                    <li class="hvr-sweep-to-bottom"><a href="services.php" style="padding-top:0.25em; padding-bottom:.35em;">Broker Agency</a></li>
                    <li class="hvr-sweep-to-bottom"><a href="blog.php">Drivers</a></li>
                    <li class="hvr-sweep-to-bottom"><a href="mail.php">Contact</a></li>
                    <div class="clearfix"> </div>
                </ul>

Answer 1

将position: absolute添加到菜单中。另外，请务必更新top和background：

.top-nav ul ul {
    display: none;
    left: 0;
    /* Changes below */
    float: none;
    position: absolute;
    top: 62px;
    background: #bb1e10;
}

预览

<强>更新

将其添加到.header：

.header { position: relative; z-index: 10000; }

修复了最后一个链接：

Answer 2

正如Praveen所说，你需要让导航器绝对定位。但请确保，容器“标题”是相对定位的，否则它将填满整个屏幕的40％。

看看这个小提琴，看看我的意思：{{3}}

.header {
    position:relative;
}
.top-nav {
    position:absolute;
    width:40%;
    top:0;
    right:0;
}

Answer 3

你可以尝试这个http://callmenick.com/post/slide-down-menu-with-jquery-and-css，正如我注意到的，你的下拉列表的css没有任何过渡元素。试试我提供的链接，它可以帮助你解决过渡

CSS Dropdown将内容向下推送

3 个答案: