[英]Dropdown menu item moves other elements to the right
我一直在尝试从头开始创建此基本菜单,但是我遇到了一个小问题:每当我将“类别”菜单悬停在例如“类别”菜单(这是一个下拉元素)上时,右侧的元素会自动移到更远的位置。
HTML:
<div id = "navbar">
<ul>
<li>News</li>
<li>News</li>
<li>News</li>
<li>News</li>
<li>Market</li>
<li class = "navbar_multiple"> Categories
<ul>
<li>Travel</li>
<li>Entertainment</li>
<li>Fun</li>
</ul>
</li>
<li>Fun</li>
</ul>
</div>
CSS:显然太长-但包含在下面的jsFiddle中
这是jsFiddle: http : //jsfiddle.net/ktvde9qo/4/
我想这样做,以便当用户将鼠标悬停在“类别”项上时,它将在其下创建下拉菜单,但保持其尺寸不变。 我怎样才能做到这一点?
我将使用以下CSS尝试以下方法:
#navbar > ul > li
{
float: left;
margin-left: 21px;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border-top: 2px solid transparent;
padding-top: 8px;
position: relative;
line-height: 1.5;
height: 24px;
}
#navbar > ul > li > ul {
list-style: none;
position: absolute; /* change this */
margin-left: 0px;
padding-left: 0px;
margin-top: -5px; /* this can control the whitespace... */
}
添加position: relative
对于主导航中的li
元素,并根据需要添加一些行高和高度值。
对于辅助导航,将ul
上的位置更改为absolute
位置,并调整顶部边缘以关闭所有空白。
参见演示: http : //jsfiddle.net/audetwebdesign/adw5hp84/
通过使用辅助菜单的绝对定位,您可以将它们从主菜单栏的流程中删除,而不必担心标签的长度会影响主导航布局。
请注意,可能需要对链接之间的间距进行样式设置等更详细的工作。
除去#navbar > ul > li.navbar_multiple:hover > ul > li
中的width
:
#navbar > ul > li.navbar_multiple:hover > ul > li {
display:block;
height:20px;
padding-left: 10px;
margin-left: 0px;
}
更新了您的小提琴: http : //jsfiddle.net/ktvde9qo/11/
编辑 :要使所有子菜单项具有相同的宽度,只需删除(或注释掉)以下几行,或者根据需要修改它们:
#navbar > ul > li > ul > li:first-child {
margin-top: 8px;
padding-top: 9px;
width: 100%;
}
小提琴更新: http : //jsfiddle.net/ktvde9qo/13/
编辑2 :要使子菜单项比主菜单项更长,只需在子菜单项中增加一个宽度,在主菜单项中增加一个较短的宽度:
子菜单项:
#navbar > ul > li > ul > li {
padding-left: 0px;
display: none;
text-transform: none;
font-size: 12px;
padding: 4px 4px 8px 6px;
padding-top: 10px;
border-top: 1px solid #39718e;
background-color: #316885;
width:200px; /* changed this */
}
主菜单项:
#navbar > ul > li.navbar_multiple {
margin-left: 13px;
width:100px; /* changed this */
}
最终提琴更新: http : //jsfiddle.net/ktvde9qo/18/
你可以试试看吗?
如果内容会添加到娱乐节目到娱乐节目等下拉列表中,则也可以
#navbar > ul > li > ul{
width:150px;
}
我认为您正在寻找类似的东西:
CSS
#navbar {
height: 35px;
background-color: #4c9fcd;
position: relative;
top: 0px;
z-index: 1001;
}
#navbar > ul {
list-style: none;
text-align: left;
padding-left: 25px;
margin-top: 0px;
}
#navbar > ul > li
{
float: left;
margin-left: 21px;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border-top: 2px solid transparent;
padding-top: 8px;
}
#navbar > ul > li:first-child {
margin-left: 0px;
}
#navbar > ul > li.navbar_multiple {
margin-left: 13px;
//padding-left: 5px;
}
#navbar > ul > li:hover {
border-top: 2px solid white;
cursor: pointer;
//background-color: #316885;
}
#navbar > ul > li > ul {
list-style: none;
position: relative;
margin-left: 0px;
padding-left: 0px;
}
#navbar > ul > li > ul > li {
padding-left: 0px;
display: none;
text-transform: none;
font-size: 12px;
padding: 4px 4px 8px 6px;
padding-top: 10px;
border-top: 1px solid #39718e;
background-color: #316885;
}
#navbar > ul > li > ul > li:first-child {
margin-top: 8px;
padding-top: 9px
}
#navbar > ul > li > ul > li:last-child {
border-bottom: 3px solid #4c9fcd;
}
#navbar > ul > li.navbar_multiple:hover > ul > li {
display: block;
height:20px;
padding-left: 10px;
margin-left: 0px;
}
#navbar > ul > li.navbar_multiple > ul > li:hover {
background-color: #0d3f5a;
}
#navbar > ul > li.navbar_multiple:hover {
background-color: #316885;
padding-right: 0px !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.