Menus

<style type="text/css">
<!--
ul.MenuBarHorizontal{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
width: auto;
}
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
width: auto;
}
ul.MenuBarActive
{
z-index: 1000;
}
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 150px;
float: left;
}
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 150px;
position: absolute;
left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
ul.MenuBarHorizontal ul li
{
width: 150px;
}
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
ul.MenuBarHorizontal a
{background-color: #6633FF;
border-top: 1px solid #FFFFFF;
color: #FFFFFF;
border-right: 1px solid #0000CC;
border-bottom: 1px solid #0000CC;
border-left: 1px solid #FFFFFF;
font-size: 120%;
text-decoration: none;
padding-top: 5px;
padding-bottom: 4px;
width: 150px;
display: block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{background-color: #FFCC99;background-image: url(http://img16.imageshack.us/img16/122/overc.gif);
color: #000000;letter-spacing: normal;word-spacing: normal;border-top: 1px solid #FFFF00;
border-right: 1px solid #CC0000;
border-bottom: 1px solid #CC0000;
border-left: 1px solid #FFFF00;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #66CCFF;
}
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
float: left;
background: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(http://img6.imageshack.us/img6/9470/sprymenubardownhover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(http://img6.imageshack.us/img6/5549/sprymenubarright.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(http://img6.imageshack.us/img6/9470/sprymenubardownhover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(http://img6.imageshack.us/img6/5549/sprymenubarright.gif);
background-repeat: no-repeat;
background-position: 95% 50%;}
-->
</style>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="link do Item 1.1">Item 1.1</a></li>
<li><a href="link do Item 1.2">Item 1.2</a></li>
<li><a href="link do Item 1.3">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a href="link do Item 3.1">Item 3.1</a> </li>
<li><a href="link do Item 3.2">Item 3.2</a></li>
<li><a href="link do Item 3.3">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<p>
<script src="http://acessoriosparablogs.com.br/scripts/submenu.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"http://img6.imageshack.us/img6/5549/sprymenubarright.gif", imgRight:"http://img6.imageshack.us/img6/9470/sprymenubardownhover.gif"});
//-->
</script>