Html 当我将光标悬停在下拉菜单上时，它会一直消失_Html_Css_Drop Down Menu

Html 当我将光标悬停在下拉菜单上时，它会一直消失

html css drop-down-menu

Html 当我将光标悬停在下拉菜单上时，它会一直消失,html,css,drop-down-menu,Html,Css,Drop Down Menu,我想知道你们中是否有人能帮我，我已经开始为我的博客创建一个下拉菜单。在我看来，这很顺利，直到我意识到，一旦我用光标悬停在下拉菜单上，链接就会消失，但当我将光标悬停在下拉菜单上时，链接就消失了源代码： <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Yeti™</title> <lin

我想知道你们中是否有人能帮我，我已经开始为我的博客创建一个下拉菜单。在我看来，这很顺利，直到我意识到，一旦我用光标悬停在下拉菜单上，链接就会消失，但当我将光标悬停在下拉菜单上时，链接就消失了

源代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
        <title>Yeti™</title>
        <link rel="stylesheet" href="main.css" />
        <style type="text/css">





        body

                {
            background-image:url(img.jpg);
                background-repeat:no-repeat;


        }

          a:link{color:yellow;
                    text-decoration:none;}
                a:visited{color:yellow;}
                a:hover{background-color:none;
                        color:green;
                                text-decoration:bold;
                                text-decoration:underline;
                                font-weight:bold;}

     #footer {position: absolute;
                   width: 1500px;
                   height: 80px;
                   bottom: 1px;
                   left: 0px;}    

             #main {position: absolute;
                   width: 600px;
                   height: 200px;
                   top: 160px;
                   left: 0px;}


                </style>
        </head>


                                <ul id="nav">



       <div id="Title">
           <p>  Yeti Corporation™  </p>

--------------------------------------------------> ( This is the drop down menu )--------
<div id="wrapper">
<div id="navMenu">
           <ul>
           <li><a href="#">top</a>
           <ul>
          <li><a href="#">Recipes</a></li>
          <li><a href="#">Recipes</a></li>
          <li><a href="#">Recipes</a></li>

           </ul>

           </li>

           </ul>

                   <ul>
           <li><a href="#">top</a>
           <ul>
          <li><a href="#">Recipes</a></li>
          <li><a href="#">Recipes</a></li>
          <li><a href="#">Recipes</a></li>

           </ul>

           </li>

           </ul>

                   <ul>
           <li><a href="#">top</a>
           <ul>
          <li><a href="#">Recipes</a></li>
          <li><a href="#">Recipes</a></li>
          <li><a href="#">Recipes</a></li>

           </ul>

           </li>

           </ul>

                   <ul>
           <li><a href="#">top</a>
           <ul>
          <li><a href="#">Recipes</a></li>
          <li><a href="#">Recipes</a></li>
          <li><a href="#">Recipes</a></li>

           </ul>

           </li>

           </ul>

                   <ul>
           <li><a href="#">top</a>
           <ul>
          <li><a href="#">Recipes</a></li>
          <li><a href="#">Recipes</a></li>
          <li><a href="#">Recipes</a></li>

           </ul>

           </li>

           </ul>

                   <ul>
           <li><a href="#">top</a>
           <ul>
          <li><a href="#">Recipes</a></li>
          <li><a href="#">Recipes</a></li>
          <li><a href="#">Recipes</a></li>

           </ul>

           </li>

           </ul>
--------------------------------------------------> ( This is the drop down menu )--------
            </div>
           <body>

           <div id="video">
           <video src="csgo.mp4" width="540" height="380" poster="csgo.jpg" controls></video>
           </div>
                          <div id="main">
                          <div id="yeti">
                <p>     <div id="play">

                           </div></P>
                </div>


                <p>There is never enough to what you can do with programming</p>



                <p> a Small Indie Development company Consisting of 4 people that works on Video games and Websites, as well as many other project we hope to get to in the future. Originally we where two separate companies, but when we realised the potential we had together we decided to merge to create Yeti Corp™.
 If you are interested in Hiring a web developer go to the web development page. If you want to check up on the newest games and software updates, go to the game development page. a Small Indie Development company Consisting of 4 people that works on Video games and Websites, as well as many other project we hope to get to in the future. Originally we where two separate companies, but when we realised the potential we had together we decided to merge to create Yeti Corp™.
 If you are interested in Hiring a web developer go to the web development page. If you want to check up on the newest games and software updates, go to the game development page.  </p>

                </div>   







                </div>







           <div id="footer">
           <a href="#" />Contact Us|</a>
           <a href="#" />Web Dev|</a>
           <a href="#" />Game Dev|</a>
           <a href="#" />Graphic Designer|</a>
           <a href="#" />Twitter Page|</a>
           <a href="#" />FaceBook Page|</a>
           <a href="#" />Gmail Page</a>
       <p> All Rights Reserver Yeti LTD. 2014 Created by Head Web Developer, Hamza Issa</P>
       </div>      
                        </body>
</html>

因此，我为您的代码制作了一个简化版本（将来您应该首先这样做），并且能够缩小问题的范围。您的

#main

部分的位置与下拉列表混乱，它出现在下拉列表的顶部。所以我做的一件简单的事情就是在下拉列表中添加

z-index

#navMenu ul li ul {
  position:absolute;
  visibility:hidden;
  top:30px;
  z-index: 1;
}
#navMenu ul li:hover ul {
  // display: block;
  visibility:visible;
  // display: block; 
}

a:link{
颜色：黄色；
文字装饰：无；
填充：10px；
}
a:参观了{
颜色：黄色；
}
a:悬停{
背景色：无；
颜色：绿色；
文字装饰：粗体；
文字装饰：下划线；
字体大小：粗体；
}
#头衔{
字体：30px坎达拉；
-webkit盒阴影：rgba（110、110、110、.4）10px 10px 10px；
垫面：5px；
左侧填充：100px；
颜色：橙色；
}
#包装纸{
字体：20px塔荷马；
}
#导航菜单{
保证金：0；
填充：30；
}
#导航菜单{
保证金：0；
填充：0；
线高：30px；
}
#navMenu li{
保证金：0；
填充：0；
列表样式：无；
浮动：左；
位置：相对位置；
背景：#999；
}
#导航菜单{
文本对齐：居中；
文字装饰：无；
字体：20px塔荷马；
高度：30px；
宽度：130px；
显示：块；
颜色：蓝色；
边框：1px纯黑；
}
#navMenu ul li ul{
位置：绝对位置；
可见性：隐藏；
顶部：30px；
z指数：1；
}
#导航菜单ul li：悬停ul{
能见度：可见；
}
#主要{
字体：14px快递；
颜色：红色；
左侧填充：100px；
位置：绝对位置；
宽度：600px；
高度：200px；
顶部：160px；
左：0px；
}


雪人公司™


















编程所能做的永远不够

欢迎使用堆栈溢出！寻求代码帮助的问题必须包含在问题本身中重现代码所需的最短代码。虽然您提供了一个示例的链接，但如果该链接无效，您的问题对其他具有相同问题的未来SO用户将毫无价值。在此处发布您的代码：）等等，我该怎么办，我无法在评论中发布它，因为它将长时间更新您的问题，您可以编辑itOkay，我知道我可以编辑它，但我应该编辑什么，链接的工作

#navMenu ul li ul {
  position:absolute;
  visibility:hidden;
  top:30px;
  z-index: 1;
}
#navMenu ul li:hover ul {
  // display: block;
  visibility:visible;
  // display: block; 
}