html - CSS Dropdown 将内容向下推到页面

Question

这是一个简单的下拉菜单。这是一个使用webkit的免费模板(只是了解这是什么)。我不太擅长 CSS，我可以进行更改，以便下拉菜单不会将其他内容推到页面下方，但这会产生其他问题。

其他问题是下拉菜单的背景不再是红色，而是透明的，过渡效果不佳。

此外，即使有透明背景，当我将鼠标悬停在下拉菜单上时，如果菜单不折叠，我也无法将鼠标悬停在整个列表上。例如，在下面的列表中，有 4 个元素，Basic、Basic Plus、Ultra 和 Ultra Plus。当我将 ul 设置为 position:relative 时，菜单不再将其余内容推到页面下方，但是当我尝试将鼠标悬停在 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 代码:

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

修复最后的链接: