Expanding Java Menu 1
HTML for Expanding Java Menu 1
<ul id="menu"> <li>Menu Item 1 <ol> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> </ol> </li> <li>Menu Item 2 <ol> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Sub Item 2.2</a></li> <li><a href="#">Sub Item 2.3</a></li> </ol> </li> <li>Menu Item 3 <ol> <li><a href="#">Sub Item 3.1</a></li> <li><a href="#">Sub Item 3.2</a></li> <li><a href="#">Sub Item 3.3</a></li> </ol> </li> <li>Menu Item 4 <ol> <li><a href="#">Sub Item 4.1</a></li> <li><a href="#">Sub Item 4.2</a></li> <li><a href="#">Sub Item 4.3</a></li> </ol> </li> <li>Menu Item 5 <ol> <li><a href="#">Sub Item 5.1</a></li> <li><a href="#">Sub Item 5.2</a></li> <li><a href="#">Sub Item 5.3</a></li> </ol> </li> </ul>
CSS for Expanding Java Menu 1
ul#menu { width: 150px; list-style-type: none; border-top: solid 0px #b9a894; margin: 0; padding: 10px; } ul#menu ol { display: none; text-align: right; list-style-type: none; margin: 0; padding: 5px; } ul#menu li, ul#menu a{ font-family: verdana, sans-serif; font-size: 11px; color: #000; font-weight: bold; } ul#menu li { border-bottom: solid 0px #808080; line-height: 15px; } ul#menu ol li { border-bottom: none; } ul#menu ol li a { color: blue; font-weight: normal; } ul#menu ol li:before { content: "- "; } ul#menu a { text-decoration: none; outline: none; } ul#menu a:hover { color: #539dbc; } ul#menu a.active { color: #be5028; }
Java Script for Expanding Java Menu 1
Click Here and save to the directory of your new design.