Style do menu w JavaScript - wysuwające się w dół linki

Przykładowy wygląd pliku html z linkami

<html>
<head>
        <title>Dropdown menu Menu Test</title>
        <script src="/dbMenu.js" type="text/javascript">
        </script>
        <link href="/global.css" type="text/css" rel="stylesheet" media="screen">
        <link href="/dropDown.css" type="text/css" rel="stylesheet" media="screen">
</head>
<body>

        <ul id="menu" class="dbMenu onMouse">

        <li><a href="http://www.Twojastrona">Home</a></li>
               <li>News
            <ul>
        <li><a href="http://www.adreszakladki">link1</a></li>
        <li><a href="http://adreszakladki">link2</a></li>
        <li><a href="http://adreszakladki">link3</a></li>
            </ul>

               </li>

            <li>News2
            <ul>
                <li><a href="http://adreszakladki">link</a></li>
                <li><a href="http://adreszakladki">link</a></li>
                <li><a href="http://adreszakladki">link</a></li>
                <li><a href="http://adreszakladki">link</a></li>

            </ul>
            </li>
            <li><a href="http://adreszakladki">link</a></li>
            <li><a href="http://adreszakladki">link</a></li>

        </ul>

<p style="clear: left">Sub menus shown oMouseover due to precense of "onMouse" class inside main UL element.</p>

</body>
</html>

Plik style.css

#collapse, #collapse ul{
    width:10em;
    padding:0;
    margin:0;
    list-style-type:none;
}
#collapse ul{
    position:relative;
    top:0;
    left:0;
    display:none;
    background-color:#ffffff;
    width:9em;
    margin:0 auto;
}
#collapse li ul{
    margin:0 auto;
}
#collapse li{
    display:block;
    border:1px solid black;
}
#collapse li a{
    display:block;
    padding:2px;
    color:#000000;
    text-decoration:none;
}
#collapse li a:hover{
    color: #FFFAB5;
    background-color: #fa551a;
}
#collapse li ul.click{
    display:block;
}
#collapse li.click{
    background-color: #fa551a;
    padding-bottom:.2em;
}
#collapse ul a:hover{
    background-color:#fa7d50;
}
#collapse ul li.click{
    background-color:#fa7d50;
}
#collapse li a.subMenu, #collapse ul li a.subMenu {
   background-repeat: no-repeat;
   background-image: url('down.gif');
   background-position: bottom right;
}
#collapse a.click{
    background-image:none;
    color: #FFFAB5;
}
h1 {
    color: #4b12a9;
   border-bottom: 2px dotted #4b12a9;
}
#content {
    position: relative;
    top: 30px;
    margin: 1em 12em 1em 12em;
}
#downloads a {
    color: #000000;
}
#downloads a:hover {
    color: #4b12a9;
}
#downloads a:visited {
    text-decoration: line-through;
}
p:first-letter {
   margin-left: 15px;
}
p.drop:first-letter {
   margin-right: 5px;
   font: bold 3em times, serif;
   float: left;
}

 

Projekt © 2009 - INFOPROG 67920 odwiedzin