div ul列表css菜單

Question

當我將鼠標懸停在父div上時，如何顯示小孩div？請查看.Fiddle如果我的代碼不正確，我很抱歉。

謝謝

Answer 1

#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 2

爲了簡單起見，你可能想看看這樣一個現成的菜單解決方案：

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

的好處是，你會得到一個跨瀏覽器兼容的解決方案。

Answer 3

我知道你沒有提到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