尝试添加 CSS 子菜单 [英] Trying to add a CSS Sub Sub Menu

查看：25
本文介绍了尝试添加 CSS 子菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在开始之前，我想让您知道，我一直在查看所有子菜单问题，但没有看到任何可以帮助我编写代码的内容.我感谢任何人能给我的任何帮助.

所以，我正在尝试添加一个子菜单，我以为我已经弄清楚了，但我认为我不太明白如何让子组合器工作.如果你能具体看一下代码的那部分，你就会在我的圣人名单"上.

ETA:哦，是的，问题是子菜单没有向右显示并显示在它应该从它的子菜单旁边的父菜单旁边，这正是我想要它做的.我希望这是有道理的.

这是小提琴预览 - http://jsfiddle.net/BVtSC/18/

这里是 CSS:

/*------------------------- 标题 ---------------------------*/#header {背景:#333 url(../images/bg-header2.png) 重复-x；高度:184px；边距:15px 0 0;}#header div {保证金:0 自动；填充:28px 0 0;位置:相对；宽度:500px；}#header div ul {高度:118px；左:10px；列表样式:无；保证金:0;溢出:可见；填充:0;位置:绝对；顶部:10px；向左飘浮;宽度:500px；}#header div ul li:first-child {保证金:0;}#header div ul li {向左飘浮;高度:66px；边距:0 0 0 65px；文本对齐:左；位置:相对；}#header div ul li a {颜色:#fff;字体系列:oswaldregular；字体大小:16px；行高:24px；文字装饰:无；文本转换:大写；}#header div ul li.selected a, #header div ul li a:hover {颜色:#DD2D00；}#header div ul li ul {高度:1000px；左:-99999px；溢出:可见；位置:绝对；顶部:37px；宽度:115px；向左飘浮;}#header div ul li:hover ul {左:0;顶部:37px；}#header div ul li ul li {背景:无#343434；边框:1px 实心 #4f4f4f;浮动:无；高度:29px；边距:-1px 0 0;填充:0 12px;位置:相对；宽度:自动；z-索引:1000；}#header div ul li ul li:hover {背景:无#DD2D00；}#header div ul li ul li:hover {左:0;顶部:0；}#header div ul li ul li a {颜色:#ffffff！重要；字体系列:Arial、Helvetica、sans-serif；字体大小:12px；行高:28px；文本转换:无；}#header div ul li ul li.selected a, #header div ul li ul li a:hover {颜色:#fff！重要；}#header div ul li ul li ul {高度:1000px；右:-99999px；溢出:可见；位置:绝对；顶部:37px；宽度:115px；浮动:对；}#header div ul li ul li:hover ul {左:0;顶部:37px；}#header div ul li ul li ul li {背景:无#343434；边框:1px 实心 #4f4f4f;浮动:无；高度:29px；边距:-1px 0 0;填充:0 12px;位置:相对；宽度:自动；z-索引:1000；}#header div ul li ul li ul li:hover {背景:无#DD2D00；}#header div ul li ul li ul li:hover {左:0;顶部:0；}#header div ul li ul li ul li a {颜色:#ffffff！重要；字体系列:Arial、Helvetica、sans-serif；字体大小:12px；行高:28px；文本转换:无；}#header div ul li ul li ul li.selected a, #header div ul li ul li ul li a:hover {颜色:#fff！重要；}

这是 HTML:

同样，任何帮助都会创造奇迹.谢谢您的考虑.:)

解决方案

或者你可以使用这个嵌套菜单的简单例子.(无限制).jsfiddle
你应该只调整它的大小和颜色.

HTML

    <li><a href="#">item1</a></li><li><a href="#">item2</a><ul><li><a href="#">sub item1</a></li><li><a href="#">sub item2</a></li><li><a href="#">sub item3</a><ul><li><a href="#">子子项目1</a></li><li><a href="#">子子项目2</a><ul><li><a href="">sub sub sub item1</a></li><li><a href="">sub sub sub item2</a></li><li><a href="">sub sub sub item3</a><ul><li><a href="">是的，为什么不呢?</a></li><li><a href="">您仍然可以继续</a></li><li><a href="">如果你想要</a></li><li><a href="">你可以试试.(-;</a></li>
<li><a href="">sub sub sub item4</a></li><li><a href="#">子项目3</a></li><li><a href="#">sub item4</a></li><li><a href="#">item3</a></li>

CSS

ul.menu{位置:相对；}ul.menu li{填充:0;保证金:0;位置:相对；边框:1px 实心；}ul.menu>李{向左飘浮;填充:10px 45px;}ul.menu>李丽{填充:7px;}ul.menu , ul.menu ul{列表样式:无；填充:5px；保证金:0;溢出:可见；}ul.menu li:hover >ul{显示:块；}ul.menu ul{显示:无；位置:绝对；左:-6px;顶部:37px；宽度:160px；}ul.menu ul:悬停{显示:块；}ul.menu ul ul{左:158px；顶部:0；}

I want you to know before I get started that I have been looking at all of the sub sub menu questions and I didn't see anything that could help the code I already have laid out. I appreciate any help at all that anybody can give me.

So, I am trying to add a sub sub menu and I thought I had figured it out, but I don't think I quite understand how to get the child combinators to work. If you could take a look at that part of the code specifically, you would be on my 'saint list.'

ETA: Oh yeah, and the problem is that the sub sub menu does not go out to the right and show up next to the parent that it is supposed to be subbing from, which is what I want it to do. I hope that makes sense.

Here is the fiddle preview - http://jsfiddle.net/BVtSC/18/

And here is the CSS:

/*------------------------- Header ---------------------------*/
 #header {
 background: #333 url(../images/bg-header2.png) repeat-x;
 height:184px;
 margin:15px 0 0;
}
#header div {
margin:0 auto;
padding:28px 0 0;
position:relative;
width:500px;
}
#header div ul {
height:118px;
left:10px;
list-style:none;
margin:0;
overflow:visible;
padding:0;
position:absolute;
top:10px;
float: left;
width: 500px;
}
#header div ul li:first-child {
margin:0;
}
#header div ul li {
float:left;
height:66px;
margin:0 0 0 65px;
text-align:left;
position:relative;
}
#header div ul li a {
color:#fff;
font-family:oswaldregular;
font-size:16px;
line-height:24px;
text-decoration:none;
text-transform:uppercase;
}
#header div ul li.selected a, #header div ul li a:hover {
color:#DD2D00;
}
#header div ul li ul {
height:1000px;
left:-99999px;
overflow:visible;
position:absolute;
top:37px;
width:115px;
float: left;
}
#header div ul li:hover ul {
left:0;
top:37px;
}
#header div ul li ul li {
background:none #343434;
border:1px solid #4f4f4f;
float:none;
height:29px;
margin:-1px 0 0;
padding:0 12px;
position:relative;
width:auto;
z-index:1000;
}
#header div ul li ul li:hover {
background:none #DD2D00;
}
#header div ul li ul li:hover {
left:0;
top:0;
}
#header div ul li ul li a {
color:#ffffff!important;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:28px;
text-transform:none;
}
#header div ul li ul li.selected a, #header div ul li ul li a:hover {
color:#fff!important;
}
#header div ul li ul li ul {
height:1000px;
right:-99999px;
overflow:visible;
position:absolute;
top:37px;
width:115px;
float: right;
}
#header div ul li ul li:hover ul {
left:0;
top:37px;
}
#header div ul li ul li ul li {
background:none #343434;
border:1px solid #4f4f4f;
float:none;
height:29px;
margin:-1px 0 0;
padding:0 12px;
position:relative;
width:auto;
z-index:1000;
}
#header div ul li ul li ul li:hover {
background:none #DD2D00;
}
#header div ul li ul li ul li:hover {
left:0;
top:0;
}
#header div ul li ul li ul li a {
color:#ffffff!important;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:28px;
text-transform:none;
}
#header div ul li ul li ul li.selected a, #header div ul li ul li ul li a:hover {
color:#fff!important;
}

Here is the HTML:

<div id="header">
<div>   

    <ul>
        <li>    <a href="index.html">Home</a>

        </li>
        <li>    <a href="about.html">About</a>

        </li>

        <li class="selected">   <a href="portfolio.html">Portfolio</a>

            <ul>
                <li>    <a href="fantasy.html">Fantasy</a>

                </li>
                <li>    <a href="makeup.html">Makeup</a>

                    <ul>
                        <li><a href="glamour.html">Glamour Makeup</a>
                        </li>
                        <li><a href="sfxmakeup.html">Special Effects Makeup</a>
                        </li>
                    </ul>
                </li>
                <li>    <a href="boudoir.html">Boudoir</a>

                </li>
                <li>    <a href="babykids.html">Baby & Kids</a>

                    <ul>
                        <li><a href="baby.html">Baby</li>
                        <li><a href="baby.html">Kids</li>  </ul>
                    </li>
                    <li>
                        <a href="family.html">Family</a>

                            <ul>
                                <li><a href="couples.html">Couples</li>
                        <li><a href="mombaby.html">Mother/Baby</li>
                        <li><a href="momchild.html">Mother/Child</li>
                        <li><a href="fatherchild.html">Father/Child</li>
                        </ul>
                    </li>
                    <li>
                        <a href="pets.html">Pets</a>

                                </li>
                                <li>    <a href="portrait.html">Portrait</a>

                                </li>
                                    </ul>
                        </li>

                        <li>    <a href="contact.html">Contact</a>

                        </li>
                    </ul>
</div>
</div>

Again, any help at all would do wonders. Thank you for your consideration. :)

解决方案

or you can use this which is a simple example of nested menu.(unlimited). jsfiddle
you should just adjust its size and color.

HTML

<ul class="menu">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a>
        <ul>
            <li><a href="#">sub item1</a></li>
            <li><a href="#">sub item2</a></li>
            <li><a href="#">sub item3</a>
                <ul>
                    <li><a href="#">sub sub item 1</a></li>
                    <li><a href="#">sub sub item 2</a>
                        <ul>
                            <li><a href="">sub sub sub item1</a></li>
                            <li><a href="">sub sub sub item2</a></li>
                            <li><a href="">sub sub sub item3</a>
                                <ul>
                                    <li><a href="">yes why not?</a></li>
                                    <li><a href="">you can still continue</a></li>
                                    <li><a href="">if you want</a></li>
                                    <li><a href="">you can try.(-;</a></li>
                                </ul>
                            </li>
                            <li><a href="">sub sub sub item4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">sub sub item 3</a></li>
                </ul>
            </li>
            <li><a href="#">sub item4</a></li>
        </ul>
    </li>
    <li><a href="#">item3</a></li>
</ul>

CSS

ul.menu{
    position:relative;
}


ul.menu li{
    padding:0;
    margin:0;
    position:relative;
    border:1px solid;
}

ul.menu > li{
    float:left;
    padding:10px 45px;
}

ul.menu > li li{
    padding:7px;
}

ul.menu , ul.menu ul{
    list-style:none;
    padding:5px;
    margin:0;
    overflow:visible;
}

ul.menu li:hover > ul{
    display:block;
}

ul.menu ul{
    display:none;
    position:absolute;
    left:-6px;
    top:37px;
    width:160px;
}

ul.menu ul:hover{
    display:block;
}

ul.menu ul ul{
    left:158px;
    top:0;
}

这篇关于尝试添加 CSS 子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆