我在三级菜单中遇到问题(如ul li ul li ul li
)。我试图创建一个三级下拉菜单,但在编码时遇到了困难。这是我尝试过的代码:
CSS
#cssmenu {
margin: width:625px;
float:right;
padding-top: 60px;
padding-right: 20px;
padding-bottom: 0;
padding-left: 0;
color:#727272;
font:normal 14px Arial, Helvetica, sans-serif;
}
#cssmenu ul {
height: 35px;
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu li {
float: left;
padding: 0px;
}
#cssmenu li a {
display: block;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 15px;
text-align: center;
text-decoration: none;
}
#cssmenu > ul > li > a {
color: #cccccc;
}
#cssmenu ul ul a {
color: #cccccc;
}
#cssmenu li > a:hover, #cssmenu ul li:hover > a {
background: #FF4A00;
color: #FFFFFF;
text-decoration: none;
}
#cssmenu li ul {
background: #333333;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 220px;
z-index: 200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul {
display: block;
}
#cssmenu li li {
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 220px;
}
#cssmenu li:hover li a {
background: none;
}
#cssmenu li ul a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#cssmenu li ul a:hover, #cssmenu li ul li:hover > a {
background: #FF4A00;
border: 0px;
color: #ffffff;
text-decoration: none;
}
#cssmenu p {
clear: left;
}
#cssmenu li ul li ul {
left:220px !important;
top:35px;
}
#cssmenu li ul li ul li a:hover {
display:block;
}
HTML
<div id="cssmenu">
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="aboutus.html">About Us</a>
<ul>
<li> <a href="#">Vision</a>
</li>
<li> <a href="#">Mission</a>
</li>
<li> <a href="#">Our Philosophy</a>
</li>
<li> <a href="#">Organisation Structure</a>
</li>
<li> <a href="#">Chairman's Message</a>
</li>
</ul>
</li>
<li><a href="#">Policy</a>
<ul>
<li><a href="#">HSE</a>
</li>
<li><a href="#">Quality</a>
</li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Electrical</a>
<ul>
<li><a href="#">Equipment Installation </a>
</li>
<li><a href="#">Lighting Systems</a>
</li>
</ul>
</li>
<li><a href="#">Mechanical</a>
<ul>
<li><a href="#">HVAC Systems </a>
</li>
<li><a href="#">P & D </a>
</li>
<li><a href="#">Lifts and Crane</a>
</li>
<li><a href="#">Structural steel </a>
</li>
</ul>
</li>
<li><a href="#">ELV</a>
<ul>
<li><a href="#">ELV</a>
</li>
<li><a href="#">FLS</a>
</li>
</ul>
</li>
<li><a href="#">Maintenance</a>
</li>
</ul>
</li>
<li><a href="#">Company Profile</a>
</li>
<li><a href="#">Careers</a>
</li>
<li><a href="#">Contact us</a>
</li>
</ul>
</div>