TIME NOW
World current time now,
CALENDAR
Calendar monthly, yearly
login GOLD PRICE, RATE
login HOROSCOPE
login DICTIONARIES, LISTS
login SCIENCE EDUCATION RELIGION
login FINANCE, BUSINESS
login WORLD COUNTRIES, WIKI

HTML code examples, samples, tutorial

Previous articlePage bottom  ALL TOPICS

Create Javascript drop down menu - HTML SSS Javascript example

 You can make dropdown menu in few minutes. Function show() on <li> element is important.

HTML javascript:

<div class = "menuItem"><div  class = "menuPadding" onmouseover='show();' >ABOUT</div></div>
  <ul id="menuDrop1" style="display:none" onmouseout="hide()">
    <li onmouseover='show();' >
          <a href = "call-for-1"><img src = "_files/meniu_bullet.png" />&nbsp;&nbsp;Programming comitee</a>
    </li>
    <li onmouseover='show();' >
          <a href = "call-for-2"><img src = "_files/meniu_bullet.png" />&nbsp;&nbsp;Scientific comitee</a>
    </li>  
    <li onmouseover='show();' >
          <a href = "call-for-2"><img src = "_files/meniu_bullet.png" />&nbsp;&nbsp;Call for papers</a>
    </li>
  </ul>

<script type="text/javascript">

 function show(){
   document.getElementById("menuDrop1").style.display="block";
 }

 function hide(){
   document.getElementById("menuDrop1").style.display="none";
 }
 
</script>
 

CSS:

#menuDrop1{
    position:absolute;
    z-index: 10;
    width: 238px;
    background-color: #605f62;
    margin-top: 2px;
    margin-left: 0px;
    padding-left: 0px;
}

#menuDrop1 li{
    height: 32px;
    text-shadow: 1px 1px #656467;
    color: white;
    background-color: #605f62;
    border-bottom: 1px solid #575759;
    border-top: 1px solid #717174;
    text-align: left;
    /* overflow: hidden; */
    /* float: left; */
    display: block;
    padding-top: 17px;
    padding-left: 0px;
    margin-left: 0px;
    font-size: 12px;
}


#menuDrop1 li:hover{
    background-color: #464646;
}

#menuDrop1 a:link, #menuDrop1 a:visited {
    color: #FFFFFF !important;
}

#menuDrop1 a:hover{
    color: #EEEEDD !important; 
}
 
 
Previous articlePage top  ALL TOPICS


Guest:
Hi

z-index better to make 9999


2013-06-07 11:13:21
Guest:
Hi

code
<div class = "menuItem"><div  class = "menuPadding" onmouseover='show();' >ABOUT</div></div>
you can change as you want. The CSS classes too.


2013-06-07 11:13:21

 Use username: Guest, Anonymous, Programmer






QUOTES:
It was sort of bittersweet in the end. I wanted to get the record. I can't say I'm not happy; I'm just bummed.
Ray Toomey
Ordinary riches can be stolen, real riches cannot. In your soul are infinitely precious things that cannot be taken from you.
Oscar Wilde
The successful people of this world take life as it comes. They just go out and deal with the world as it is.
Ben Stein