2

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

Elvis
  • 223
  • 1
  • 2
  • 8

3 Answers3

2

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

Saumil
  • 2,399
  • 4
  • 25
  • 53
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.

Anirudh Modi
  • 1,530
  • 9
  • 8
  • http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html you can go through this post, which specifies why the values which we can assign to id. You also need to keep both the "abc_11" and "subMenu11" div inside a single div, as it is written that both the div must belong to the same parent. Hope this helps – Anirudh Modi Jun 10 '15 at 17:36
  • Thank you Anirudh Modi. The issue was with ID being a number. I updated the IS with a letter. – Elvis Jun 11 '15 at 13:11
0

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.

AnuragBabaresco
  • 604
  • 7
  • 19