问题描述：

我一直在努力解决这个问题，并且我认为有些事情是有冲突的。我无法使下拉菜单实际工作。我认为btn-acc上的盘旋可能有冲突，但是当我将其移除时，似乎没有帮助。CSS下拉菜单没有出现

下拉菜单，目前没有正确格式化，我想我会格式化，当它实际上工作。当我将鼠标悬停在帐户按钮上时，是否有任何帮助可以让列表弹出来？

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

答

这里：

Fiddle example

你错过了两件小事。

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

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

里面打我给它，这是正确的...了解更多信息为什么这是正确的阅读下面的文章，HTTP： //www.w3.org/TR/CSS21/selector.html#adjacent-selectors – 2015-02-09 22:41:09

我现在非常爱你，谢谢sooooo verrry much !!!! – Swisscow 2015-02-09 23:06:27

答

嗨，你正在使用悬停错误的选择。您.account类是嵌套在其他L1标签不标签，你想一个标签

第一删除类.btn-ACC内从悬停上应用，并把它添加到李

那么最后选择改变这种

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

这里是你的工作解决方案

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

答

如果你聪明，你可以做到没有绝对定位。（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;直到你确定它是正确的。如果你能避免更好的兄弟选择器。较旧的浏览器可能会遇到问题。

答

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

fiddle

CSS下拉菜单没有出现

Fiddle example

相关推荐