[英]Parent category as a mainmenu and sub category as a submenu in wordpress
[英]Submenu position relative to Mainmenu
我有一个在主菜单 (顶部)的第一项上处于活动状态的菜单 :
我的问题是,当用户单击中间,第四或最后一个主菜单项时 , 子菜单现在看起来像这样(退出所有内容):
另外, 主菜单将由客户端长大 ,因此会有第六,第七等,所以我不能只用一个类来控制现在的项目 ...
关于如何解决此问题的CSS / jQuery解决方案的任何想法? 尝试遵循基于设计的第一张图片。
这是我的标记:
<ul id="mainmenu" class="clearfix">
<li class="active">
<a class="arrowdown" href="javascript:void(0)">ANSIEDAD</a>
<ul class="sublist">
<li>
<a href="javascript:void(0)">Política</a>
</li>
<li>
<a href="javascript:void(0)">Economía</a>
</li>
<li>
<a href="javascript:void(0)">Sociedad</a>
</li>
<li class="active">
<a href="javascript:void(0)">Medios</a>
</li>
<li>
<a href="javascript:void(0)">Inmobiliario</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)">PRETENSIÓN</a>
</li>
<li>
<a href="javascript:void(0)">HEDONISMO</a>
</li>
<li>
<a href="javascript:void(0)">MATERIALISMO</a>
</li>
<li>
<a href="javascript:void(0)">ARROGANCIA</a>
</li>
<li id="menu_search">
<a href="javascript:void(0)"></a>
</li>
</ul>
和CSS:
ul#mainmenu{
font-family: Georgia, Times, "Times New Roman", serif;
width: 754px;
margin: 0 auto;
li{
float: left;
list-style: none;
background: #999999;
margin-right: 4px;
.round_corners();
width: 140px;
text-align: center;
padding: 3px 0px;
position: relative;
a{
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;
&.arrowdown{
padding-bottom: 10px;
background: url('../img/sprites.png') no-repeat center -169px;
}
}
&#menu_search{
background: url('../img/sprites.png') #000 2px 2px;
width: 34px;
height: 28px;
padding: 0;
margin-right: 0;
a{
display: inline-block;
width: 100%;
height: 100%;
}
}
&.active{
background: #000000;
}
&:hover{
background: #000000;
color: #ffffff;
}
ul.sublist{
position: absolute;
width: 560px;
top: 39px;
left: 40px;
li{
float: left;
margin-right: 5px;
margin-bottom: 5px;
width: auto;
padding: 1px 9px;
background: #666666;
a{
text-transform: none;
}
&.active{
background: #000000;
}
&:hover{
background: #000000;
color: #ffffff;
}
}
}
}
}
尝试为主菜单设置最大宽度。 在这种情况下,我假设您希望其最大宽度为100%。
#mainmenu {
max-width: 100%;
}
这将不允许主菜单超过页面的宽度。 但是,您可能会遇到新的问题。
使用max-width
将解决您的问题。 这是如何使用max-width保持子菜单检查的示例。
您可以尝试将子菜单的定位点移动到更集中的位置,而不是将子菜单分为两行。 只是我的2美分。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.