logo 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.