Question

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

我有一个博客网站并使用此处的模板：http://www.5202.de/2012/10/avantgardistisches-simple-wei-layout.html - ＆gt;下载。

在发布答案时，请考虑我是编码的新手，需要非常精确的信息;）我用发电机制作菜单，但除了那个问题我很满意。我真的希望你能提供帮助，我认为其他新手也会受益于易于理解/实施的答案:)

继承人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>

Answer 1

如何从其他文件（标题）调用菜单并将背景设置为透明，确保在下拉菜单时正文部分与标题重叠。

Answer 2

找到ul#main-nav li ul {padding:0;margin:0;display:none;}

并像这样改变

 ul#main-nav li ul {
                   padding:0;margin:0;
                   display:none;
                  position:absolute:/*Added*/
                  z-index:2;/*Added*/
}

您可以通过提供top:10px;left:10px;等位置来改变孩子的位置

正在使用 Demo Here

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

继承人css：

现在这里是html

2 个答案: