0
nav {
font-family: Arial, sans-serif;
border: 1px solid #ccc;
bordnaver-right: none;
width: 100%;
}
nav ul {
display: flex;
flex-pack: center
}
nav ul {
margin: 0;
padding: 0;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
nav ul li {
list-style: none;
text-align: center;
//border-left: 1px solid #fff;
//border-right: 1px solid #ccc;
background-color: #feaa38;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#feaa38));
background-image: -webkit-linear-gradient(top, #F5F5F5, #feaa38);
background-image: -moz-linear-gradient(top, #F5F5F5, #feaa38);
background-image: -o-linear-gradient(top, #F5F5F5, #feaa38);
background-image: linear-gradient(to bottom, #F5F5F5, #feaa38);
position: relative;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
flex: 1 0 auto;
}
nav ul li:hover {
background-color: #feaa38;
}
nav ul li a {
text-decoration: none;
color: #000;
display: block;
padding: 10px 0;
}
nav ul li:hover a {
color: #FFF;
}
nav ul li ul {
display: flex;
}
nav ul li ul {
position:absolute;
top:-999em;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
justify-content: space-around;
width:100%;
}
nav ul li:hover > ul {
top: auto;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
z-index: 9998;
}
nav ul li ul li {
background: #b56906;
}
nav ul li ul li a {
text-decoration: none;
color:#000000 !important;
display: block;
padding: 10px 0;
}
nav ul li ul li ul {
position: absolute;
left: 100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-flow: column wrap;
-moz-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
justify-content: space-around;
width:100%;
}
nav ul li ul li:hover > ul {
top: 0;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
z-index: 9999;
}
nav ul li:Last-child {
border-right: none;
}<nav>
<ul>
<li>first
<ul>
<li>1st
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>2nd
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>3rd
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>4th
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>5th
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
</ul>
</li>
<li>second
<ul>
<li>1st
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>2nd
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>3rd
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>4th
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>5th
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
</ul>
</li>
<li>third
<ul>
<li>1st
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>2nd
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>3rd
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>4th
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>5th
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
</ul>
</li>
<li>fourth
<ul>
<li>1st
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>2nd
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>3rd
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>4th
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>5th
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
</ul>
</li>
<li>fifth
<ul>
<li>1st
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>2nd
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>3rd
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>4th
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>5th
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>ich diese Navigationsleiste haben.
Was ich will ist, um den Schwebezustand von UL LI UL LI zu bekommen, aber ich kann es nicht schweben.
Wie habe ich weiß, es? Denn wenn ich
nav ul li ul li:hover a {
color: #FFF;
}
Die Textfarbe des ersten hinzufügen sollte weiß sein. Aber es funktioniert nicht
geben Sie mir 6 Minuten zu akzeptieren :) –