DDMenu：使项目在子菜单中可见 [英] DDMenu: Making Items In The SubMenu Visible
本文介绍了DDMenu：使项目在子菜单中可见的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在我的网站上放置一个基于HTML / CSS / Javascript的下拉菜单。我在网上找到了一个伟大的图书馆ddmenu。我可以破解* .css文件来获取菜单大多是我想要的。
I'm experimenting with putting an HTML/CSS/Javascript based drop down menu in my website. I found a great library "ddmenu" on the web. I was able to hack the *.css file to get the menu mostly where I want it to be.
我的问题是，我无法得到ABC>帮助
My problem is that I can't get the ABC > Help submenu links to display when I just hover over help.
我不知道多少CSS，我发现ddmenu.css混乱。
I don't know much CSS and I am finding the ddmenu.css confusing.
任何想法如何解决这个问题？
Any ideas how I can fix this problem?
所有相关档案都贴在下面
All of the relevant files are pasted below
提前多谢
Steve
Thanks much in advance Steve
我的menu.html文件 p>
My menu.html file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Menu Experiment</title>
<style type="text/css">
.nav_user_menu
{
float: right;
color: black;
text-decoration: none;
font-weight:bold;
}
</style>
<link rel="StyleSheet" href="search_files/ddmenu.css" type="text/css">
<script language="JavaScript" "text="" javascript"="" src="search_files/ddmenu.js"></script>
</head>
<body>
<ul id="ddmenu">
<li>
<a href="#">ACME</a>
</li>
<li>
<a href="#">ABC</a>
<ul>
<li><a href="#">Add Staff</a></li>
<li><a href="#">Search Profiles Celeberties Yo</a></li>
<li>
<a href="#">Help</a>
<ul>
<li><a href="#">Personal HELP </a></li>
<li><a href="#">National HELP </a></li>
<li><a href="#">Global HELP</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
ddmenu.css档案：
/* ---------------------------------------------
Keyboard accessible dropdown menu
Author:Adriana Palazova
Version:22 February 2009
last rev.: 19 October 2009
gratitude to Matthew Carroll - http://carroll.org.uk/sandbox/suckerfish/bones2.html
and
Alan Gresley and Duncan Hill - http://css-class.com/articles/ursidae/
------------------------------------------------ */
#ddmenu {font: bold 10pt Arial,Helvetica;border: 2px solid gray;}
/*#ddmenu a:link {text-decoration:none}*/
/*#ddmenu a:visited {text-decoration:none}*/
#ddmenu a:hover, #ddmenu a:focus, #ddmenu a:active {text-decoration:underline}
/* --- TOP LEVEL MENU STYLES --- */
#ddmenu li{list-style-type:none;}
#ddmenu
{
float:left;
display:inline;
width:100%;
padding:0;
background:#fff0ca; /*#414141;*/
}
#ddmenu li
{
position:relative;
float:left;
/*border-right:1px solid /*#fff; */
background:#fff0ca;/*#414141; */
font-weight:bold
}
#ddmenu li a
{
display:block;
white-space: nowrap;
/*width:7em; */
padding:5px 0.7em 7px;
border: 1px solid gray;
border-top: 0px;
border-bottom:0px;
/*border-style:solid;
border-width:1px;*/
/*border-width:1px 1px 0;
border-style:solid; */
/*border-color:#3e8ebe #0b3965 #003 #3e8ebe;*/
/*color:#fff*/
}
/* --- SUB MENU ITEMS --- */
#ddmenu li li
{
border:0 none;
font-weight:normal;
z-index:20
} /* no width here because of IE */
#ddmenu li li a
{
/*width:11em; */
padding:5px 0.5em 7px;
border-width:1px
}
#ddmenu ul > li
{
display:block;
float:none;
text-align:left;
} /* for Opera */
/* --- SUB MENU FIRST LEVEL INITIAL POSITION --- */
#ddmenu ul
{
position:absolute;
left:-9999px;
top:100%;
/*width:12em; */
padding:0;
border:1px solid #003
}
/*for modern browsers:*/
#ddmenu li > ul
{
top:auto;
width:auto
}
/*see the conditional comments for IE7*/
/* --- SHOW FIRST LEVEL SUB MENU --- */
/*For ie6:*/
#ddmenu li.sfhover ul,
#ddmenu li a:active ul,
#ddmenu li.sffocusparent ul,
#ddmenu li a.sffocus ul {left:0}
/* for modern browsers + IE7:*/
#ddmenu li:hover > ul,
#ddmenu li.sfhover > ul,
#ddmenu li.sffocusparent > ul,
#ddmenu li a:active > ul,
#ddmenu li a:focus + ul,
#ddmenu li a.sffocus + ul {left:auto}
/* --- SUB MENU SECOND LEVEL and following levels UNHOVERED POSITION --- */
#ddmenu li:hover ul ul,
#ddmenu li:active ul ul,
#ddmenu a:focus ul ul,
#ddmenu li.sfhover ul ul,
#ddmenu a.sffocus ul ul,
#ddmenu li.sffocusparent ul ul,
#ddmenu li.sffocus ul ul {left:-9999px}
/* --- SHOW SECOND LEVEL SUB MENU --- */
/* For ie6: */
#ddmenu ul li a:hover ul, #ddmenu ul li.sfhover ul,
#ddmenu ul li a:active ul,
#ddmenu ul li.sffocusparent ul,
#ddmenu ul li.sffocus ul {margin-left:12em; top:-1px; left:1px}
/* for modern browsers + IE7: */
#ddmenu ul li:hover > ul,
#ddmenu ul li.sfhover > ul,
#ddmenu li li a.sffocus + ul,
#ddmenu li li.sffocus > ul {margin-left:12em; top:-1px; left:1px}
/* --- SUB LEVEL positions for JavaScript OFF - thanks http://css-class.com/articles/ursidae/ --- */
/* --- The focus position for submenu anchors --- */
#ddmenu.jsoff li li a:focus, #ddmenu.jsoff li li a:active { /* --- THE FOCUS POSITION FOR FIRST SUB MENU ANCHORS --- */
position:relative;
left:9999px;
top:-1px;
z-index:21;
}
#ddmenu.jsoff li li li a:focus, #ddmenu.jsoff li li li a:active { /* --- THE FOCUS POSITION FOR SECOND SUB MENU ANCHORS --- */
left:19999px;
margin-left:12em;
top:-2.9em;
}
/* --- The hovered position for submenu anchors when the anchor is in focus --- */
#ddmenu.jsoff li:hover li a:focus, #ddmenu.jsoff li:hover li a:active {
position:relative; left:auto; top:-1px; margin-left:0}
#ddmenu.jsoff li:hover a:focus + ul { /* --- THE POSITION OF FIRST LEVEL SUB MENU, WHEN THE PARENT IS FOCUSSED AND HOVERED --- */
margin-left:0px;
}
#ddmenu.jsoff li li a:focus + ul { /* --- THE POSITION OF SECOND LEVEL SUB MENU, WHEN THE PARENT IS FOCUSSED FOR JavaScript OFF --- */
top:-1px;
left:12em;
margin-left:10000px;
}
#ddmenu.jsoff li:hover li a:focus + ul { /* --- THE POSITION OF SECOND LEVEL SUB MENU, WHEN THE PARENT IS FOCUSSED AND HOVERED --- */
left:12em;
margin-left:1px;
}
/* --- BACKGROUND IMAGES OF PARENT ITEMS --- */
#ddmenu li a.mum {
BACKGROUND: url(../images/down.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
#ddmenu ul li a.mum
{
BACKGROUND: url(../images/right.gif);
}
/* --- LINK HOVER STYLES --- */
#ddmenu li a:link, #ddmenu li a:visited {background-color:transparent}
#ddmenu li a:hover, #ddmenu li:hover a, #ddmenu li a:focus, #ddmenu li a:active,
#ddmenu li.sfhover a, #ddmenu li a.sffocus, #ddmenu li.sffocusparent a {background-color:#fff0ca/*#135*/}/* top level background hover color */
#ddmenu li li a:link, #ddmenu li li a:visited {background-color:transparent}
#ddmenu ul li a:hover, #ddmenu ul li:hover a, #ddmenu ul li a:focus, #ddmenu ul li a:active,
#ddmenu ul li.sfhover a, #ddmenu ul li a.sffocus, #ddmenu ul li.sffocusparent a {background-color:blue;color:#fff0ca;}
#ddmenu li li li a:link, #ddmenu li li li a:visited {background-color:transparent}
#ddmenu li li li a:hover, #ddmenu li li li:hover a, #ddmenu li li li a:focus, #ddmenu li li li a:active,
#ddmenu li li li.sfhover a, #ddmenu li li li a.sffocus, #ddmenu li li li.sffocusparent a {background-color:blue;color:#fff0ca;} /*{background-color:#135}*/
/* <!--[if IE 7]> */
#ddmenu li > ul {top:100%}
#ddmenu a
{
background: url(../images/down.gif) no-repeat -95% -50%;
}
#ddmenu ul li:hover > ul, #ddmenu ul li.sfhover > ul,
#ddmenu li li a.sffocus + ul, #ddmenu ul li.sffocusparent > ul {left:0}
ddmenu.js档案 p>
The ddmenu.js file:
var menuID = 'ddmenu';
/* --- gratitude to Matthew Carroll - http://carroll.org.uk/ - http://carroll.org.uk/sandbox/suckerfish/bones2.html
based on http://www.htmldog.com/articles/suckerfish/dropdowns/ --- */
function accessible_menus_ie() {
var sfEls = document.getElementById(menuID).getElementsByTagName('LI');
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? ' ': '') + 'sfhover';
this.parentNode.className+=(this.parentNode.className.length>0? ' ': '') + 'sfhover';
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp('( ?|^)sfhover\\b'), '');
this.parentNode.className=this.parentNode.className.replace(new RegExp('( ?|^)sfhover\\b'), '');
}
}
}
function accessible_menus() {
var ddMenu = document.getElementById(menuID);
ddMenu.className = ddMenu.className.replace(new RegExp('(^|\\s)jsoff(\\s|$)'), '');
var mcEls = document.getElementById(menuID).getElementsByTagName('A');
for (var i=0; i<mcEls.length; i++) {
mcEls[i].onfocus=function() {
this.className = this.className ? this.className + ' sffocus' : 'sffocus'; //a:focus
this.parentNode.className = this.parentNode.className ? this.parentNode.className + ' sffocusparent' : 'sffocusparent'; //li < a:focus
this.parentNode.parentNode.className = this.parentNode.parentNode.className ? this.parentNode.parentNode.className + ' sffocusparent' : 'sffocusparent'; //ul < li < a:focus
if(this.parentNode.parentNode.parentNode.nodeName == 'LI') { //li < ul < li < a:focus
this.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.className ? this.parentNode.parentNode.parentNode.className + ' sffocusparent' : 'sffocusparent'; //li < ul < li < a:focus
this.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.className ? this.parentNode.parentNode.parentNode.parentNode.className + ' sffocusparent' : 'sffocusparent'; //ul < li < ul < li < a:focus
if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == 'LI') { //li < ul < li < ul < li < a:focus
this.parentNode.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.parentNode.className ? this.parentNode.parentNode.parentNode.parentNode.parentNode.className + ' sffocusparent' : 'sffocusparent'; //li < ul < li < ul < li < a:focus
this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className ?this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className + ' sffocusparent' : 'sffocusparent'; //ul < li < ul < li < ul < li < a:focus
}
}
}
mcEls[i].onblur = function() {
this.className = this.className.replace(new RegExp('(^|\\s)'+'sffocus'+'(\\s|$)'), '');
this.parentNode.className = this.parentNode.className.replace(new RegExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), '');
this.parentNode.parentNode.className = this.parentNode.parentNode.className.replace(new RegExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), '');
if(this.parentNode.parentNode.parentNode.nodeName == 'LI') {
this.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.className.replace(new RegExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), '');
this.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.className.replace(new RegExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), '');
if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == 'LI') {
this.parentNode.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.parentNode.className.replace(new RegExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), '');
this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className.replace(new RegExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), '');
}
}
}
}
}
// only ie needs the sfHover script. all need the accessibility script...
// thanks Brothercake - Generic onload - GO1.1 - http://www.brothercake.com/site/resources/scripts/onload/
if(typeof window.addEventListener != 'undefined') { //.. gecko, safari, konqueror and standard
window.addEventListener('load', accessible_menus, false);}
else if(typeof document.addEventListener != 'undefined') { //.. opera
document.addEventListener('load', accessible_menus, false);}
else if(typeof window.attachEvent != 'undefined') { //.. win/ie
window.attachEvent('onload', accessible_menus_ie);
window.attachEvent('onload', accessible_menus);}
//** remove this condition to degrade older browsers
else { //.. mac/ie5 and anything else that gets this far
if(typeof window.onload == 'function') { //if there's an existing onload function
var existing = window.onload; //store it
window.onload = function() { //add new onload handler
existing(); //call existing onload function
//call generic onload function
accessible_menus_ie();
accessible_menus();
};
} else {
window.onload = function() { //setup onload function
accessible_menus_ie();
accessible_menus();
};
}
}
推荐答案
fiddle： http://jsfiddle.net/ar9TU/3/
第二级菜单（第一个下拉菜单）的链接悬停样式覆盖第三级菜单（第二个下拉菜单）的链接颜色，因为第二级菜单的CSS选择器包括：
The link hover styles for the second-level menu (the first dropdown) items are overriding the link color of the third-level menu (the second dropdown), because the CSS selectors for the second-level menu include:
#ddmenu ul li a:hover, #ddmenu ul li:hover a, #ddmenu ul li a:focus, #ddmenu ul li a:active,
#ddmenu ul li.sfhover a, #ddmenu ul li a.sffocus, #ddmenu ul li.sffocusparent a {background-color:blue;color:#fff0ca;}
特别注意这一部分：
#ddmenu li li li:hover a
所有 a 元素的 li 元素的以下属性： hover #ddmenu li li 的后代的 state（ li：hover 其中包括所有后代元素，包括可能位于任何子菜单中的元素...因此存在问题。
which says "set the following properties on all a elements that are children of li elements currently in the hover state" (for li:hover that are descendents of #ddmenu li li). That includes all descendent a elements, including those that might be in any submenus...hence the problem.
有两种方法来修复它：如果你不需要IE6支持，你可以改变上面的直接子选择器（> ）like like：
There two ways to fix it: if you don't need IE6 support, you can change the above to an "immediate child" selector (>) like so:
#ddmenu li li li:hover > a
，因此它只应用颜色 a 元素> 元素
so that it only applies the color to a elements that are immediate children of the hovered-over li elements.
或者，您可以在第三级子菜单中显式设置所有 a 元素的 color 属性， p>
Alternatively, you can explicitly set the color property of all a elements in third-level submenus, like this:
#ddmenu li li li a:link, #ddmenu li li li a:visited {background-color:transparent; color: #00f;}
（CSS规则已经在原始代码中了; color 赋值。）
(The CSS rule was already in the original code; I just added the color assignment.)
增加特殊性（因为它有更多 li 列出的元素）将覆盖父菜单：hover 选择器，将锚色设置为蓝色。
The increased specificity of the selector there (because it has more li elements listed) will override the parent menu's :hover selector, setting the anchor color back to blue.
这篇关于DDMenu：使项目在子菜单中可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
