Css下拉菜单为新手推送内容下载？

我看过这个网站并找到了各种答案，但没有一个对我有用，或者我不知道该怎么做 . 每当我将鼠标悬停在菜单上时，主要内容都会被推下来，当我添加“position：absolute”时（我已尝试过某些地方^^），整个菜单会被取消激活或消失 .

我有一个博客网站并使用此处的模板：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>