0
ich an diesem Projekt arbeiten: http://www.livingthelighterlife.com/Pfeil nach oben Vor Untermenü Hintergrund
Im oberen Bereich Navigation (Startseite, über, Kontakt mit mir arbeiten), habe ich ein Untermenü nach unten fallen. Der einzige aktive Link ist "About" - wenn Sie den Mauszeiger darüber bewegen, erscheint das Untermenü, ebenso wie der Pfeil davor, aber ich kann nicht den Hintergrund des Pfeils nach oben ziehen. Es sollte transparent sein, aber es wird als die gleiche rosa Farbe wie das Untermenü angezeigt.
Vielen Dank im Voraus.
#top-navigation {
\t float: left;
\t padding-top: 4px;
}
#top-navigation ul {
\t list-style: none;
\t position: relative;
}
#top-navigation ul a {
\t display: block;
\t color: #ffffff;
\t text-decoration: none;
}
#top-navigation ul a:hover {
\t color: #f68364;
}
#top-navigation ul li {
\t position: relative;
\t float: left;
\t margin: 0px 10px;
}
#top-navigation ul li:hover {
\t color: #f68364;
}
#top-navigation ul ul:before {
\t content: '';
\t display: block;
\t margin: auto;
\t width: 0;
\t height: 0;
\t background: transparent !important;
\t border-left: 10px solid transparent;
\t border-right: 10px solid transparent;
\t border-bottom: 10px solid #6d5d68;
}
#top-navigation ul ul {
\t display: none;
\t position: absolute;
\t left: 50%;
\t transform: translateX(-50%);
\t width: 150px;
\t background: #f68364;
}
#top-navigation ul ul li {
\t float: none;
\t margin: 0px;
}
#top-navigation ul ul a {
\t display: block;
\t padding: 10px;
}
#top-navigation ul ul a:hover {
\t background: #6d5d68;
\t color: #ffffff;
}
#top-navigation ul ul ul {
\t top: 0;
\t left: 100%;
}
#top-navigation ul li:hover > ul {
\t display: block;
}<nav id="top-navigation">
<ul>
<li>
<a href="http://www.livingthelighterlife.com/">Home</a>
</li>
<li>
<a href="/about/">About</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">Work With Me</a>
</li>
</ul>
</nav>
zu ändern Sind Sie sich bewusst, dass, wenn Sie das erreichen, was Sie versuchen, Sie mit zwei anderen vermutlich unbeabsichtigten Nebenwirkungen konfrontiert werden? Erstens können Sie den Pfeil nicht sehen, da seine Farbe mit dem Navigationshintergrund übereinstimmt. und zweitens wird es schwierig sein, den Mauszeiger über das Untermenü zu bewegen, da der orange Hintergrund den Schwebezustand beibehält, während Sie die Maus nach unten in das Untermenü bewegen. –
Ich werde die Farbe in Pink ändern, ich habe es nur noch lila, um zu zeigen, dass es da ist. Was das zweite Problem anbetrifft, kann ich die Hintergrundfarbe dann einfach in das Lila ändern, so dass es immer noch da ist, aber nicht sichtbar? Wenn das so ist, wie? – Samantha
Nevermind - hat es ausgearbeitet. Vielen Dank! – Samantha