CSS Dropdown將內容向下推送

Question

這是一個簡單的下拉菜單。 這是一個使用webkit的免費模板（只學習它是什么）。 我對CSS不是很好，我可以改變，以便下拉菜單不會將其他內容推到頁面上，但這會產生其他問題。

其他問題是下拉菜單的背景不再是紅色，而是透明，轉換不起作用。

此外，即使使用透明背景，當我將鼠標懸停在下拉菜單上時，如果菜單沒有折疊，我也無法將鼠標懸停在整個列表上。 例如，在下面的列表中，有4個項目，Basic，Basic Plus，Ultra和Ultra Plus。 當我將ul設置為position時：相對菜單不再將其余內容推到頁面上，但是當我嘗試將鼠標懸停在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;
}

修復最后一個鏈接：

Answer 2

正如Praveen所說，你需要讓導航器絕對定位。 但請確保，容器“標題”是相對定位的，否則它將填滿整個屏幕的40％。

看看這個小提琴，看看我的意思： https ： //jsfiddle.net/ho2sph79/

.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 ，正如我注意到的，你的下拉列表沒有任何過渡元素。 試試我提供的鏈接可能會幫助你解決過渡問題