DDMenu: Making Items In The SubMenu Visible

2019-09-15 09:17发布

站内文章 / HTML/CSS
8 0 0

问题:

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.

My problem is that I can't get the ABC > Help submenu links to display when I just hover over help.

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

Thanks much in advance Steve

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>

The ddmenu.css file:

/* ---------------------------------------------
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}

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

回答1:

Updated fiddle: http://jsfiddle.net/ar9TU/3/

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

In particular, note this part:

#ddmenu li li li:hover a

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.

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

so that it only applies the color to a elements that are immediate children of the hovered-over li elements.

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

(The CSS rule was already in the original code; I just added the color assignment.)

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.



标签： css drop-down-menu
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~