我有点卡住了。我正在尝试构建一个横向1024px的水平导航栏,这将允许子菜单显示在它下面。但我希望子菜单的宽度也是1024像素,并直接显示在导航栏下方,垂直对齐。
此时子菜单会出现,但会将其左侧固定到您正在悬停的当前li
的左侧。我该如何解决这个问题?
谢谢!
编辑:所以在鼠标上面看起来像这样:http://eventav.biz/site/example.jpg
链接到目前为止我所做的事情 - http://www.eventav.biz/site/
ul.top_menu {
position: relative;
margin: 0;
margin-bottom: -1px;
list-style: none;
display: table;
width: 1024px;
border: 1px solid #111111;
border-bottom: 1px solid #000000;
border-radius: 10px 10px 0px 0px;
}
.top_menu li {
display: block;
position: relative;
border-right: 1px solid #111111;
float: left;
margin: 0px;
display: table-cell;
vertical-align: middle;
}
.top_menu li:first-child {
border-left: 1px solid #111111;
}
.top_menu li a {
display: block;
text-decoration: none;
color: #000000;
text-shadow: 3px 3px 8px #3A3A3A;
padding: 15px;
height: 30px;
display: table-cell;
vertical-align: middle;
margin: 0px;
}
#top_menu_item ul {
display: none;
margin: 0px;
}
#top_menu_item:hover ul {
display: block;
position: fixed;
margin: 0;
}
#top_menu_item:hover li {
width: 1024px;
background-color: #666;
text-align: left;
color: #FFF;
font-size: 12px;
margin: 0px;
}
<ul class="top_menu">
<li id="top_menu_item"><a href="#">HOME</a></li>
<li id="top_menu_item"><a href="#">OUR SERVICES</a>
<ul><li id="top_menu_item"><a href="#">test</a></li></ul>
</li>
<li id="top_menu_item"><a href="#">EXAMPLES OF OUR WORK</a>
<ul><li id="top_menu_item"><a href="#">test</a></li></ul>
</li>
<li id="top_menu_item"><a href="#">CONTACT US</a></li>
</ul>
答案 0 :(得分:2)
从子ul
移除固定定位,并将其替换为position:absolute
。添加left:0px
,然后从父position:relative
中删除li
。
#top_menu_item:hover ul {
display: block;
position: fixed; /* Change this to position:absolute; */
left:0px; /* Add this */
}
.top_menu li {
display: block;
position: relative; /* Remove this */
}
答案 1 :(得分:1)
1)从position: relative;
#top_menu_item
2)将#top_menu_item ul
设为position: absolute; left: 0;
而不是
3)使用#top_menu
padding-left: 0;
上的左侧边距
4)添加:
#top_menu_item:first-child {
margin-left: 40px;
}
基本上,问题在于您已经将内部ul
标记相对于其父li
进行了定位。相反,上面的解决方案绝对相对于主导航定位辅助导航,我们使用left: 0;
确保它完全左对齐。
在页面上多次使用id
也违反标准。因此,我建议将#top_menu_item
更改为.top_menu_item
并相应地更改HTML。
如果您有任何问题,请告诉我们!