Div ul list css menu

Question

How can I have a child div appear when I hover on the parent div? Please view.Fiddle My apologies if my code is incorrect.

Thank you

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>

I guess there is some issue with id being a number.

Answer 2

For the sake of simplicity, you may want to look into a readymade menu solution like this one:

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

The advantage is that you will get a crossbrowser compatible solution.

Answer 3

I know you have not mentioned jQuery as your tag but here is a solution which does the trick.

If you can use jQuery then I suggest you to use to achieve what you want because changing CSS property of one element when another element is hovered on is bit tricky and has many limitations,

Here is a simplified fiddle with jQuery

This is the jQuery script that you can add in your file,

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

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

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

One more thing, it is not advisable to have id that starts with number, in your case id="11" might have issues in some browsers, that's why I have substituted id=11 with id="a11"

If due to some reasons you don't want to use jQuery then I can give you an alternative approach using JavaScript