CSS Dropdown将内容压下页面

这是一个简单的下拉菜单。这是一个免费的模板，使用webkit（只知道这是什么）。我对CSS不太擅长，而且我可以改变，以便下拉菜单不会将其他内容推到页面上，但是这会产生其他问题。CSS Dropdown将内容压下页面

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

此外，即使使用透明背景，当我将鼠标悬停在下拉菜单上时，我也无法将鼠标悬停在整个列表上，而不会将菜单折叠。例如，在下面的列表中，有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代码：

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

来源

2016-11-30 j_allen_morris

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

修复的最后环节：

来源

2016-11-30 11:12:50

请再次访问该网页。我已经添加。top-nav {position：absolute;}当然它不会将内容压下，但我无法将鼠标悬停在下拉菜单的最后2个链接上。 –

@j_allen_morris您是否添加了所有其他属性？我更新了我的答案。 –

@j_allen_morris检查更新后的答案。它现在有效。 –

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

退房这个小提琴明白我的意思：https://jsfiddle.net/ho2sph79/

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

来源

2016-11-30 11:22:20 mariuspearson

我会加位置：绝对，但我认为这会弄乱下拉菜单，并使其无法点击下拉菜单中的最后几个链接。 –

我按照你的说法添加了它。请转到我的网站链接上面并查看它。它弄乱了男人的位置（我敢肯定我可以修复），但是在我可以将鼠标悬停在下拉菜单中的最后几个链接之前，菜单就会崩溃。 –

嗨，下拉菜单也需要绝对定位。我会建议这样的： .top-nav ul li：hover> ul { display：block; position：absolute; 背景：＃bb1e10; 宽度：100％; top：85px; } – mariuspearson

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

来源

2017-09-07 08:48:09 Genobee

CSS Dropdown将内容压下页面

回答

相关问题