Fiddle example

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

你错过了两件小事。

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

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

Answer 2

您好，您使用错误的选择器进行悬停。您的.account类嵌套在标记内的其他li标记下，并且您尝试将鼠标悬停在标记内

首先从a中删除 .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和http://www.w3schools.com/css/css_float.asp）否则你的弹出菜单上需要一个伪类，所以它不会消失。试试这个：

    #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下拉菜单未显示

4 个答案:

Fiddle example