0
Ich versuche Untermenüs unter dem übergeordneten Menü zu zentrieren, aber ich kann nicht die richtige Kodierung finden. Ich habe versucht "transform: translate (-50%, 0);" aber es scheint keine Wirkung zu haben. Unten ist das Original css, ohne irgendeine Codierung zu zentrieren versucht. Jede Hilfe wäre großartig!Zentrieren von Untermenüs - nicht zentrieren
Als Referenz mein Projekt ist lightertaste.com
.genesis-nav-menu {
\t clear: both;
\t padding: 0;
\t text-align: right;
\t white-space: nowrap;
}
.genesis-nav-menu .menu-item {
\t display: inline-block;
\t white-space: normal;
\t margin: 0; padding: 0;
\t font-family: 'dosis';
\t font-size: 21px;
\t font-weight: 400;
\t letter-spacing: .5px;
\t text-align: left;
}
.genesis-nav-menu a {
\t padding: 0px 10px;
\t display: block;
\t position: relative;
\t font-style: normal;
\t color: #abc3b7;
\t text-decoration: none;
\t text-transform: lowercase;
}
.genesis-nav-menu a:hover,
.genesis-nav-menu a:focus,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a:focus {
\t color: #585858;
}
/* Sub Navigation
--------------------------------------------- */
.genesis-nav-menu .sub-menu:before {
\t content: '';
\t display: block;
\t margin: auto;
\t width: 0;
\t height: 0;
\t border-left: 10px solid transparent;
\t border-right: 10px solid transparent;
\t border-bottom: 10px solid #f4f4f4;
}
.genesis-nav-menu .sub-menu .sub-menu:before {
\t display: none;
}
.genesis-nav-menu .sub-menu {
\t z-index: 2000;
\t position: absolute;
\t left: -9999px;
\t width: 125px;
\t border: none;
\t opacity: 0;
}
.genesis-nav-menu .sub-menu a {
\t position: relative;
\t width: 125px;
\t background-color: #f4f4f4;
\t padding: 10px;
\t font-size: 14px;
\t color: #6f9985;
\t text-align: center;
}
.genesis-nav-menu .sub-menu .sub-menu {
\t margin: -41px 0 0 125px;
}
.genesis-nav-menu .menu-item:hover,
.genesis-nav-menu .menu-item:focus,
.genesis-nav-menu .menu-item.menu-item-hover {
\t position: static;
}
.genesis-nav-menu .sub-menu a:hover,
.genesis-nav-menu .sub-menu a:focus,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a:focus {
\t background: #6f9985;
\t color: #ffffff;
}
.genesis-nav-menu .menu-item:hover > .sub-menu,
.genesis-nav-menu .menu-item:focus > .sub-menu,
.genesis-nav-menu .menu-item.menu-item-hover > .sub-menu {
\t opacity: 1;
\t left: auto;
}<nav class="nav-header" itemscope itemtype="http://schema.org/SiteNavigationElement"><ul id="menu-top-menu" class="menu genesis-nav-menu"><li id="menu-item-886" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-886"><a href="http://www.lightertaste.com/shop/" itemprop="url"><span itemprop="name">Shop</span></a></li>
<li id="menu-item-885" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-885"><a href="http://www.lightertaste.com/resources/" itemprop="url"><span itemprop="name">Resources</span></a></li>
<li id="menu-item-882" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-882"><a href="http://www.lightertaste.com/contact/" itemprop="url"><span itemprop="name">Contact</span></a>
<ul class="sub-menu">
\t <li id="menu-item-887" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-887"><a href="http://www.lightertaste.com/work-with-me/" itemprop="url"><span itemprop="name">Work With Me</span></a></li>
</ul>
</li>
</ul></nav>
Verwenden 'a "absolute" Positionierung, um die Elemente relativ zum Haupt-li zu bewegen. – magreenberg