CSS 下拉菜单将页面内容向下推
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2678663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS drop-down menus pushing page content down
提问by Masonoise
This is probably (hopefully) a pretty simple question, but I can't seem to get it to work so I'll turn to the experts here. I'm using a pretty straightforward CSS drop-down menu, with just a little JQuery involved. The issue is that when I hover over the drop-down and it opens, it's pushing everything on the page down below it rather then opening over it. I've tried messing with the z-index but that doesn't seem to be the issue. Any tips would be fantastic, thanks in advance.
这可能（希望如此）是一个非常简单的问题，但我似乎无法让它发挥作用，所以我会求助于这里的专家。我正在使用一个非常简单的 CSS 下拉菜单，只涉及一点 JQuery。问题是，当我将鼠标悬停在下拉菜单上并打开它时，它会将页面上的所有内容都推到其下方，而不是打开它。我试过搞乱 z-index 但这似乎不是问题。任何提示都会很棒，提前致谢。
Here's the HTML; sorry it's not super-pretty, I had to rip out a bunch of stuff to make it simple and generic.
这是 HTML；抱歉，它不是超级漂亮，我不得不撕掉一堆东西以使其简单通用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML style="zoom: 100%; ">
<HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
</HEAD>
<BODY class="bodyclass" style="background:#BCE2F1; height: 100%;">
<DIV id="maincontainer" style="min-height: 100%;">
<STYLE type="text/css">
#cssdropdown, #cssdropdown ul { font-size: 9pt; background-color: black; list-style: none; }
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
#cssdropdown li.headlink { width: 140px; float: left; margin-left: -1px; border: 1px black solid;
background-color: white; text-align: center; }
#cssdropdown li.headlink a { display: block; color: #339804; padding: 3px; text-decoration: none; }
#cssdropdown li.headlink a:hover { background-color: #F8E0AC; font-weight: bold; }
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; }
#cssdropdown li.headlink:hover ul { display: block; text-decoration: none; }
#cssdropdown li.headlink ul li a { padding: 5px; height: 15px; }
#cssdropdown li.headlink ul li a:hover { background-color: #CCE9F5; text-decoration: none; font-weight: normal; }
/* #cssdropdown a { color: #CCE9F5; } */
#cssdropdown ul li a:hover { text-decoration: none; }
#cssdropdown li.headlink { background-color: white; }
#cssdropdown li.headlink ul { background-color: white; background-position: bottom; padding-bottom: 2px; }
</STYLE>
<SCRIPT language="JavaScript">
$(document).ready(function(){
$('#cssdropdown li.headlink').hover(
function() { $('ul', this).css('display', 'block'); },
function() { $('ul', this).css('display', 'none'); });
});
</SCRIPT>
<DIV class="navigation_box" style="border: none;">
<DIV class="innercontent">
<DIV style="background: white; float: left; padding: 5px; border: solid 1px black;">
LOGO
</DIV>
<DIV class="navmenu" style="float: right; bottom: 0; font-size: 9pt; text-align: right;">
<SPAN>Logged in as [email protected]</SPAN><BR>
<UL id="cssdropdown">
<LI class="headlink">
<A href="http://localhost:3000/one">One</A>
<UL style="display: none; ">
<LI><A href="http://localhost:3000/one">Option One</A></LI>
<LI><A href="http://localhost:3000/one">Option Two</A></LI>
<LI><A href="http://localhost:3000/one">Option Three</A></LI>
<LI><A href="http://localhost:3000/one">Option Four</A></LI>
</UL>
</LI>
<LI class="headlink">
<A href="http://localhost:3000/two">Two</A>
<UL style="display: none; ">
<LI><A href="http://localhost:3000/two">Option Two-One</A></LI>
<LI><A href="http://localhost:3000/two">Option Two-Two</A></LI>
<LI><A href="http://localhost:3000/two">Option Two-Three</A></LI>
</UL>
</LI>
<LI class="headlink" style="width: 80px;">
<A href="http://localhost:3000/three">Three</A>
</LI>
<LI class="headlink" style="width: 300px; padding-top: 2px; height: 19px;">
<FORM action="http://localhost:3000/search" method="post">
<P>
Search:
<INPUT id="searchwords" name="searchwords" size="20" type="text" value="">
<INPUT name="commit" type="submit" value="Find">
</P>
</FORM>
</LI>
<LI class="headlink" style="width: 60px;">
<A href="http://localhost:3000/four">Four</A>
</LI>
<LI class="headlink" style="width: 60px;">
<A href="http://localhost:3000/logout">Logout</A>
</LI>
</UL>
</DIV>
</DIV>
</DIV>
<DIV id="contentwrapper" style="clear:both">
<DIV class="innercontent" style="margin: 0px 20px 20px 20px;">
<H1>Some test content here to fill things out a little bit.</H1>
</DIV>
</DIV>
</DIV>
<DIV id="footer" style="clear: both; float: bottom;">
<DIV class="innercontent" style="font-size: 10px;">
Copyright 2008-2010
</DIV>
</DIV>
</BODY>
回答by darcy
This is a pretty bad case of unnecessary Javascript to do what can be done via CSS itself. One way or another all you have to do is change:
这是一个非常糟糕的情况，不需要 Javascript 来做可以通过 CSS 本身完成的事情。你所要做的一种或另一种方式就是改变：
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left;}
to:
到：
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left;position:absolute;}
Here's an example of an extremely simple and clean drop down menu. Hope it helps you out a bit. I added a lot of comments to help you figure out what the CSS is doing to the HTML.
这是一个非常简单和干净的下拉菜单的示例。希望对你有所帮助。我添加了很多注释来帮助你弄清楚 CSS 对 HTML 做了什么。
<style type="text/css">
/* Get ride of default margin's and padding */
ul, li {
margin: 0;
padding: 0;
}
/* Display parent unordered list items horizontally */
ul li {
float: left;
list-style: none; /* Get rid of default Browser styling */
margin-right: 10px; /* Add some space between items */
}
/* Hide inset unordered Lists */
ul li ul {
display: none;
}
/* Un-Hide inset unordered Lists when parent <li> is hovered over */
ul li:hover ul {
display: block;
position: absolute;
}
/* Clear the any element that may be "float: left;" (Essentially moves the item to the next line */
ul li:hover ul li {
clear: left;
}
</style>
<ul>
<li>
<a href="#" title="">Link 1</a>
<ul>
<li><a href="#" title="">Link 1.1</a></li>
<li><a href="#" title="">Link 1.2</a></li>
<li><a href="#" title="">Link 1.3</a></li>
<li><a href="#" title="">Link 1.4</a></li>
<li><a href="#" title="">Link 1.5</a></li>
<li><a href="#" title="">Link 1.6</a></li>
</ul>
</li>
<li>
<a href="#" title="">Link 2</a>
<ul>
<li><a href="#" title="">Link 2.1</a></li>
<li><a href="#" title="">Link 2.2</a></li>
<li><a href="#" title="">Link 2.3</a></li>
<li><a href="#" title="">Link 2.4</a></li>
<li><a href="#" title="">Link 2.5</a></li>
<li><a href="#" title="">Link 2.6</a></li>
</ul>
</li>
<li>
<a href="#" title="">Link 3</a>
<ul>
<li><a href="#" title="">Link 3.1</a></li>
<li><a href="#" title="">Link 3.2</a></li>
<li><a href="#" title="">Link 3.3</a></li>
<li><a href="#" title="">Link 3.4</a></li>
<li><a href="#" title="">Link 3.5</a></li>
<li><a href="#" title="">Link 3.6</a></li>
</ul>
</li>
</ul>
