垂直3級下拉菜單

我有一個垂直的css菜單與3級子菜單的問題。最後一個子菜單不對齊，因爲它應該是，我不知道問題在哪裏。垂直3級下拉菜單

這裏有一個演示http://jsfiddle.net/pPckk/1/ ，如果你不能打開的jsfiddle，下面的代碼：

<div id="global-nav"> 
     <ul class='parent'> 
      <li class="smt"><a href="#">cat1</a></li> 

      <li class="c1"> 
       <ul class='child child1'> 
        <li class="smt"><a href="#">cat1.1</a></li> 

        <li class="smt"><a href="#">cat1.2</a></li> 

        <li class="c1"> 
         <ul class='child child2'> 
          <li class="smt"><a href="#">cat1.2.1</a></li> 

          <li class="c1"> 
           <ul class='child child3'> 
            <li class="smt"><a href="#">cat1.2.1.1</a></li> 
           </ul> 
          </li> 
         </ul> 
        </li> 

        <li class="smt"><a href="#">cat1.3</a></li> 

        <li class="smt"><a href="#">cat1.4</a></li> 
       </ul> 
      </li> 

      <li class="smt"><a href="#">cat2</a></li> 

      <li class="c1"> 
       <ul class='child child1'> 
        <li class="smt"><a href="#">cat2.1</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
#nav, #nav ul { 
    line-height: 1.5em; 
    list-style-position: outside; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 
#nav a:link, #nav a:active, #nav a:visited { 
    background-color: #333333; 
    border: 1px solid #333333; 
    color: #FFFFFF; 
    display: block; 
    padding: 0 5px; 
    text-decoration: none; 
} 
#nav a:hover { 
    background-color: #FFFFFF; 
    color: #333333; 
} 
#nav li { 
    position: relative; 
    width: 100px; 
} 
#nav ul { 
    display: none; 
    left: 100px; 
    position: absolute; 
    width: 192px; 
    top:0; 
} 
#nav li ul a { 
    float: left; 
    width: 192px; 
} 
#nav ul ul { 
    top:0; 
} 
#nav li ul ul { 
    left: 192px; 
    top:25px; 
    margin: 0 0 0 13px; 
} 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul { 
    display: none; 
} 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { 
    display: block; 
}

來源

2012-02-04 lam3r4370

你的小提琴不適合我。 – Christoph 2012-02-04 14:49:18

您無法打開網站或代碼無法使用？代碼不起作用 – lam3r4370 2012-02-04 14:56:25

該代碼不起作用。「李」沒有擴大。 – Christoph 2012-02-04 15:04:11

只需添加

#nav li ul ul ul { 
    left: 192px; 
    top:0px; 
    margin: 0 0 0 13px; 
}

和你做......

以下是我所擁有的，它的工作是完美的... Yipee！我第一次做了，並且工作了！

<html> 
<head> 
<style> 
#nav, #nav ul { 
    line-height: 1.5em; 
    list-style-position: outside; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

#nav a:link, #nav a:active, #nav a:visited { 
    background-color: #333333; 
    border: 1px solid #333333; 
    color: #FFFFFF; 
    display: block; 
    padding: 0 5px; 
    text-decoration: none; 
} 

#nav a:hover { 
    background-color: #FFFFFF; 
    color: #333333; 
} 
#nav li { 
    position: relative; 
    width: 100px; 
} 

#nav ul { 
    display: none; 
    left: 100px; 
    position: absolute; 
    width: 192px; 
    top:0; 
} 

#nav li ul a { 
    float: left; 
    width: 192px; 
} 

#nav ul ul { 
    top:0; 
} 

#nav li ul ul { 
    left: 192px; 
    top:25px; 
    margin: 0 0 0 13px; 
} 

#nav li ul ul ul { 
    left: 192px; 
    top:0px; 
    margin: 0 0 0 13px; 
} 


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ 
    display: none; 
} 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { 
    display: block; 
} 
</style> 
</head> 
<body> 
<ul id="nav"> 
<li><a href="#">cat1</a><ul class="jaccordion"> 
<li><a href="#">cat1.1</a><ul class="jaccordion"></ul></li> 
<li><a href="#">cat1.2</a><ul class="jaccordion"> 
<li><a href="#">cat1.2.1</a><ul class="jaccordion"> 
<li><a href="#">cat1.2.1.1</a><ul class="jaccordion"></ul></li></ul></li></ul></li> 
<li><a href="#">cat1.3</a><ul class="jaccordion"></ul></li> 
</ul></li> 
<li><a href="#">cat2</a><ul class="jaccordion"> 
<li><a href="#">cat2.1</a><ul class="jaccordion"></ul></li></ul></li> 
</ul> 
</body> 
</html>

來源

2012-02-04 15:14:56

它可以在FF，IE和Opera中運行，但不能在Chrome中運行。問題出在哪裏？ – lam3r4370 2012-02-04 15:31:53

我不太瞭解，但是我知道某些屬性在某些瀏覽器中不起作用，具體取決於兼容性...... FF中有許多功能，但在IE中沒有，等等...... 我已經解決了您在代碼中遇到的問題...關於瀏覽器，我不確定... – 2012-02-04 15:35:10

抱歉說，但我無法幫助您解決瀏覽器問題...您可能需要問這個問題作爲一個單獨的問題，問爲什麼這是行不通的... – 2012-02-04 15:36:35

的問題是以下規則：

#nav li ul ul { 
    left: 192px; 
    top:25px; 
    margin: 0 0 0 13px; 
}

因爲它不僅適用於第二，也給第三級。爲您的第三級ul添加一條規則以糾正該錯誤。

我建議在這些菜單中使用uls上的類：<ul class="first-level">... 這樣可以實現更精確的樣式並縮短選擇器。

來源

2012-02-04 15:15:07 Christoph

垂直3級下拉菜單

回答

相關問題