Question

我正在悬停下拉菜单中使用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;
            }

Answer 1

您需要包含jquery库 Demo 。

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

Answer 2

您只需要在jQuery

的Frameworks and Extensions标签中选择jQuery版本，即可添加jsFiddle

<强> Updated Fiddle

Answer 3

您需要包含jquery库，不要使用样式表的类型属性（除非不使用CSS）和脚本（除非不使用JavaScript）。

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

<强> HTML

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

点击显示下拉菜单

3 个答案: