使用HTML和CSS下拉菜單

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>。任何人都可以指導我如何做到這一點。懸停在網頁設計上時需要右側的子菜單。提前致謝。

Answer 1

嗨，你可以使用這段代碼：

body { 
 
    font-family:Tahoma, Geneva, sans-serif; 
 
    font-size:12px; 
 
    direction:rtl; 
 
\t line-height:20px; 
 
} 
 
a { 
 
    text-decoration:none; 
 
    color:#03C; 
 
} 
 
a:hover { 
 
    color:#CCC; 
 
} 
 
#main-menu { 
 
    position:relative; 
 
\t line-height:16px; 
 
} 
 
#main-menu a { 
 
    display:block; 
 
    width:150px; 
 
    padding:8px; 
 
    border:#666 solid 1px; 
 
    background-color:#030; 
 
    color:#FFF; \t   
 
} 
 
#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{ 
 
\t display:none; 
 
} 
 
#main-menu li li:hover ul{ 
 
\t display:block; 
 
\t position:absolute; 
 
\t top:10px; 
 
\t left:125px; 
 
\t 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; 
 
}

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

Answer 2

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