个人中心
gpt4 book ai didi

CSS:下拉菜单:让子菜单与菜单对齐

转载 作者：行者123 更新时间：2023-11-28 13:39:52 25 4
gpt4 key购买 nike

我正在尝试为网站开发下拉菜单。我正在使用我为名为“ddmenu”的菜单找到的这个不错的库。我对其进行了定制，使其接近我想去的地方。我的问题是我无法使子菜单的右 边缘与父菜单的右 边缘对齐。所有 3 个菜单都向右或向左倾斜......并且倾斜程度不同。

我只是没有足够的 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>NSD: NOAA Staff Directory</title>
       <style type="text/css">
        .nav_user_menu
        {
            float: right;
            color: black;
            text-decoration: none;
            font-weight:bold; 
        }
        .nav_logout_link
        {
            display: block;
            float: right;
            padding: 5px 10px;
            color: black;
            text-decoration: none;
            font-weight:bold; 
            border-left: 1px solid;
        }

    </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="#">A Generic Link</a>
        </li>

        <li>
            <a href="#">Menu 1</a>
            <ul>
                <li><a href="#">Menu Choice 1</a></li>
                <li><a href="#">Menu Choice 2</a></li>
                <li><a href="#">Menu Choice 3</a> </li>
                <li>
                    <a href="#">Help</a>
                        <ul>
                            <li><a href="#">Submenu Choice 1</a></li>
                            <li><a href="#">Submenu Choice 2 </a></li>
                            <li><a href="#">Submenu Choice 3</a></li>
                        </ul>
                </li>
             </ul>
        </li> 


        <li>
            <a href="#">Menu 2</a>
            <ul>
                <li><a href="#">Add/Edit ACME Locations</a></li>
                <li><a href="#">Add/Edit ACME Mailing Addresses</a></li>
                <li><a href="#">Add/Edit ACME Regions</a></li>
                <li><a href="#">Add/Edit ACME Employee Types</a></li>
                <li><a href="#">Add/Edit ACME Employee Flags</a></li>
                <li><a href="#">Add/Edit ACME Production Control Users</a></li>
                <li><a href="#">Add/Edit ACME Report Access</a></li>
            </ul>
       </li>

       <!-- Log Out Button ---------------------------------------------------->
       <div class="nav_logout_link">

           <a href="#">Log Out</a>
       </div>


        <div class = "nav_user_menu">
        <li>
            <a href="#">Menu 3</a>
            <ul>
                <li><a href="#">Update My Record</a></li>
                <li><a href="#">Update My ACME Sales Profile</a></li>
                <li><a href="#">Update My Voluntary ACME Sales Statistics</a></li>
                <li><a href="#">My Reports</a></li>
            </ul>
        </li> 
        </div>


    </ul><!-- end menu -->






</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,
/* menu points to the right */
/*#ddmenu li a.sffocus ul {left:0}*/
/*#ddmenu li a.sffocus ul {left:-10em} */
/*#scooby li a.sffocus ul {left:-22em} */

/* 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,
/* menu points to the right */
/*#ddmenu li a.sffocus + ul {left:auto}*/
#ddmenu li a.sffocus + ul {left:-10em}




/* --- 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,
/* use a positive number to point the submenu to the right, use 12em for margin-left*/
#ddmenu ul li.sffocus ul {margin-left: -22em; top:-1px; left:1px}

/* for modern browsers + IE7: */
#ddmenu ul li:hover > ul,
#ddmenu ul li.sfhover > ul,
#ddmenu li li a.sffocus + ul,
/* use a positive number to point the submenu to the right, use 12 em for margin-left*/
#ddmenu li li.sffocus > ul {margin-left: -22em; 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();
    };  
  }
}

最佳答案

在显示 /* --- SHOW FIRST LEVEL SUB MENU --- */ 的部分，尝试将 left 的值更改为 0em 而不是 left:-10em;。我以前从未玩过这个插件，但我最终解决了这个问题。有两个例子。您想要更改“现代浏览器”部分中的第二个。使用行号会更容易。

关于CSS:下拉菜单:让子菜单与菜单对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12538182/

25 4 0
文章推荐： jquery - 动态div定位依次在下方
文章推荐： javascript - 在 Javascript 中动态地将边界半径分配给 li 第一个 child
文章推荐： css - 缩小时如何将背景图像显示到底部？
文章推荐： php - 2 个变量中只有一个通过 AJAX 传递
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com