css中的悬停下拉菜单未在正确位置打开

Question

我对这个导航栏的问题是，当我将鼠标悬停在导航栏中的某个类别上时，下拉菜单不会出现在该类别下方。由于某种原因，它最终在左手角，我无法到达它！请帮帮我，我在任何地方都找不到答案！

HMTL

 <div class="menu">
   <ul>
      <li><a href="#" >Home</a></li>
      <li><a href="#" id="current">Fruit</a>
         <ul>
            <li><a href="#">Apples</a></li>
            <li><a href="#">Oranges</a></li>
            <li><a href="#">Bananas</a></li>
            <li><a href="#">Pears</a></li>
         </ul>
      </li>
      <li><a href="/about.html">About</a>
         <ul>
            <li><a href="#">Company Info</a></li>
            <li><a href="#">Locations</a></li>
            <li><a href="#">FAQ</a></li>
         </ul>
      </li>
      <li><a href="/contact/contact.php">Contact Us</a></li>
   </ul>
</div>

CSS

  .menu{
    text-align:center;
    background-color: #000;
    float:left;
    width:900px;


    text-decoration:none; 


}
.menu ul{

background: transparent;

list-style:none;
margin:0;
padding:0;


}
.menu li{
    display:inline;
    width: 100px;


list-style-type: none;

    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 30px;
    padding: 0 30px 0 0; 

}
.menu li a{



color: transparent;
    text-transform: uppercase;
    text-shadow: 0px 0px 5px #333;
    letter-spacing: 1px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;


text-align:center;
text-decoration:none;
}
.menu li a:hover{


    text-shadow: 0px 0px 5px #39C;
    text-decoration:none;
background:#C60;
color:#FFFFFF;
text-decoration:none;
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
}
.menu ul li:hover a{
background:#3CC;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{


display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:200px;

}
.menu li:hover ul{
display:block; 

}
.menu li li {

display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
background:#000;

}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:50px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:center;
}
.menu li ul a:hover, .menu li ul li:hover a{
    text-align:center;
border:0px;
color:#ffffff;
text-decoration:none;
background:#666;
 -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
}

Answer 1

内部<ul>的父级需要分配相对定位。在这种情况下：

.menu ul li { ... position:relative;  ... }

默认情况下，具有绝对定位的 div 会相对于整个主体定位自身。如果它有一个具有相对或绝对位置的父元素，则position:absolute 将相对于该元素。

Answer 2

如果父元素上没有position: relative;，position: absolute 将根据整个页面定位它，所以添加：

.menu ul > li {position: relative;}