我正在尝试构建一个宽度宽的HTML / CSS下拉菜单.由于位置:绝对为第二级导航,我没有得到第一级的宽度.删除位置:绝对将移动所有以下元素在悬停…
我该如何解决?
这是代码:
ul { margin: 0; padding: 0; list-style: none; } .level_1 > li { float: left; width: 45%; background-color: #2FA4CF; margin-right: 6px; } .level_1 > li:hover ul { display: block; } .level_2 { display: none; position: absolute; width: 45%; } .level_2 li { background-color: #535B68; }
<ul class="level_1"> <li> <a href="#">Level one (1)</a> <ul class="level_2"> <li><a href="#">Level two (1)</a></li> </ul> </li> <li><a href="#">Level one (2)</a></li> </ul> <p>Paragraph</p>
看到这里的结果:http://jsfiddle.net/5uf2Y/
悬停“一级(1)”,您将看到,第二级与第一级不一样大小…