Question

我想制作此菜单的第二级或第三级菜单项。我尝试上一个菜单，即联系，但第一个子菜单级别工作得很好但是当我尝试制作第二或第三级子菜单时它确实工作了plx plx一些身体帮助我这个。 Thnx提前。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我没有把你所有的造型都放进去，但是我的子菜单工作正常。不确定＆＃39;其他＆＃39;应该去哪儿？

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Fiddle

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

1 个答案: