[Kintrax]

Hi, ich habe in meine Webseite eine Menü eingebaut.
Nach dieser Vorlage: How to Create a CSS3 Dropdown Menu - Designmodo

Ich habe es noch etwas angepasst.
Nun habe ich aber das Problem das das Dropdown Menü das sich aufklappt teilweise Transparent ist so das zum Beispiel das Datum des Beitrages durchscheint, was ich aber gar nicht möchte. (Siehe Bilder im Anhang)

Der aktuelle CSS Code:

/*Main Menü*/

.menu,
.menu ul,
.menu li,
.menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
 
.menu {
    height: 40px;
    width: 1000px;
 
    background: #8e5de7;
}
 
.menu li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}

.menu li a {
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;
 
 
    font-family: Georgia, Arial, sans-serif;
    font-size: 13px;
 
    color: #999999;
 
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
 
 
.menu li:hover > a { color: #000000; }

.menu ul {
    position: absolute;
    top: 40px;
    left: 0;
 
    opacity: 0;
    background: #8e5de7;
 
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
 
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}
 
.menu li:hover > ul { opacity: 1; }
 
.menu ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
 
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
 
.menu li:hover > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;
}

.menu ul li a {
    width: 100px;
    padding: 4px 0 4px 40px;
    margin: 0;
 
    border: none;
}
 
.menu ul li:last-child a { border: none; }

Das zweite Problem ist das Sich das aufgeklappte Menü sobald ich mit der Maus runterfahre um einen Punkt auszuwählen sofort wieder einklappt und ich somit nicht in die Untermenüs komme.

Der Html Code des Menüs:

	<!--Main Menü-->
	
	<ul class='menu'>
 
    	<li><a href='#'>Analysen</a></li>
    	<li><a href='#'>Fachartikel</a>
 
        	<ul>
            	<li><a href='#'>Candlesticks</a></li>
            	<li><a href='#'>Elliott Wellen</a></li>
        	</ul>
 
    	</li>
    	<li><a href='#'>Trades</a></li>
 
	</ul>

Ich würde mich sehr über den einen oder anderen Tipp freuen wie ich das Problem beheben kann.

Ich kenne mich selber nicht allzu gut mit css aus und möchte meine Webseite einfach optisch und funktionell etwas anpassen bevor ich beginne sie mit Inhalt zu füllen.

Lg Kintrax

[dazzle89]

Ich vermute, dass wir deinen kompletten Code benötigen, sonst können wir nur raten ...

Das Dropdown-Menü scheint nicht transparent zu sein, sondern der Text liegt einfach in der Z-Achse darüber. Könnte also ein Problem mit dem z-index sein.

Und was das Hovern betrifft: Es könnte sein, dass sich noch irgendein Abstand zwischen dem Dropdown und der ersten Ebene des Menüs befindet... Ist aber nur geraten

[Kintrax]

Ja am Z-Index hat es gelegen.
Ich habe dem Menü nun einen Z-Index Wert zugewiesen und das Problem ist verschwunden.

Auch das 2 Problemchen hat sich dadurch in Luft aufgelöst.

Ich Danke dir vielmals für den hilfreichen Tipp und wünsche dir noch einen schönen Abend.