个人中心
gpt4 book ai didi

css - 第三级 CSS 下拉菜单不起作用

转载 作者：太空宇宙 更新时间：2023-11-03 18:34:02 26 4
gpt4 key购买 nike

我有一个 2 级 CSS dropmenu 菜单，效果很好——取自网络。

我是 CSS 的新手，并试图修改它以使用 3 级但不幸的是我失败了......

我的第 3 级菜单的屏幕截图失败:

http://i1280.photobucket.com/albums/a498/paul1234562/menu-screen_zpsb180cdfa.jpg

更新:请注意，三级菜单应该显示在其父菜单的右侧，而不是在它和其他子菜单之上。

你可以在这里看到菜单:

http://etfsage.ca/test/

在“Canada Equity”下，当鼠标悬停在“Broad Market”上时，我希望“Broad Market”子菜单显示第三级菜单选项。

如果某些 CSS 大师可以帮助我完成这项工作，我将不胜感激。

HTML代码是:

<!DOCTYPE HTML>
<html>

<head>
<link rel="stylesheet" type="text/css" href="styles.css">

<meta name="robots" content="noindex, follow">
<meta name="description" content="">

<meta charset="UTF-8">
<title>Test Menu</title>


</head>
<body>


<!-- Display Main Menu !-->
<nav class="cf">
  <nav class="cf">

    <!-- menu nav -->
    <ul class="topmenu">


      <!-- Home -->
      <li class="topmenu"><a href="/index.php">Home</a></li>



      <!-- Canada Equity ETF -->
      <li class="topmenu"><a href="/index.php#eqCanBroadMarket">Canada Equity <img src="/etf-images/down-arrow.jpg"></a>
        <ul class="submenu">
          <li><a href="/index.php#eqCanBroadMarket">Broad Market</a></li>
                  <ul class="sub-submenu">
                        <li><a href="/index.php#eqCanSS"> +++Third level menu option #1</a></li>
                        <li><a href="/index.php#eqCanREITS">+++Third level menu option #2</a></li>
                        <li><a href="/index.php#eqCanMC">+++Third level menu option #3</a></li>  
                  </ul>                  
          <li><a href="/index.php#eqCanSS">Sector Specific</a></li>
          <li><a href="/index.php#eqCanREITS">REITs (Real Estate Investment Trusts)</a></li>
          <li><a href="/index.php#eqCanMC">Mid-Cap and/or Small-Cap</a></li>         
          <li><a href="/index.php#eqCanMinVol">Minimum Volatility</a></li>
        </ul>
      </li>




      <!-- USA Equity ETF -->
      <li class="topmenu"><a href="/index.php#eqUSABroadMarket">USA Equity <img src="/etf-images/down-arrow.jpg"></a>
        <ul class="submenu">
          <li><a href="/index.php#eqUSABroadMarket">Broad Market</a></li>
          <li><a href="/index.php#eqNASDAQ">NASDAQ</a></li>
          <li><a href="/index.php#eqUSASmallCap">Small Cap</a></li>
          <li><a href="/index.php#eqUSASectorSpecific">Sector Specific</a></li>
          <li><a href="/index.php#eqUSAMinVol">Minimum Volatility</a></li>
          <li><a href="/index.php#eqUSAHighBeta">High Beta</a></li>
          <li><a href="/etfs-active.php">Actively Managed: USA Equity</a></li>
        </ul>
      </li>


    </ul>


</nav>
</nav>



</body>
</html>

CSS代码是:

@charset "utf-8";
/* CSS Document */




html {
    background: #E6E3D4;
}




body {
    font: 100% Georgia, "Times New Roman", Times, serif;
    line-height: 1.2; /* */
}




/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
.cf:before, .cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}





/* START top level menu: topmenu - works great */
/* START top level menu: topmenu - works great */
/* START top level menu: topmenu - works great */

ul.topmenu {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    background: #006da6; 
    height: 2em;
    width: 100%;

    font: 100% Georgia, "Times New Roman", Times, serif;
    font-size: 0.95em;

}
li.topmenu {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: relative;
}

/* ul.sub-submenu defined - newly added as part of my third level menu mod */
/* ul.submenu defined - works great */
/* ul.topmenu defined - great great */

ul.sub-submenu, ul.submenu, ul.topmenu li a {
    display: block;
    line-height: 1.8em;
    padding: 0 1em;
    color: white;
    text-decoration: none;
    z-index:3; 
}


ul.topmenu li a:hover, ul.topmenu li:hover > a {
    background: #035c7c;
    height: 1.8em;
    padding-top: .3em;
    position: relative;
    top: -.3em;
    border-radius: .3em .3em 0 0;
    text-decoration: none;
}


ul.current, a:hover.current, ul.topmenu li:hover a.current {
    background: #AD9B7F;
    background: yellow;
    color: #eee;
    padding-top: .3em;
    border-radius: .3em .3em 0 0;
    position: relative;
    top: -.3em;
    border-bottom: .3em solid #917F63;
    cursor: default;
}

ul.topmenu li:hover ul {
    left: 0;
}


/* END top level menu: topmenu - works great */
/* END top level menu: topmenu - works great */
/* END top level menu: topmenu - works great */




/* START level 2: submenu ... works great */
/* START level 2: submenu ... works great */
/* START level 2: submenu ... works great */


ul.submenu {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    height: 1.8em;
    width: 100%;

    float: none;
    background: #035c7c;
    background: pink;
    width: auto;
    height: auto;
    position: absolute;
    top: 1.8em;
    left: -9000em;
}
ul.submenu li {
    float: none;
}

ul.submenu li a {
    border-bottom: 1px solid white;
    padding: .2em 1em;
    white-space: nowrap;
}
ul.submenu li:last-child a {
    border-bottom: none;
}
ul.submenu li a:hover {
    background: #15afcb;
    background: red;    
    height: 1.8em;
    padding-top: .2em;
    top: 0;
    border-radius: 0;
    text-decoration: none;
}

/* END level 2: submenu ... works great */
/* END level 2: submenu ... works great */
/* END level 2: submenu ... works great */




/* START level 3: attempted to add Level 3: called it sub-submenu */
/* START level 3: attempted to add Level 3: called it sub-submenu */
/* START level 3: attempted to add Level 3: called it sub-submenu */

ul.sub-submenu {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    height: 1.8em;
    width: 100%;

    float: none;
    background: #035c7c;
    width: auto;
    height: auto;
    position: absolute;
    top: 1.8em;
    left: -9000em;
}
ul.sub-submenu li {
    float: none;
}

ul.sub-submenu li a {
    border-bottom: 1px solid white;
    padding: .2em 1em;
    white-space: nowrap;
}
ul.sub-submenu li:last-child a {
    border-bottom: none;
}
ul.sub-submenu li a:hover {
    background: #15afcb;
    background: brown;  
    height: 1.8em;
    padding-top: .2em;
    top: 0;
    border-radius: 0;
    text-decoration: none; 
}

/* END level 3: sub-submenu */
/* END level 3: sub-submenu */
/* END level 3: sub-submenu */

最佳答案

我相信这对于纯 CSS 是不可能的...参见 here .您不能通过 CSS 引用 CSS 元素。

您可以做的是使用 Javascript 并动态应用所需的样式。对于您的场景，我将 display: none 设置为您的类 sub-submenu ，然后添加一个 JS 脚本，以便在悬停时，它会在其中找到任何 uls 并显示它们。我还将您的 sub-submenu 移到了 li 中。

在这里使用 jsFiddle:http://jsfiddle.net/8kvcN/1/

关于css - 第三级 CSS 下拉菜单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19150524/

26 4 0
文章推荐： jquery - 可以让动画背景变白并覆盖其他图像
文章推荐： functional-programming - 在 Racket 中定义错误
文章推荐： python - 多处理管理器进程不释放内存
文章推荐： list - Cons 元素列出 vs Cons 列表到 Scheme 中的元素
太空宇宙
个人简介

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

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