[英]Centering the submenu CSS and HTML
I have problem with centering submenu. 居中子菜单有问题。 Menu and submenu should be centered together.
菜单和子菜单应居中对齐。 Please help me centering my submenu.
请帮助我将子菜单居中。
<nav role="navigation" id="access">
<div class="menu-menuu-container">
<ul class="menu" id="menu-menuu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-180" id="menu-item-180"><a href="">Start</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-183" id="menu-item-183"><a href="">O nas</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-page-parent menu-item-458" id="menu-item-458"><a href="">Camera Nera</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-500" id="menu-item-500"><a href="">Zespół</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-449" id="menu-item-449"><a href="">Partnerzy</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-424" id="menu-item-424"><a href="">Portfolio</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-182" id="menu-item-182"><a href="">Filmy</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-495" id="menu-item-495"><a href="">Teledyski</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-496" id="menu-item-496"><a href="">Video-Art</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-15 current_page_item menu-item-499" id="menu-item-499"><a href="">Komercyjne</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-494" id="menu-item-494"><a href="">Blog</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-422" id="menu-item-422"><a href="">Kontakt</a>
</li>
</ul>
</div>
</nav>
#access {
clear: both;
display: block;
float: left;
width: 100%;
}
#access ul {
list-style: none;
padding-left: 0;
}
#access li {
float: left;
position: relative;
margin: 0 60px 0 0;
}
#access li:last-child {
margin: 0 !important;
}
#access a {
border-bottom: 0 none;
color: #000000;
font-family:'Dosis', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 1px;
line-height: 48px;
outline: medium none;
text-transform: uppercase;
transition: all 0.4s ease-in-out 0s;
white-space: nowrap;
text-decoration: none;
float: left;
}
#access ul ul {
display: none;
float: left;
margin: 0;
position: absolute;
top: 48px;
left: 0;
width: 188px;
z-index: 99999;
}
#access {
padding: 0px;
margin-bottom: 40px;
border-bottom: 0px !important;
}
#access {
position: relative;
margin-left: 0px;
}
#access li .sub-menu {
position: absolute;
border: 0px;
border-width: 0;
height: 48px;
}
#access li .sub-menu li {
border-top: 0px solid white;
border-bottom: 0px;
}
#access li .sub-menu li a {
width: auto;
color: #000000;
font-size: 16px;
line-height: 48px;
}
#access a {
position: static;
text-transform: uppercase;
background:#fff;
border: 0px;
line-height: 48px;
}
#access .sf-sub-indicator {
display: none;
}
#access a, #access li.current_page_item, #access li.current_page_parent, #access li.current-menu-ancestor, #access li.current-menu-item, #access li.sfHover, #access li.selected {
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
#access li .sub-menu li a {
border: 1px solid #fff !important;
line-height: 48px;
}
#access li .sub-menu {
position: absolute;
left: 0;
width: 480px;
border: 0px;
border-width: 0;
height: 48px;
}
#access li.current-menu-item a, #access li.current-menu-parent a {
color: #000000;
}
#access li.current-menu-parent .sub-menu a {
color:#000000;
}
#access li.current-menu-parent .sub-menu li.current-menu-item a, #access li.current-menu-parent .sub-menu li.current-menu-parent a {
color: #000000;
}
#access li.current-menu-item .sub-menu, #access li.current-menu-parent .sub-menu {
top: 48px;
left: 0;
}
#access li.current-menu-item .sub-menu, #access li.current-menu-parent .sub-menu {
visibility: visible !important;
display: block !important;
}
#access:hover li.current-menu-item .sub-menu, #access:hover li.current-menu-parent .sub-menu {
visibility: hidden !important;
display: none !important;
}
#access li.current-menu-item:hover .sub-menu, #access li.current-menu-parent:hover .sub-menu {
visibility: visible !important;
display: block !important;
}
.menu-menuu-container {
display: table;
/* Allow the centering to work */
margin: 0 auto;
}
#access ul ul a {
border-bottom: 0 none;
color: #000000;
font-family:'Dosis', sans-serif;
font-weight: 300;
letter-spacing: 1px;
line-height: 48px;
text-transform: uppercase;
transition: all 0.4s ease-in-out 0s;
white-space: nowrap;
}
#access li:hover > a, #access a:focus {
color: #000000;
}
#access ul li:hover > ul {
display: block;
}
Remove position: relative
from the parent li (first-level menu) elements. 移除
position: relative
对于父级li(一级菜单)元素的position: relative
。 This will allow left to be relative to the full-width nav. 这将使left相对于全角导航。
On .sub-menu
change the following properties to: 在
.sub-menu
将以下属性更改为:
width: 100%;
text-align: center;
Add to #access li .sub-menu li
: 添加到
#access li .sub-menu li
:
float: none; //changed from float: left
display: inline-block;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.