Drop down menu

Gunix · 11 Σεπτεμβρίου 2014

Καλημερα σας. Θέλω την βοήθεια σας παρακαλώ.

Επείδη δεν πάρα πολύ καλός στην html, css, js θέλω να φτιάξω ένα drop down menu. Έχω κάνει κάτι στο html, css αλλά δεν ξέρω πως να κάνω js Drop down menu. Αν μπορούμε να βρούμε ένα free να το ενσωματόσουμε.

Μπορώ να έχω την βοήθεια σας παρακαλώ.

HTML

<!DOCTYPE html>

<html>
    
    <head>
        
        
        <meta charset="utf-8">
        <title>test</title>
        
        
        <!-- Cascading Style Sheets-->
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        
        
    </head>
    
    <body>
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">test1</a>
                <ul>
                    <li><a href="#">test2</a></li>
                    <li><a href="#">test2_1</a></li>
                    <li><a href="#">test2_2</a></li>
                </ul>
            </li>
            <li><a href="#">test3</a></li>
            <li><a href="#">test4</a></li>
            <li>
                <a href="#">tests5</a>
                <ul>
                    <li><a href="#">test5</a>
                        <ul>
                            <li>
                                <a href="esfL01/L01Start.htm">test5_1</a>
                            </li>
                            <li>
                                <a href="esfL02/L02Start.htm">test5_2</a>
                            </li>
                            <li>
                                <a href="esfL03/L03Start.htm">test5_3</a>
                            </li>
                            <li>
                                <a href="esfL04/L04Start.htm">test5_4</a>
                            </li>
                            <li>
                                <a href="esfL05/L05Start.htm">test5_5</a>
                            </li>                            
                        </ul>
                    </li>
        </ul>
    </body>
</html>

CSS

#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu {
    width: 960px;
    margin: 60px auto;
    border: 1px solid #222;
    background-color: #111;
    background-image: linear-gradient(#444, #111);
    border-radius: 6px;
    box-shadow: 0 1px 1px #777;
}

#menu:before,
#menu:after {
    content: "";
    display: table;
}

#menu:after {
    clear: both;
}

#menu {
    zoom:1;
}

#menu li {
    float: left;
    border-right: 1px solid #222;
    box-shadow: 1px 0 0 #444;
    position: relative;
}

#menu a {
    float: left;
    padding: 12px 30px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
    color: #fafafa;
}

*html #menu li a:hover { /* IE6 only */
    color: #fafafa;
}

#menu ul {
    margin: 20px 0 0 0;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 1;    
    background: #444;   
    background: linear-gradient(#444, #111);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);  
    border-radius: 3px;

}