CSS 下拉菜单未出现

Question

我一直在研究这个，我认为有些事情是矛盾的。我无法让下拉菜单真正起作用。我认为 btn-acc 上的悬停可能有冲突，但当我删除它时，它似乎没有帮助。

下拉菜单当前格式不正确，我想我会在它实际工作时对其进行格式化。当我将鼠标悬停在帐户按钮上时，是否有助于使列表简单地弹出？

    <div id="fb-root"><span class="panel">
      <ul class="main">             
            <li><a class="btn-acc" href="#">Account</a></li>
                <ul class="account">
                    <li>My Account</li> 
                    <li>Prefrences</li> 
                    <li>Options</li> 
                    <li>Submit a Recipe</li> 
                    <li>Forum</li> 
                    <li>About Us</li>
                </ul> 
            <li><a class="btn-logout" href="#">Log Out</a></li>
            </ul>
            </span>
            </div>


/*--CSS Starts HERE ----------*/

    .main {
    text-align: left;
     display: inline;
}
.main li {
    display: inline-block;
    position: realtive;
}

    #fb-root {
        text-align: right;
        padding:9px 12px;
        border-bottom: thin;
        border-color: black;
        }

    #fb-root .btn-acc {
        border-radius: 5px;
        border: 0 solid #01060E;
        background-color: #BAC6D7;
        margin-right: 10px;
        margin-left: 10px;
        text-align: center;
        color: #F7F7F7;
        padding: 8px 15px
    }

    #fb-root .btn-acc:hover,
    #fb-root .btn-acc:active {
        color: #F7F7F7;
        background: #2c3f52;
    }


        .btn-logout {
            margin-right: 10px;
            margin-left: 10px;  
            border-radius: 5px;
            border: 0 solid #01060E;
            background-color: #BAC6D7;
            text-align: center;
            color: #F7F7F7;
            padding: 8px 15px
        }

        .btn-logout:hover,
        .btn-logout:active {
            color: #F7F7F7;
            background: #2c3f52;
        }
        .account {
          padding: 0;
          position: absolute;
          top: 48px;
          left: 0;
          width: 150px;
          -webkit-box-shadow: none;
          -moz-box-shadow: none;
          box-shadow: none;
          display: none;
          opacity: 0;
          visibility: hidden;
          -webkit-transiton: opacity 0.2s;
          -moz-transition: opacity 0.2s;
          -ms-transition: opacity 0.2s;
          -o-transition: opacity 0.2s;
          -transition: opacity 0.2s;
        }

        #fb-root .btn-acc:hover .account{
            display:block;
            opacity:1;
            visibility: visible;    
        }

Answer 1

这里：

Fiddle example

你漏掉了两件小事。

您在嵌套 ul 之前关闭了 li，这使得整个元素无效 HTML。 li 应该包裹你的 ul
您需要将 :hover 定义为同级规则，因为 .account 不是您按钮的子项。像这样：

#fb-root .btn-acc:hover + .account{ /*This line changed*/
  display:block;
  opacity:1;
  visibility: visible;    
 }

Answer 2

您好，您使用了错误的悬停选择器。您的 .account class 嵌套在不在标签中的其他 li 标签下，您试图在标签

内应用悬停

先从a中去掉class .btn-acc，加入li中

然后将最后一个选择器更改为此

    #fb-root .btn-acc:hover + .account{
            display:block;
            opacity:1;
            visibility: visible;    
        }

这是您的工作解决方案

http://jsbin.com/kateletisu/6/edit

Answer 3

如果你聪明的话，不用绝对定位也可以做到。 (http://www.w3schools.com/css/css_display_visibility.asp and http://www.w3schools.com/css/css_float.asp) 否则，您需要在弹出菜单上添加一个伪 class，这样它才不会消失。试试这个：

    #fb-root .acc-menu .account{
        width: 150px;
        display:none;
    }
    #fb-root .acc-menu:hover .account{
        display:inline-block;
        opacity:1;
    }

    <li class="acc-menu">
        <a class="btn-acc" href="#">Account</a>
        <div class="account">
            <ul>
                <li>My Account</li> 
                <li>Prefrences</li> 
                <li>Options</li> 
                <li>Submit a Recipe</li> 
                <li>Forum</li> 
                <li>About Us</li>
            </ul> 
        </div>
    </li>

重要的是要记住，当您处理 HTML/CSS 时，您需要同时考虑文档结构和 CSS 样式。即使您的选择器在这两种情况下都匹配，子元素也会继承父元素样式并受其父元素的大小限制。添加 * {border: solid 1px; } 直到你确定它是正确的。如果您可以避免使用同级选择器，那就更好了。较旧的浏览器可能会遇到问题。

Answer 4

你的问题是你的子菜单需要在 <li>

fiddle

CSS 下拉菜单未出现

CSS drop down menu not appearing

html

css

drop-down-menu

Fiddle example