Question

我正在尝试为我的网站制作一个下拉菜单。我是网页设计和学习阶段的新手。我正在尝试这个并且工作正常。

HTML：

<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
  <li>Web Design</li>
  <li>Web Development</li>
  <li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>

CSS：

ul {

text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer; 
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li { 
background: #555; 
display: block; 
color: #fff;  
}
ul li ul li:hover 
 {
 background: #666;
 }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
 }

我想向<li>Web Design</li>添加新的列表项。任何人都可以指导我如何做到这一点。在Web设计上悬停时，需要右侧的子菜单。提前致谢。

Answer 1

<style>
#ul1 {

text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
#ul1 li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer; 
}
#ul1 li:hover {
background: #555;
color: #fff;
}
#ul2 {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
#ul3,#ul4,#ul5,#ul6 {
padding: 0;
position: absolute;
top: 0px;
left: 155;
width: 150px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}


#ul2 li,#ul3 li,#ul4 li{ 
background: #555; 
display: block; 
color: #fff;  
}
#ul2 li:hover , #ul3 li:hover , #ul4 li:hover 
 {
 background: #666;
 }

#ul1 li:hover #ul2,#ul2 li:hover #ul3,#ul3 li:hover #ul4{
display: block;
opacity: 1;
visibility: visible;
 }
</style>

<ul id="ul1"><li>Home</li>
<li>About</li>
<li>Portfolio
   <ul id="ul2"><li>Web Design</li><li>Web Development</li><li>Illustrations
       <ul id="ul3"><li>Sub1</li><li>Sub2</li><li>Sub3
           <ul id="ul4"><li>Sub1</li><li>Sub5</li><li>Sub6</li>
           </ul></li></li>
       </ul></li>
   </ul></li>
<li>Blog</li>
<li>Contact</li>
</ul>

Answer 2

嗨，你可以使用这段代码：

＆＃13;

body {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
	line-height:20px;
}
a {
    text-decoration:none;
    color:#03C;
}
a:hover {
    color:#CCC;
}
#main-menu {
    position:relative;
	line-height:16px;
}
#main-menu a {
    display:block;
    width:150px;
    padding:8px;
    border:#666 solid 1px;
    background-color:#030; 
    color:#FFF;	       
}
#main-menu a:hover {
    background-color:#060;        
}
#main-menu ul {
    list-style-type:none;
    padding-top:0px;    
}
#main-menu li {
    float:left;
    position:relative;
    text-align:center;
}
#main-menu li ul a{
    text-align:center;
    border:0px;
    border-bottom:#666 1px solid;
}
#main-menu li:hover ul ul{
	display:none;
}
#main-menu li li:hover ul{
	display:block;
	position:absolute;
	top:10px;
	left:125px;
	z-index:1000;
}
#main-menu ul.sub-menu {
    display:none;
    position:absolute;
    top:30px;
    margin-left:0px;
    padding:0px;
    z-index:999;
}
#main-menu ul.sub-menu li {
    text-align:center;
}
#main-menu li:hover ul.sub-menu {
    display: block;
    border: 1px solid #666;
}
.clear{
    clear:both;
}

＆＃13;

<div id="main-menu">
<ul>
<li><a href="#">Home</a>
   <ul class="sub-menu">
        <li><a href="#">sub1</a></li>
        <li><a href="#">sub1</a></li>
        <li><a href="#"> << sub1 </a> 
            <ul>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
           </ul>
        </li>
        <li><a href="#">sub1</a></li>        
   </ul>
</li>
<li><a href="#">About</a>
    <ul class="sub-menu">
        <li><a href="#"> << sub1</a> 
            <ul>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
           </ul>
        </li>
        <li><a href="#">sub1</a></li>
        <li><a href="#">sub1</a></li>
        <li><a href="#">sub1</a></li>        
    </ul>
</li>
<li><a href="#">Portfolio</a>
    <ul class="sub-menu">
        <li><a href="#">sub1</a></li>
        <li><a href="#"> << sub1</a>
            <ul>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
           </ul> 
        </li>          
        <li><a href="#">sub1</a></li>
        <li><a href="#"> << sub1</a>
            <ul>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
           </ul> 
        </li>        
    </ul>
</li>
</ul>
<div class="clear"></div>
</div>

＆＃13;

使用HTML和CSS下拉菜单

2 个答案: