垂直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级下拉菜单

回答

相关问题