0
Я хочу сделать пункты меню 2 или 3 уровня этого меню. Я пытаюсь в последнем меню, но контакт с ним, но первый уровень подменю работает хорошо, но когда я пытаюсь сделать подменю 2 или 3 уровня, он не работает plx plx, какой-то орган поможет мне в этом. Thnx заранее.Как сделать пункты подменю подменю
.nav {
/*background-color:#52edc7;*/
\t background-color:transparent;
width:auto;
}
.nav ul {
margin:0;
padding:0;
}
.nav ul li {
list-style:none;
display:inline-block;
margin:0;
}
.nav ul li a {
display:block;
text-decoration:none;
text-align:center;
padding:10px 30px 10px 30px;
color:#52b4ed;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
transition: color 0.5s, background 0.5s;
-webkit-transition: color 0.5s, background 0.5s; /* Safari */
}
.nav ul li:hover a {
color:#52b4ed;
padding-bottom:10px;
background-color:#242740;
transition: color 0.5s, background 0.5s;
-webkit-transition: color 0.5s, background 0.5s; /* Safari */
\t -moz-transition: color 0.5s, background 0.5s;
\t -0-transition: color 0.5s, background 0.5s;
}
\t .nav ul li ul {
display:none;
}
.nav ul li:hover ul {
z-index:2;
position:absolute;
display:block;
}
.nav ul li ul
{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.nav ul li ul:before, .nav ul li ul:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px/10px;
border-radius:100px/10px;
\t
}
.nav ul li ul li {
list-style:none;
display:block;
float:none;
\t color:#000; \t
\t
\t }
.nav ul li ul li:hover a {
color:#d73914;
padding-bottom:10px;
background-color:#fff;
transition: color 0.5s, background 0.5s;
-webkit-transition: color 0.5s, background 0.5s; /* Safari */
}
.nav ul li ul li {}
.nav ul li ul li a {
padding:5px 15px 5px 15px;
text-align:left;
\t
}
.nav ul li ul li a i {
min-width:20px;
padding-right:10px;
\t
}
\t .nav li > a:after { content: ' »'; }
.nav > li > a:after {content: ' »'; }
.nav li > a:only-child:after {content: ''; }
.nav ul .active {
color:#FFF;
}<nav class="nav">
<ul>
<li><a href="#"><i class="fa fa-location-arrow fa-2x"></i><Br/>Home</a></li> <li><a href="#"><i class="fa fa-male fa-2x"></i><Br/>About</a>
\t <ul>
<li><a href="#"><i class="fa fa-plus fa-1x"></i>Company</a></li>
<li><a href="#"><i class="fa fa-eye fa-1x"></i>Team</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-envelope fa-2x"></i><Br/>Contact Us</a>
\t \t \t <ul>
<li><a href="#"><i class="fa fa-plus fa-1x"></i>USA</a>
\t \t \t <ul>
<li><a href="#"><i class="fa fa-plus fa-1x"></i>LA</a></li>
<li><a href="#"><i class="fa fa-eye fa-1x"></i>NY</a></li>
</ul>
\t \t </li>
<li><a href="#"><i class="fa fa-eye fa-1x"></i>Other</a></li>
</ul></li>
</ul>
</nav>
Что такое желаемого результата? –
В настоящее время он показывает только 1-ю подменю, как показано, что показывает нам подменю «США» и «Другие», но это перекрывает подменю США под i.e LA или NY. Короче говоря, это показывает только 1-е подменю, но 2-е подменю отображается неправильно. Мой желаемый результат - подменю США LA или NY – Dami
, пожалуйста, помогите мне в подменю – Dami