3層li ul菜單

我想創建3層li ul菜單，但3層覆蓋第二層。有人能幫我把第3層緊挨着第二層對齊嗎？3層li ul菜單

我非常感謝您的意見！

最佳， W¯¯

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html> 
<head> 

<HEAD><title>bla</title> 

<style type="text/css"> 
ul { 
font-family : Arial, Verdana; 
font-size : 18px; 
font-weight: bold; 
margin : 0; 
padding : 0; 
list-style : none; 
z-index: -10; 
} 
ul li { 
display : block; 
position : relative; 
float : left; 
} 
li ul { 
display : none; 
position : relative; 
} 
ul li a { 
display : block; 
text-decoration : none; 
color : #ffffff; 
border-top : 0 solid #ffffff; 
padding : 6px 25px 6px 25px; 
background : #033a96; 
margin-left : 0; 
white-space : nowrap; 
} 

ul li a:hover { 
background : #9092c7; 
} 
li:hover ul { 
display : block; 
position : absolute; 
z-index: 10; 
} 
li:hover li { 
float : none; 
font-size : 14px; 
z-index: 10; 
} 
li:hover a { 
background : #9092c7; 
z-index: 10; 
} 
li:hover li a:hover { 
background : #033a96; 
z-index: 10; 
} 

</style> 
</head> 


<body > 

      <TABLE border=0 align="center" cellPadding=0 cellSpacing=0 valign="top"> 
       <TBODY valign="top"> 
       <TR valign="top"> 

      <TD width="100%" bgcolor="#FFFFFF"> 

       <TABLE height=19 valign="top" cellSpacing=0 cellPadding=0 width="100%" border=0> 
       <tr> 
       <td height=35 bgcolor="#033a96" > 
       <div id="menu_about" style="position: relative; z-index: 10;"> 
       <ul id="menu"> 
        <li ><a class="link" href="index.htm" >Layer 1</a> 
        <ul> 
          <li ><a href="#">Layer 2 blblb</a></li> 
          <li ><a href="#">Layer 2</a></li> 
          <ul > 
           <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li> 
           <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li> 
          </ul> 
          <li><a href="#">Layer 2</a></li> 
          <li><a href="#">Layer 2</a></li> 
          <li><a href="#">Layer 2</a></li> 
         </ul> 

        </li> 


        <li><a class="link" href="#about" data-link="second">Layer 1</a> 
         <ul> 
          <li ><a href="#">Layer 2 blblb</a></li> 
          <li ><a href="#">Layer 2</a></li> 
          <ul > 
           <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li> 
           <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li> 
          </ul> 
          <li><a href="#">Layer 2</a></li> 
          <li><a href="#">Layer 2</a></li> 
          <li><a href="#">Layer 2</a></li> 
         </ul> 
        </li> 

       </div> 
       </td> 
       </tr> 
       </TABLE>     

      </TD> 
      </TR> 
      </TBODY> 
      </TABLE> 

</BODY> 
</HTML>

來源

2013-04-11 user2268235

我很懷疑你使用的是所見即所得（像Dreamweaver）來生成代碼？兩點需要注意在此：

儘量避免內嵌樣式
不要使用表爲基礎的佈局設計，除了表格數據。使用div的，導航，頁腳，標題和預留元素

您的解決方案：

取出所有的Z-指標，它們不需要
你忘了嵌套3級ul的第二級李
嘗試設置屬性像正常狀態元素的字體大小，而不是懸停（不會改變）
我會建議命名你的UL和LI的，或至少把它們放在一個邏輯在你的CSS順序，因爲這是相當混亂年。

能解決您的導航中最重要的部分是這個CSS我加

ul li ul li ul { 
margin-left: 100%; 
}

它設置你的嵌套UL的和他們的孩子的保證金父div的寬度。

因此，這裏是你的完整的新的CSS：

ul { 
font-family : Arial, Verdana; 
font-size : 18px; 
font-weight: bold; 
margin : 0; 
padding : 0; 
list-style : none; 
} 
ul li { 
display : block; 
float : left; 
} 
ul li ul li ul { 
margin-left: 100%; 
} 
li ul { 
display : none; 
} 
ul li a { 
display : block; 
text-decoration : none; 
color : #ffffff; 
padding : 6px 25px 6px 25px; 
background : #033a96; 
white-space : nowrap; 
} 

ul li a:hover { 
background : #9092c7; 
} 
li:hover ul { 
display : block; 
position : absolute; 
} 
li li { 
float : none; 
font-size : 14px; 
} 
li:hover a { 
background : #9092c7; 
} 
li:hover li a:hover { 
background : #033a96; 
}

，並將HTML（僅相關部分）：

<div id="menu_about" style="position: relative; z-index: 10;"> 
<ul id="menu"> 
    <li ><a class="link" href="index.htm" >Layer 1</a> 
     <ul> 
      <li><a href="#">Layer 2 blblb</a></li> 
      <li><a href="#">Layer 2</a></li> 
      <li><a href="#">Layer 2</a> 
       <ul > 
        <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li> 
        <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li> 
       </ul> 
      </li> 
      <li><a href="#">Layer 2</a></li> 
      <li><a href="#">Layer 2</a></li> 
     </ul> 
    </li> 
    <li><a class="link" href="#about" data-link="second">Layer 1</a> 
     <ul> 
     <li ><a href="#">Layer 2 blblb</a></li> 
     <li ><a href="#">Layer 2</a> 
      <ul > 
       <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li> 
       <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li> 
      </ul> 
     </li> 
     <li><a href="#">Layer 2</a></li> 
     <li><a href="#">Layer 2</a></li> 
     <li><a href="#">Layer 2</a></li> 
     </ul> 
    </li> 
</ul> 
</div>

來源

2013-04-28 23:34:20 Tyblitz

3層li ul菜單

回答

相關問題