单击显示下拉菜单

我正在使用悬停下拉菜单上的Facebook样式。我认为一切都是正确的，但是当我点击菜单时，悬停菜单不会打开。知道我需要缺少的东西，但我没有看到我在做什么。预先感谢您的帮助。什么，我需要在菜单上单击打开单击显示下拉菜单

我用它在我的工作的html代码：

<div class="container"> 
    <div class="pay_ayar"> 
     <a class="account"></a> 
     <div class="bubble"> 
      <ul class="root"> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link2</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

也是我用它在我的工作CSS代码：

.container { 
    float:left; 
    width:500px; 
    height:90px; 
    border:1px solid #000; 
} 
.pay_ayar { 
    float:right; 
    width:20px; 
    height:25px; 
    border:1px solid #000; 
    display:none; 
} 
.container:hover .pay_ayar{ 
    display:block; 
} 
a.account{ 
    position:absolute; 
    line-height:25px; 
    width:20px; 
    height:25px; 
    cursor:pointer; 
    display:block; 
} 
.bubble{ 
    float:left; 
    position:relative; 
    width:250px; 
    height:200px; 
    padding:0px; 
    border:1px solid #000; 
    margin-top:0px; 
    display:none; 

} 
.pay_ayar.open .account { 
       cursor: pointer; 
       width: auto; 
       display: inline-block; 
       padding-left: 7px; 
       padding-top: 4px; 
       padding-bottom: 4px; 
       padding-right: 22px; 
       border: 1px solid #AAA; 
       -webkit-border-radius: 2px; 
       -moz-border-radius: 2px; 
       border-radius: 2px; 
       font-weight: bold; 
       color: #717780; 
       line-height: 16px; 
       text-decoration: none !important; 
       background: white url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px; 
      } 
      .pay_ayar.open .account { 
       border: 1px solid #3B5998; 
       color: white; 
       background: #6D84B4 url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% -26px; 
       -moz-border-radius-topleft: 2px; 
       -moz-border-radius-topright: 2px; 
       -moz-border-radius-bottomright: 0px; 
       -moz-border-radius-bottomleft: 0px; 
       -webkit-border-radius: 2px 2px 0px 0px; 
       border-radius: 2px 2px 0px 0px; 
       border-bottom-color: #6D84B4; 
      }

来源

2014-03-13 somebodyknowsme

这样http://jsfiddle.net/praveen_jegan/pu7NQ/4/？ – Praveen

它的作品只是添加jquery http://jsfiddle.net/Vinay199129/pu7NQ/5/ – Rex

包括jquery库.. [demo]（http://jsfiddle.net/pu7NQ/3/） –

您需要inc lude jquery library Demo。

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>

来源

2014-03-13 06:56:29

为什么downvoted？它工作正常与jquery库!! ... +1 – Andynedine

是的，它工作正常，我没有downvoted – somebodyknowsme

你只需要通过从jsFiddle

Updated Fiddle

来源

2014-03-13 07:01:20 Felix

您需要包括jQuery库，不要使用样式表类型属性Frameworks and Extensions选项卡里选择jQuery的版本包括jQuery（除非不使用CSS）和脚本（除非不使用JavaScript）。

在这些上下文中指定类型属性并不是必需的，因为HTML5暗示text/css和text/javascript为默认值。即使对于较旧的浏览器，也可以安全地完成此操作

HTML

<script src='http://code.jquery.com/jquery.js'><\script>

来源

2014-03-13 07:36:19

单击显示下拉菜单

回答

相关问题