Mysidia Adoptables Support Forum - Editing the HTML side of the CSS?

Well I found this on Google sometime ago (and what I do when I find an epic code is save it xD).

Most sites say you have to use Javascript but this one only uses CSS and HTML xD

So....

Code:

<html> 

<head> 

<title>CSS based drop-down menu</title>        

        <style type="text/css"> 

ul {

        font-family: Arial, Verdana;

        font-size: 14px;

        margin: 0;

        padding: 0;

        list-style: none;

        }

ul li {

        display: block;

        position: relative;

        float: left;

        }

li ul {

        display: none;

        }

ul li a {

        display: block;

        text-decoration: none;

        color: #ffffff;

        border-top: 1px solid #ffffff;

        padding: 5px 15px 5px 15px;

        background: #2C5463;

        margin-left: 1px;

        white-space: nowrap;

        }

ul li a:hover {

        background: #617F8A;

        }

li:hover ul { 

        display: block; 

        position: absolute;

        }

li:hover li { 

        float: none;

        font-size: 11px;

        }

li:hover a {

        background: #617F8A;

        }

li:hover li a:hover {

        background: #95A9B1;

        }

        </style>                

</head> 

<body> 

        <ul id="menu"> 

                        <li><a href="">Home</a></li> 

                        <li><a href="">About</a> 

                        <ul> 

                        <li><a href="">The Team</a></li> 

                        <li><a href="">History</a></li> 

                        <li><a href="">Vision</a></li> 

                        </ul> 

                        </li> 

                        <li><a href="">Products</a>

                        <ul> 

                        <li><a href="">Cozy Couch</a></li> 

                        <li><a href="">Great Table</a></li> 

                        <li><a href="">Small Chair</a></li> 

                        <li><a href="">Shiny Shelf</a></li> 

                        <li><a href="">Invisible Nothing</a></li> 

                        </ul> 

                        </li> 

                        <li><a href="">Contact</a> 

                        <ul> 

                        <li><a href="">Online</a></li> 

                        <li><a href="">Right Here</a></li> 

                        <li><a href="">Somewhere Else</a></li> 

                        </ul> 

                        </li> 

                        </ul>

</body> 

</html>

And yes, you will need to be able to edit the HTML because let's compare the different HTML menus:
The drop down menu:

Code:

        <ul id="menu"> 

                        <li><a href="">Home</a></li> 

                        <li><a href="">About</a> 

                        <ul> 

                        <li><a href="">The Team</a></li> 

                        <li><a href="">History</a></li> 

                        <li><a href="">Vision</a></li> 

                        </ul> 

                        </li> 

                        <li><a href="">Products</a>

                        <ul> 

                        <li><a href="">Cozy Couch</a></li> 

                        <li><a href="">Great Table</a></li> 

                        <li><a href="">Small Chair</a></li> 

                        <li><a href="">Shiny Shelf</a></li> 

                        <li><a href="">Invisible Nothing</a></li> 

                        </ul> 

                        </li> 

                        <li><a href="">Contact</a> 

                        <ul> 

                        <li><a href="">Online</a></li> 

                        <li><a href="">Right Here</a></li> 

                        <li><a href="">Somewhere Else</a></li> 

                        </ul> 

                        </li> 

                        </ul>

The MA menu:

Code:

<ul>

        <li><a href='index.php'>Home</a></li>

        <li><a href='adopt.php'>Adopt</a></li>

        <li><a href='myadopts.php'>My Adopts</a></li>

        <li><a href='account.php'>My Account</a></li>

        <li><a href='messages.php'>Message Center</a></li>

        <li><a href='stats.php'>Top 10</a></li>

        <li><a href='shoutbox.php'>Shoutbox</a></li>

</ul>

^See that you only have 1 pair of <ul> tags?

So you can't use it for PokeHikke if that's what you were thinking of... but you can use it for a Mys site xD