Div ul list css menu

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> 

Я предполагаю, что есть некоторые вопрос с идентификатором числа.

Answer 2

Для простоты, вы можете захотеть взглянуть на готовое решение меню, как этот:

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

Преимущество заключается в том, что вы получите решение, совместимое Crossbrowser ,

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="11" могут возникнуть проблемы в некоторые браузеры, поэтому я подставил id=11 с id="a11"

Если по каким-либо причинам вы не хотите использовать JQuery, то я могу дать вам альтернативный подход с использованием JavaScript