我查看了这个网站并找到了各种答案，但没有一个对我有用，或者我不知道该怎么做。每当我将鼠标悬停在菜单上时，主要内容都会被向下推，当我添加“位置：绝对”（我已经尝试了一些地方^^）时，整个菜单都会被停用或完全消失。
我有一个博客网站并使用此处的模板：http ://www.5202.de/2012/10/avantgardistisches-simple-wei-layout.html --> 下载。
请考虑，在发布答案时，我是编码的新手，需要非常精确的信息；）我已经用生成器制作了菜单，但除了这个问题之外，我对它很满意。我真的希望您能提供帮助，我认为其他新手也会从易于理解/实施的答案中受益:)
继承人的CSS：
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
ul#main-nav {font-family:helvetica,arial,sans-serif;margin:0;padding:0;float:left;width:100%;font-size:0.9em;}
ul#main-nav li {margin:0;padding:0;list- style:none;float:left;margin:0;width:9em;position:relative;}
ul#main-nav li a {text- decoration:none;display:block;padding:0.6em;color:#0e0e0e;background:#cfcfcf;border- left:2px solid #fff;border-right:2px solid #fff;}
ul#main-nav li a:hover, ul#main-nav li a:focus {background:#ece1cf;border- left:2px solid gray;border-right:2px solid gray;}
ul#main-nav li ul {padding:0;margin:0;display:none;}
ul#main-nav li:hover ul {display:block;}
ul#main-nav li ul li {float:none;}
ul#main-nav li ul li a {font-size:0.9em;}]]>
不确定是否属于页面列表，但无论如何。
现在这里是html
<ul id="main-nav">
<li><a href="http://imagicallery.blogspot.com">Home</a></li>
<li><a href="http://imagicallery.blogspot.com">About </a>
<ul>
<li><a href="http://imagicallery.blogspot.de/p/about-me.html">Me</a></li>
<li><a href="http://imagicallery.blogspot.com/p/about-this-blog.html">This blog</a> </li>
<li><a href="http://imagicallery.blogspot.com/p/ressources.html">Ressources</a></li>
<li><a href="http://imagicallery.blogspot.com/p/legal-stuff.html">Legel stuff</a> </li>
</ul>
</li>
<li><a href="http://imagicallery.blogspot.com">Photography</a>
<ul>
<li><a href="http://imagicallery.blogspot.de/p/photography.html">Projects</a></li>
<li><a href="http://imagicallery.blogspot.de/p/ausrustung.html">Equipment </a></li>
<li><a href="http://imagicallery.blogspot.com/2012/09/13-fotografie- fragen.html">Questions</a></li>
</ul>
</li>
<li><a href="http://imagicallery.blogspot.com">Scrappy Art</a>
<ul>
<li><a href="http://imagicallery.blogspot.com/p/scrap-and-art.html">Scrapbooking</a> </li>
<li><a href="http://imagicallery.blogspot.com/p/art-journals.html">Art Journals </a> </li>
<li><a href="http://imagicallery.blogspot.com/p/mixed-media.html">Mixed-Media</a> </li>
<li><a href="http://imagicallery.blogspot.com/search/label/crop">Crops & Co.</a> </li>
</ul>
</li>
<li><a href="http://imagicallery.blogspot.com/p/diy.html">DIY </a></li>
<li><a href="http://imagicallery.blogspot.com">Freebies</a>
<ul>
<li><a href="http://imagicallery.blogspot.de/p/free.html">Free Stuff</a></li>
<li><a href="http://imagicallery.blogspot.de/p/free.html">Free Tutorials</a></li>
<li><a href="http://imagicallery.blogspot.com/p/legal-stuff.html">Terms of Use</a> </li>
</ul>
</li>
<li><a href="http://imagicallery.blogspot.com">Favorites</a>
<ul>
<li><a href="http://imagicallery.blogspot.com/p/and-you.html">Blogging Friends</a> </li>
<li><a href="http://imagicallery.blogspot.com/p/all-my-faves.html">More Faves</a> </li>
</ul>
</li>
<li><a href="http://imagicallery.blogspot.com">Features</a>
<ul>
<li><a href="http://imagicallery.blogspot.com/search/label/alice">Wonderland</a> </li>
<li><a href="http://imagicallery.blogspot.com/search/label/smashbook">Smashbook</a></li>
<li><a href="http://imagicallery.blogspot.com/search/label/foto-tipps">Photo- Tips</a></li>
<li><a href="http://imagicallery.blogspot.com/search/label/book">Books</a></li>
<li><a href="http://imagicallery.blogspot.com/search/label/lost">Lost Places</a> </li>
</ul>
</li>
<li><a href="http://imagicallery.blogspot.com">Travel </a>
<ul>
<li><a href="http://imagicallery.blogspot.com/search/label/la-gomera">La Gomera</a></li>
<li><a href="http://imagicallery.blogspot.com/search/label/london">London</a></li>
<li><a href="http://imagicallery.blogspot.com/search/label/wroclaw">Wroclaw</a></li>
</ul>
</li>
<li><a href="http://imagicallery.blogspot.com/p/bloghintergrunde.html">Contact</a> </li>
</ul>