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

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

我还没有输入你所有的样式，但我让你的子菜单正常工作。不确定 'Other' 应该去哪里？

nav {
  margin-top: 15px
}
nav ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}
nav ul a {
  display: block;
  color: blue;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  line-height: 32px;
  padding: 0 15px;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
nav ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

nav ul li:hover {
  color: #52b4ed;
  background-color: #242740;
}
nav ul ul a {
  line-height: 120%;
  padding: 10px 15px
}
nav ul ul ul {
  top: 0;
  left: 100%
}
nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0
}
nav ul ul li {
  float: none;
  width: 92px;
}
nav ul li:hover > ul {
  display: block
}
.nav ul {
  list-style: none;
  width: 10em;
}
.nav a {
  padding: 10px 15px;
  color: #ffb732;
  font-weight: 900
}
.nav a:hover {
  background-color: #ffc55a;
  color: #33b3a6;
  font-weight: 900
}
.nav li {
  position: relative;
}
.nav > li {
  float: left;
  border-top: 1px solid #6bf4e5;
}
.nav > li > .parent {
  background-image: url(../images/downArrow.png);
  background-repeat: no-repeat;
  background-position: right;
}
.nav > li > a {
  display: block
}
.nav li ul {
  position: absolute;
  left: -9999px;
}
.nav > li.hover > ul {
  left: 0;
}
.nav li:hover ul {
  left: 100px;
  top: 0;
}
.nav li ul a {
  display: block;
  background-color: #c1f5ef;
  position: relative;
  z-index: 100;
  border-top: 1px solid #66e6d9;
  overflow-y: none;
  font-weight: 560;
}
.nav li ul li ul a {
  background-color: #e0faf7;
  z-index: 200;
  border-top: 1px solid #707070;
  overflow-y: none;
}
li.parent,
ul.parent {
  -webkit-padding-start: 0 !important;
  -moz-padding-start: 0 !important;
  color: #c1f5ef;
}
ul.parent {
  display: inline-block;
}

<nav>
<ul>
  <li ><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact Us</a>
    <ul>
      <li><a href="#">USA &nbsp; &nbsp; >></a>
            <ul>
              <li><a href="#">NY</a></li>
              <li><a href="#">LA</a></li>
              
            </ul>
          </li>
        <li><a href="#">Other</a></li>
          
        </ul>
    </li>
    </ul>
  

</nav>

Fiddle

Answer 2

这是你想要的吗？

.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

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

How to make sub menu items of sub menu

css

menu

nav