Question

当我将鼠标悬停在父div上时，如何显示子div？请查看. Fiddle如果我的代码不正确，请致歉。

谢谢

Answer 1

我知道你没有提到jQuery作为你的标签，但这里有一个解决方案可以解决问题。

如果你可以使用jQuery，那么我建议你用它来实现你想要的东西，因为当另一个元素被徘徊时改变一个元素的CSS属性有点棘手并且有很多限制，

Here is a simplified fiddle with jQuery

这是您可以在文件中添加的jQuery脚本，

$(document).ready(function(){
     $("#a11").mouseover(function(){

         $("#submenu11").show();
     });
    $("#a11").mouseout(function(){

         $("#submenu11").hide();
     });
});

还有一件事，不建议使用以数字开头的ID，在您的情况下id="11"可能在某些浏览器中出现问题，这就是为什么我将id=11替换为id="a11"

如果由于某些原因您不想使用jQuery，那么我可以使用JavaScript为您提供另一种方法

Answer 2

#submenu11 {
width:550px;
height:400px;
float:none;
padding-left:1px;
padding-top:1px;
margin-right; 10px;
font:  15px/30px sans-serif;
clear: left;
margin-left: 181px;
border: 1px solid blue;
border-bottom: 5px solid blue;    
}
#left1, #right1 {
width: 35%; 
float:left;
margin-top: -85px;
}
#left1 {
margin-right: 1px;
border: 1px solid green;
box-sizing: inline-block;   
height: 100%;
}
#right1 {
display: inline-block;
box-sizing: border-box;
width: 60%;
height: 100%;
border: 1px solid red;
}
#abc_11 {
font:  15px/30px sans-serif;
height: 300px;
width:170px;
display: inline-block;
line-height:30px;
background-color:white;
float:left;
padding-right:10px;
border-right: 1px solid #0057A4;
clear:left;
}
submenulist ul li {
list-style-type: none;
clear: left;
margin-left: -40px ;    
}
a.menu1 {
font: 15px/30px sans-serif;
height: 30px;
width: 170px;
display: inline-block;
line-height: 30px;
background-color: white;
float: left;
padding-left:20px;
border-right: 1px solid blue;
margin-left: -10px;
clear:left;
text-decoration: none;
color: black;
} 

a.submenulink1 {
border-right: 0px solid #E1E1E1;
border-top: 0px solid #444;
color: black;
display: block;
text-align: left;
padding-left: 10px;
text-decoration: none;
width: 100%;
font:  15px/30px sans-serif;
height: 30px;
}
a.submenulink1:hover {
background: lime;
color: white;  
}
.hide
{
display:none;
}
#abc_11:hover#abc_11 + #submenu11{
display:block;
} 


<div>
<div id="abc_11">
    <a class="menu1" href="#">GALAXY 11</a>
</div>    
<div id="submenu11" class="hide">
<div id="left1">
  <ul class="nav1">   
   <li class="submenulist"><a class="submenulink1" href="#">GALAXY S6 Edge</a></li>
   <li class="submenulist"><a class="submenulink1" href="#">GALAXY S6</a></li>
   <li class="submenulist"><a class="submenulink1" href="#">GALAXY S5</a></li>
   <li class="submenulist"><a class="submenulink1" href="#">GALAXY S4 Mini</a></li>
   <li class="submenulist"><a class="submenulink1" href="#">GALAXY S3 Mini VE</a></li>
  </ul>  
  </div>
  <div id="right1">
  <img src="http://www.samsung.com/uk/next/img/estore-recommend-    images/mobiles/S6edgegreen.jpg" alt=""></img>
  <a href="#">GALAXY S6 Edge information</a>
 </div>    
</div>  
</div>

我猜id存在一些问题。

Answer 3

为简单起见，您可能需要查看现成的菜单解决方案，如下所示：

http://users.tpg.com.au/j_birch/plugins/superfish/examples/

优点是您将获得与浏览器兼容的解决方案。

Div ul list css菜单

3 个答案: