私はCSSを初めて使用し、2レイヤーのCSSメニューのコードを取得しましたが、3レイヤーまたは4レイヤーが必要ですが、ul ul li ul li hover aなどと少し混乱しています。助けてくれますか？3日間試していますが、メインメニューと2番目のレイヤーだけが正しくスタイルされています...
/* Hauptmenü */
ul {
text-align: left;
display: inline;
text-decoration:none;
z-index:1;
padding: 0px 0px 0px 0px;
list-style: none;
}
ul a {
text-decoration:none;
color: #fff;
z-index:1;
}
ul li {
font: bold 13px/18px sans-serif;
display: inline-block;
height:23px;
position: relative;
margin: 2px 8px 0px -4px;
padding: 1px 5px 0px 5px;
color: #fff;
cursor: pointer;
z-index:1;
}
ul li:hover {
background: #db0133;
z-index:2;
}
/* Hauptmenü Ende*/
/* Untermenü 1*/
ul li ul li {
font: normal 13px/18px sans-serif;
background: none;
margin: 0px 0px 0px 0px;
display: block;
color: #000;
z-index:1;
}
ul li ul li:hover {
font: normal 13px/18px sans-serif;
background: none;
margin: 0px 0px 0px 0px;
color: #db0133;
background:#f0f0f0;
text-decoration: none;
z-index:1;
}
ul li ul {
padding: 0;
position: absolute;
top: 25px;
z-index:2;
width: 180px;
margin: -1px 0px 0px 0px;
display: none;
opacity: 1;
visibility: hidden;
background: #fff;
border: 1px solid #dcdcdc;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:2;
}
/* Untermenü 1 Ende*/
/* Untermenü 2 */
ul li ul li ul li{
padding: 0;
position: absolute;
top: 25px;
z-index:2;
width: 180px;
margin: 0px 0px 0px 175px;
display: none;
opacity: 1;
visibility: hidden;
background: #fff;
border: 1px solid #dcdcdc;
}
ul li ul li:hover ul li {
display: block;
opacity: 1;
visibility: visible;
z-index:2;
}
/*Untermenü 2 Ende */
<!-- NAVIGATION ENDE -->