使用css only菜单正确显示第三层子菜单 [英] Displaying third tier submenus properly with css only menu
问题描述
我正在开发一个新网站，并且在css菜单中遇到问题。通过示例更容易解释：以下是网站的链接： http：//www.webau .net / CSFF / index.asp
在Home父菜单项下，我有以下配置：
顶级菜单（父级）
子菜单1（子级1）
子级菜单2（孙子级1）
子级菜单3 2）
子菜单4（子3）
孙子1看起来像孩子2菜单的地方：
顶级菜单（父）
子菜单1（子1）
子菜单2（孙子1）
子菜单4（子3）
$ b b
我可以看到submenu 2 ..的列表上的一个轻微的偏移。这使我认为这是一个尝试显示不适当的孙子。
假设我有两个问题。
首先是第三层菜单（孙子菜单2）同时显示第二层菜单（子子菜单1,3 ，4）将鼠标悬停在父菜单项上时显示。
其次是由于某种原因，子菜单2项目会替代子菜单3。
$ b $
我可以帮助我找出如何添加新的CSS代码来处理使用第三层或多层菜单..所以它们是隐藏的，直到他们自己的父项被徘徊，然后显示在它的父项的子菜单列的右边。
再次感谢你的帮助。
SunnyOz
为了方便起见：
HTML代码：
code>< div id =navcontainer>
< div id =navsection>
< ul>
< li id =navactive>< a class =currenthref =＃>首页< / a>
< ul>
< li>< a href =＃>子菜单1< / a>
< ul>
< li>< a href =＃>子菜单2< / a>< / li>
< / ul>
< / li>
< li>< a href =＃>子菜单3< / a>< / li>
< li>< a href =＃>子菜单4< / a>< / li>
< / ul>
< / li>
< li>< ...例如不需要的菜单项的其余部分>
< / li>
< / ul>
< / div>
< / div>
CSS代码：
#navcontainer
{
width：711px;
height：25px;
text-align：center;
margin：0px auto; / *中心容器页面* /
清除：both;
background-color：＃129F9F;
border：3px solid #FFFFFF;
-moz-border-radius：5px;
-webkit-border-radius：5px;
-o-border-radius：5px;
-ms-border-radius：5px;
border-radius：5px;
/ * IE10 Consumer Preview * /
background-image：-ms-linear-gradient（top，＃16ACAC 0％，＃0D6F6F 100％）;
/ * Mozilla Firefox * /
background-image：-moz-linear-gradient（top，＃16ACAC 0％，＃0D6F6F 100％）;
/ * Opera * /
background-image：-o-linear-gradient（top，＃16ACAC 0％，＃0D6F6F 100％）;
/ * Webkit（Safari / Chrome 10）* /
background-image：-webkit-gradient（linear，left top，left bottom，color-stop（0，＃16ACAC）色阻（1，＃0D6F6F））;
/ * Webkit（Chrome 11+）* /
background-image：-webkit-linear-gradient（top，＃16ACAC 0％，＃0D6F6F 100％）;
/ * W3C标记，IE10发布预览* /
background-image：线性梯度（到底部，＃16ACAC 0％，＃0D6F6F 100％）;
}
#navsection
{
height：24px;
line-height：24px;
font-size：12px;
position：relative;
}
#navsection ul
{
padding：0px 0px 0px 35px; / * padding在左边获取导航菜单中心..因为它有一个浮动左，使其正确显示* /
list-style：none;
}
#navsection ul li
{
padding：0;
margin：0;
border-right：2px solid＃129F9F;
float：left;
}
#navsection ul li.navcontact / *停止导航行结束处的右边框* /
{
padding：0;
margin：0;
border-right：none;
float：left;
}
#navsection ul li a
{
color：#FFF;
display：block;
text-decoration：none;
padding：0 15px;
}
#navsection> ul> li> a：hover，#navsection> ul> LI：hover> a
{
text-decoration：none;
color：＃EAA339;
/ * IE10 Consumer Preview * /
background-image：-ms-linear-gradient（top，＃0D6F6F 0％，＃16ACAC 100％）;
/ * Mozilla Firefox * /
background-image：-moz-linear-gradient（top，＃0D6F6F 0％，＃16ACAC 100％）;
/ * Opera * /
background-image：-o-linear-gradient（top，＃0D6F6F 0％，＃16ACAC 100％）;
/ * Webkit（Safari / Chrome 10）* /
background-image：-webkit-gradient（linear，left top，left bottom，color-stop（0，＃0D6F6F）颜色停止（1，＃16ACAC））;
/ * Webkit（Chrome 11+）* /
background-image：-webkit-linear-gradient（top，＃0D6F6F 0％，＃16ACAC 100％）;
/ * W3C标记，IE10发布预览* /
background-image：线性渐变（到底部，＃0D6F6F 0％，＃16ACAC 100％）;
}
#navsection> ul> li> a.current：hover，#navactive a.current：link，#navactive a：visited，#navactive> ul li a：hover，#navsection a：hover
{
text-decoration：none;
color：＃EAA339;
/ * IE10 Consumer Preview * /
background-image：-ms-linear-gradient（top，＃0D6F6F 0％，＃16ACAC 100％）;
/ * Mozilla Firefox * /
background-image：-moz-linear-gradient（top，＃0D6F6F 0％，＃16ACAC 100％）;
/ * Opera * /
background-image：-o-linear-gradient（top，＃0D6F6F 0％，＃16ACAC 100％）;
/ * Webkit（Safari / Chrome 10）* /
background-image：-webkit-gradient（linear，left top，left bottom，color-stop（0，＃0D6F6F）颜色停止（1，＃16ACAC））;
/ * Webkit（Chrome 11+）* /
background-image：-webkit-linear-gradient（top，＃0D6F6F 0％，＃16ACAC 100％）;
/ * W3C标记，IE10发布预览* /
background-image：线性渐变（到底部，＃0D6F6F 0％，＃16ACAC 100％）;
}
#navsection ul li ul
{
display：none;
width：auto;
position：absolute;
padding：0px;
margin：0px;
}
#navsection ul li：hover ul
{
display：block;
position：absolute;
margin：0;
padding：0;
}
#navsection ul li：hover li
{
float：none;
list-style：none;
margin：0px;
}
#navsection ul li：hover li
{
font-size：12px;
height：24px;
background：＃54C4C4;
border：1px solid #FFFFFF;
-moz-border-radius：5px;
-webkit-border-radius：5px;
-o-border-radius：5px;
-ms-border-radius：5px;
border-radius：5px;
}
#navsection ul li：hover li a
{
font-size：11px;
color：#fff;
padding：0px;
display：block;
width：150px;
}
#navsection ul li li a：hover
{
font-size：11px;
height：24px;
color：＃EAA339;
-moz-border-radius：5px;
-webkit-border-radius：5px;
-o-border-radius：5px;
-ms-border-radius：5px;
border-radius：5px;
}
-
您正在显示所有
< ul />存在于悬浮< li />下方。
更改#navsection ul li：hover ul到#navsection ul li：hover> ul仅选择直接子级 -
您将每个拖放级别的位置设置为相同。
尝试添加#navsection ul ul ul {top：1em; left：140px; -
title属性会对您的导航产生负面影响。
我会完全删除它们，因为他们不会向链接和添加任何真正有用的信息，使导航难以使用。
我希望能帮助：）
I am developing a new site, and am having problems with the css menu. It is easier to explain by example: Here is the link of the site: http://www.webau.net/CSFF/index.asp
Under the "Home" parent menu item, I have the following configuration:
Top level menu (parent)
Submenu 1 (child 1)
Submenu 2 (grandchild 1)
Submenu 3 (child 2)
Submenu 4 (child 3)
Instead it appears on the page like this where the grandchild 1 looks like it takes the place of the child 2 menu:
Top level menu (parent)
Submenu 1 (child 1)
Submenu 2 (grandchild 1)
Submenu 4 (child 3)
I can see a slight offset on the listing of Submenu 2.. which makes me think it is an attempt to display the grandchild inappropriately.
So I am assuming I have two problems..
First is that the third tier menu (grandchild submenu 2) is displaying at the same time the second tier menus (child submenus 1, 3, 4) display when you hover over the parent menu item.
And second is that for some reason the grandchild submenu 2 item is displacing (laying ontop of) the child submenu 3.
I think problem two will be fixed when I correct the display of the grandchild submenu.
Can someone help me figure out how to add new css code to deal with the third tier or multi- tier menus .. so they are hidden until their own parent is hovered, and to then display to the right of it's parent's submenu column?
Thanks again for your help. SunnyOz
For your convenience: HTML Code:
<div id="navcontainer">
<div id="navsection">
<ul>
<li id="navactive"><a class="current" href="#">Home</a>
<ul>
<li><a href="#">submenu 1</a>
<ul>
<li><a href="#">submenu 2</a></li>
</ul>
</li>
<li><a href="#">submenu 3</a></li>
<li><a href="#">submenu 4</a></li>
</ul>
</li>
<li><... rest of menu items not needed for example>
</li>
</ul>
</div>
</div>
CSS Code:
#navcontainer
{
width: 711px;
height: 25px;
text-align: center;
margin: 0px auto; /*Center container on page*/
clear: both;
background-color: #129F9F;
border: 3px solid #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%);
/* Opera */
background-image: -o-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #16ACAC), color-stop(1, #0D6F6F));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #16ACAC 0%, #0D6F6F 100%);
}
#navsection
{
height: 24px;
line-height: 24px;
font-size: 12px;
position: relative;
}
#navsection ul
{
padding: 0px 0px 0px 35px; /* padding on left to get nav menu to center.. since it has a float left to make it display properly*/
list-style: none;
}
#navsection ul li
{
padding: 0;
margin: 0;
border-right: 2px solid #129F9F;
float: left;
}
#navsection ul li.navcontact /* to stop right border at end of nav line */
{
padding: 0;
margin: 0;
border-right: none;
float: left;
}
#navsection ul li a
{
color: #FFF;
display: block;
text-decoration: none;
padding: 0 15px;
}
#navsection > ul > li > a:hover, #navsection > ul > li:hover > a
{
text-decoration: none;
color: #EAA339;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);
/* Opera */
background-image: -o-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0D6F6F), color-stop(1, #16ACAC));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #0D6F6F 0%, #16ACAC 100%);
}
#navsection > ul > li > a.current:hover, #navactive a.current:link, #navactive a:visited, #navactive > ul li a:hover, #navsection a:hover
{
text-decoration: none;
color: #EAA339;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);
/* Opera */
background-image: -o-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0D6F6F), color-stop(1, #16ACAC));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #0D6F6F 0%, #16ACAC 100%);
}
#navsection ul li ul
{
display: none;
width: auto;
position: absolute;
padding: 0px;
margin: 0px;
}
#navsection ul li:hover ul
{
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#navsection ul li:hover li
{
float: none;
list-style: none;
margin: 0px;
}
#navsection ul li:hover li
{
font-size: 12px;
height: 24px;
background: #54C4C4;
border: 1px solid #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
#navsection ul li:hover li a
{
font-size: 11px;
color: #fff;
padding: 0px;
display: block;
width: 150px;
}
#navsection ul li li a:hover
{
font-size: 11px;
height: 24px;
color:#EAA339;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
There are 3 issues here.
You are displaying all
<ul/>elements that exist below a hovered<li/>. Change#navsection ul li:hover ulto#navsection ul li:hover > ulto select the immediate child onlyYou are setting the position of each drop level to be the same. Try adding something like
#navsection ul ul ul { top: 1em; left: 140px; }, this will stop the grandchild obscuring the child.You're
titleattributes are negatively affecting your navigation. I'd remove them entirely as they do not add any real beneficial information to the link and obscure the menu items making the navigation difficult to use.
I hope that helps :)
这篇关于使用css only菜单正确显示第三层子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
