CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3076482
user3076482

Reputation:

click show dropdown menu

I am working facebook style on hover dropdown menu. I think that everything is correct, but the hover menu does not open when I click menu. know I need something missing, but I did not see where I'm doing. Thank you in advance for your help. What do I need to click on the menu for the opening

Demo is JsFiddle

I use it in my work html code:

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

also i use it in my work CSS code:

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

Upvotes: 0

Views: 130

Answers (3)

Naresh Kumar
Naresh Kumar

Reputation: 345

You need to include jquery library, Do not use type attributes for style sheets (unless not using CSS) and scripts (unless not using JavaScript).

Specifying type attributes in these contexts is not necessary as HTML5 implies text/css and text/javascript as defaults. This can be safely done even for older browsers.

html

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

Upvotes: 0

Felix
Felix

Reputation: 38102

You just need to include jQuery by choosing jQuery version from Frameworks and Extensions tab of jsFiddle

Updated Fiddle

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82231

You need to include jquery library Demo.

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

Upvotes: 2

Related Questions