尝试添加CSS子子菜单 [英] Trying to add a CSS Sub Sub Menu
问题描述
我想让你知道，在我开始之前，我一直在看所有的子子菜单问题，我没有看到任何可以帮助我已经编写的代码。我喜欢任何人都可以给我的任何帮助。
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：哦，是的，问题是，子子菜单不会出来到右边，并显示在父级旁边，它应该是从哪里来的，这是我想要的。我希望这是有道理的。
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.
这里是小提琴预览 - http：// jsfiddle .net / BVtSC / 18 /
Here is the fiddle preview - http://jsfiddle.net/BVtSC/18/
这里是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;
}
这里是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. :)
推荐答案
或者你可以使用这是嵌套菜单的一个简单的例子。 jsfiddle
您只需调整其大小和颜色。
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屋！
