Dropdown

by Paulpro

HTML

<div id="dropdownContainer">
    <div id="showDropdown">Button</div>

    <div id="dropdown">
        <p>Hii All<p></p>Hw r u</p>
        <p><a href="#">Sign Out</a></p>
    </div>
</div>
<div style="clear: both;">
<div>
    Test Content behind drop down.     Test Content behind drop down.     Test Content behind drop down.     Test Content behind drop down    Test Content behind drop down.     Test Content behind drop down.     Test Content behind drop down.     Test Content behind drop down    Test Content behind drop down.     Test Content behind drop down.     Test Content behind drop down.     Test Content behind drop down
</div>

CSS

#dropdownContainer{
    float: right;
    width: 100px;
    text-align: center;  
    margin-top: 25px;  
}

#showDropdown{
    background-color: #080;
    cursor: pointer;
}

#dropdown{
    display: none;
    position: absolute;
    background-color: #68D;  
    border: 1px solid #000;
    width: 98px;
}

JavaScript

document.getElementById('showDropdown').onclick = showDropDown;

function showDropDown(e){
     document.getElementById('showDropdown').onclick = function(){};
     if(e.stopPropagation)
         e.stopPropagation();   // W3C model
     else
         e.cancelBubble = true; // IE model

     document.getElementById("dropdown").style.display = "block";
     document.onclick = function(e){
         var ele = document.elementFromPoint(e.clientX, e.clientY);
         if(ele == document.getElementById("showDropdown")){
             hideDropDown();
             return;
         }
         do{
             if(ele == document.getElementById("dropdown"))
                 return;
         }while(ele = ele.parentNode);
         hideDropDown();
     };
}

function hideDropDown(){
    document.onclick = function(){};
    document.getElementById("dropdown").style.display = "none";
    document.getElementById('showDropdown').onclick = showDropDown;
}