css - 如何制作子菜单的子菜单项

Question

我想制作此菜单的二级或三级菜单项。我尝试使用最后一个菜单，即联系人，但第一个子菜单级别运行良好，但是当我尝试制作第 2 或第 3 级子菜单时，它不起作用 plx plx 有人帮我解决这个问题。提前致谢。

.nav {
    /*background-color:#52edc7;*/
	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 */
	-moz-transition: color 0.5s, background 0.5s;
	-0-transition: color 0.5s, background 0.5s;
    }
	.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;
	
}
 
.nav ul li ul li {
    list-style:none;
    display:block;
    float:none;
	color:#000;	
	
	}
 
.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;
	
    }
 
.nav ul li ul li a i {
    min-width:20px;
    padding-right:10px;
	
    }
	.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>
    	<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>
			<ul>
           <li><a href="#"><i class="fa fa-plus fa-1x"></i>USA</a>
			<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>
		   </li>
           <li><a href="#"><i class="fa fa-eye fa-1x"></i>Other</a></li>
        </ul></li>
    </ul>
</nav>

Answer 1

这是你想要的吗？

.nav * {
  float: left;
  display: inline-block;
  padding: 0; margin: 0;
  list-style:none;
  position: relative;  width:auto;

}
.nav ul li:hover{
    color:#52b4ed;
    padding-bottom:10px;
    background-color:#242740;
    transition: color 0.5s, background 0.5s;
    -webkit-transition: color 0.5s, background 0.5s; /* Safari */
	-moz-transition: color 0.5s, background 0.5s;
	-0-transition: color 0.5s, background 0.5s;
  display: block;
    
}
.nav a {
    display:block;
    color:#52b4ed;
    text-decoration:none;
    text-align:center;
    padding:10px 30px 10px 30px;
    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 li a:after { content: ' »'; }

.firstlevel ul {
  position: absolute;
}
/*first level*/
.firstlevel > li > ul {
  left: 0;
  top: 100%;
  width:200px
}

/*other levels*/
.firstlevel > li > ul > li ul {
  left: 100;
  top: 0%;
  width:100%;
}
/*hide and show on hover*/
.firstlevel li > ul li {
  display: none;
}
.firstlevel li:hover > ul > li {color:#52b4ed;
    padding-bottom:10px;
    background-color:#242740;
    transition: color 0.5s, background 0.5s;
    -webkit-transition: color 0.5s, background 0.5s; /* Safari */
	-moz-transition: color 0.5s, background 0.5s;
	-0-transition: color 0.5s, background 0.5s;
  display: block;
}
.firstlevel li> ul > li:hover{
    background-color:#fff;
}
.firstlevel li> ul > li:hover a{
    color:#d73914;
}
.firstlevel li> ul li:hover>ul li{background-color:#fff}
.firstlevel li> ul li:hover>ul li a{color:#d73914;}

<nav class="nav">
  <ul class="firstlevel">
    <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>
    	<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>
			<ul>
               <li><a href="#"><i class="fa fa-plus fa-1x"></i>USA</a>
                   <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>
			<ul>
                
        </ul>
		   </li>
           <li><a href="#"><i class="fa fa-eye fa-1x"></i>Other</a>
                <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>
                </li>
        </ul></li>
    </ul>

fiddle demo