Css 垂直三级下拉菜单_Css_Drop Down Menu

Css 垂直三级下拉菜单

css drop-down-menu

Css 垂直三级下拉菜单,css,drop-down-menu,Css,Drop Down Menu,我有一个问题，垂直css菜单有3级子菜单。最后一个子菜单没有对齐，我不知道哪里有问题这里有一个演示如果无法打开JSFIDLE，则代码如下： <div id="global-nav"> <ul class='parent'> <li class="smt"><a href="#">cat1</a></li> <li class="c1">

我有一个问题，垂直css菜单有3级子菜单。最后一个子菜单没有对齐，我不知道哪里有问题

这里有一个演示如果无法打开JSFIDLE，则代码如下：

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





























#导航{
线高：1.5em；
列表样式位置：外部；
列表样式类型：无；
保证金：0；
填充：0；
位置：相对位置；
}
#导航a:链接，#导航a:活动，#导航a:已访问{
背景色：#333333；
边框：1px实心#333333；
颜色：#FFFFFF；
显示：块；
填充：0 5px；
文字装饰：无；
}
#导航a：悬停{
背景色：#FFFFFF；
颜色：#333333；
}
#李海军{
位置：相对位置；
宽度：100px；
}
#导航ul{
显示：无；
左：100px；
位置：绝对位置；
宽度：192px；
排名：0；
}
#纳夫利乌拉酒店{
浮动：左；
宽度：192px；
}
#导航ul{
排名：0；
}
#纳夫利乌尔{
左：192px；
顶部：25px；
利润率：0.13px；
}
#导航李：悬停ul，#导航李：悬停ul，#导航李：悬停ul{
显示：无；
}
#导航李：悬停ul，#导航李：悬停ul，#导航李：悬停ul，#导航李：悬停ul，#导航李：悬停ul{
显示：块；
}

只需添加

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

你已经完成了

下面是我所拥有的，它工作得非常完美。。。哎呀！！！我第一次做了并且成功了

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


#导航{
线高：1.5em；
列表样式位置：外部；
列表样式类型：无；
保证金：0；
填充：0；
位置：相对位置；
}
#导航a:链接，#导航a:活动，#导航a:已访问{
背景色：#333333；
边框：1px实心#333333；
颜色：#FFFFFF；
显示：块；
填充：0 5px；
文字装饰：无；
}
#导航a：悬停{
背景色：#FFFFFF；
颜色：#333333；
}
#李海军{
位置：相对位置；
宽度：100px；
}
#导航ul{
显示：无；
左：100px；
位置：绝对位置；
宽度：192px；
排名：0；
}
#纳夫利乌拉酒店{
浮动：左；
宽度：192px；
}
#导航ul{
排名：0；
}
#纳夫利乌尔{
左：192px；
顶部：25px；
利润率：0.13px；
}
#导航李尔{
左：192px；
顶部：0px；
利润率：0.13px；
}
#导航李：悬停ul，#导航李：悬停ul，#导航李：悬停ul{
显示：无；
}
#导航李：悬停ul，#导航李：悬停ul，#导航李：悬停ul，#导航李：悬停ul，#导航李：悬停ul{
显示：块；
}

只需添加

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

你已经完成了

下面是我所拥有的，它工作得非常完美。。。哎呀！！！我第一次做了并且成功了

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


#导航{
线高：1.5em；
列表样式位置：外部；
列表样式类型：无；
保证金：0；
填充：0；
位置：相对位置；
}
#导航a:链接，#导航a:活动，#导航a:已访问{
背景色：#333333；
边框：1px实心#333333；
颜色：#FFFFFF；
显示：块；
填充：0 5px；
文字装饰：无；
}
#导航a：悬停{
背景色：#FFFFFF；
颜色：#333333；
}
#李海军{
位置：相对位置；
宽度：100px；
}
#导航ul{
显示：无；
左：100px；
位置：绝对位置；
宽度：192px；
排名：0；
}
#纳夫利乌拉酒店{
浮动：左；
宽度：192px；
}
#导航ul{
排名：0；
}
#纳夫利乌尔{
左：192px；
顶部：25px；
利润率：0.13px；
}
#导航李尔{
左：192px；
顶部：0px；
利润率：0.13px；
}
#导航李：悬停ul，#导航李：悬停ul，#导航李：悬停ul{
显示：无；
}
#导航李：悬停ul，#导航李：悬停ul，#导航李：悬停ul，#导航李：悬停ul，#导航李：悬停ul{
显示：块；
}

问题在于以下规则：

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

因为它不仅适用于第二级，也适用于第三级。为您的第三级ul添加一条规则以更正此问题

我建议在这样的菜单中使用uls上的类：

…

这允许更精确的样式设置并缩短选择器。

问题在于以下规则：

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

因为它不仅适用于第二级，也适用于第三级。为您的第三级ul添加一条规则以更正此问题

我建议在这样的菜单中使用uls上的类：

…

这允许更精确的样式设置并缩短选择器。

你的小提琴对我不起作用。你不能打开网站，或者代码不起作用？代码不起作用。

li

未展开。您使用哪个浏览器？Chrome？我测试