回答
#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是一个数字。
http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html 你可以通过这个帖子,它指定了为什么值可以分配给ID。 您还需要将“abc_11”和“subMenu11”div同时保留在一个div中,因为它写入的div必须属于同一个父级。 希望这可以帮助 –
谢谢你Anirudh莫迪。问题是ID是一个数字。我用一封信更新了IS。 – Elvis
欢迎您:) –
为了简单起见,你可能想看看这样一个现成的菜单解决方案:
http://users.tpg.com.au/j_birch/plugins/superfish/examples/
的好处是,你会得到一个跨浏览器兼容的解决方案。
我知道你没有提到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
- 1. CSS盒/ ul菜单
- 2. UL李CSS菜单问题
- 3. IE6,IE7 CSS菜单UL
- 4. CSS UL李垂直菜单
- 5. css李重叠ul菜单
- 6. HTML CSS UL菜单样式
- 7. 水平CSS UL菜单
- 8. CSS菜单(隐藏UL)
- 9. 在wordpress菜单后定位UL列表
- 10. ul ul列表的CSS问题
- 11. CSS中心UL列表
- 12. Css ul ul子菜单没有悬停在每个链接上
- 13. ul li垂直菜单使用css
- 14. CSS UL/LI菜单不居中
- 15. UL/LI CSS菜单未正确对齐
- 16. 垂直动画css ul li菜单
- 17. CSS当前菜单项 - ul li类
- 18. CSS列表下拉菜单
- 19. 为每个UL添加一个DIV(子菜单) - 下拉菜单
- 20. ul列表的css问题
- 21. CSS选择器(菜单UL LI)或(菜单里)
- 22. CSS固定格在列表菜单
- 23. UL和菜单项
- 24. 浮动菜单div css
- 25. 下拉菜单(含图像和UL李列表)
- 26. Kentico CSS列表菜单样式
- 27. 菜单列表中垂直使用CSS
- 28. ul#菜单和#menu?
- 29. 单击并从UL列表
- 30. CSS菜单列表项需要显示在div容器内
你想要的解决方案只是CSS或可以使用jQuery的/ JavaScript? –
你在找这样的东西吗? https://jsfiddle.net/gpzh153d/5/ –
可能重复的[悬停在图像和显示div元素](http://stackoverflow.com/questions/29712201/hovering-over-image-and-reveal-div-元素) –