0
Ich habe ein Problem mit der reinen CSS-Navigation. Ich schwebte meine Top-Level-Gegenstände und jetzt sind alle meine Untermenüs in der Hauptnavigation versteckt. Ich habe es mit Clear, Positioning und Z-Indices probiert und nichts funktioniert.CSS horizontale Navigation Untermenüs versteckt
Das Beste, was ich erreicht habe, ist mein Top-Level-Menü, das auf Hover expandiert, was ich nicht möchte. Irgendein Rat?
Ich bin mir sicher, dass das irgendwo eine Antwort hat, aber ich habe überall auf youtube, Blogs und Stack nach einer Antwort gesucht und konnte nicht finden, was ich brauchte.
html {
\t height: 100%:
}
body {
\t height: 100%;
} \t
\t
#menu-novo-container {
border-collapse: collapse;
font-family: tahoma, Arial, helvetica, Serif;
background-color: #336699;
min-height: 38px;
position: relative;
}
#menu-novo {
padding: 0;
height: inherit;
}
#menu-novo * {
margin: 0;
padding: 0;
}
#menu-novo .menu-novo-item {
cursor: pointer;
list-style: none;
font-size: 16px;
color: #FFF;
font-weight: normal;
padding: 4px 7px 4px 7px;
border-right: 1px solid white;
word-wrap: break-word;
min-height: 38px;
width: auto;
}
#menu-novo .root-item {
text-align: center;
float: left;
height: inherit;
position: relative;
}
.level-1-item,
.level-2-item,
.level-3-item {
font-size: 14px;
border-left: solid 1px #DEE8F5;
border-right: solid 1px #DEE8F5;
border-bottom: solid 1px #DEE8F5;
height: 30px;
float: none;
}
.level-1-submenu, .level-2-submenu, .level-3-submenu {
\t display: none;
position: relative;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
.level-1-submenu {
bottom: 0;
left: 0;
}
.level-2-submenu {
top: 0; /*shouldn't this be positioned relative to parent*/
left: auto;
right: -99.5%;
}
#menu-novo .root-item:hover > .level-1-submenu {
display: block;
}
#menu-novo .level-1-item:hover > .level-2-submenu {
display: block;
}
#menu-novo .level-2-item:hover > .level-3-submenu {
display: block;
}
.menu-novo-link,
.menu-novo-link:visited,
.menu-novo-link:active {
text-decoration: none;
color: #FFF;
}
.novo-clear {
width: 0;
height: 0;
clear: both;
}<div id="menu-novo-container">
<ul id="menu-novo">
<li class="menu-novo-item root-item"> 1
<ul class="menu-novo-submenu level-1-submenu">
<li class="menu-novo-item level-1-item"><a href="#" class="menu-novo-link">1.1</a></li>
<li class="menu-novo-item level-1-item"><a href="#" class="menu-novo-link">1.2</a></li>
<li class="menu-novo-item level-1-item"><a href="#" class="menu-novo-link">1.3</a></li>
<li class="menu-novo-item level-1-item">1.4.
<ul class="menu-novo-sumbenu level-2-submenu">
<li class="menu-novo-item level-2-item"><a href="#" class="menu-novo-link">1.4.1</a></li>
<li class="menu-novo-item level-2-item"><a href="#" class="menu-novo-link">1.4.2</a></li>
<li class="menu-novo-item level-2-item"><a href="#" class="menu-novo-link">1.4.3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>[SOLUTION] Es war meine dummen Fehler die ganze Zeit. Ich habe den Hintergrund nicht definiert und es war unsichtbar, aber da ... Das sind drei Arbeitstage.
Vielen Dank für Ihre Antwort, die es etwas gelöst haben, aber die Mitake ich den Hintergrund nicht definiert, gemacht. Ich konnte es drei Tage lang nicht finden :) – dzenesiz