Question

我正在尝试在我的网站上放置一个基于HTML / CSS / Javascript的下拉菜单。我在网上找到了一个很棒的图书馆“ddmenu”。我能够破解* .css文件以获取我想要的菜单。

子菜单显示向右移动。如何让它显示向左移动？

我不太了解CSS，我发现ddmenu.css令人困惑。

所有相关文件都粘贴在

下面

非常感谢史蒂夫

我的menu.html文件

<!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文件：

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

Answer 1

你想要的相关CSS是ddmenu.css的一部分：

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

特别是，您希望将margin-left值更改为负值，以便将第二个子菜单向左移动。（现在，margin-left:12em;将子菜单颠覆到主菜单的右侧。）但是，我不知道如何随意轻松地为动态宽度子菜单做这项工作，所以你要么必须明确设置宽度（如下面的规则），或通过Javascript检测它并设置负边距，或找到比我更好的CSS。：）

对于您的特定示例，8em似乎或多或少是正确的宽度，所以我这样做：

...
#ddmenu ul li.sffocus ul { width: 8em; margin-left:-8em; top:-1px; left:1px}

...
#ddmenu li li.sffocus > ul { width: 8em; margin-left:-8em; top:-1px; left: 1px }

Here's a jsfiddle进行了上述更改。（看起来子菜单上的悬停样式/链接颜色仍然存在问题，但原始版本中存在这些问题，因此我将其单独留下。）

DDMenu：使子菜单显示指向左侧而不是右侧

1 个答案: