Hi,
I have designed a menu and associated css sheet in a regular HTML page.
The behavior works as designed in my browser.
When I port the definiitions to CMSListmenu webpart then the 2nd level items are shifted right ???
I have used the html envelope - Content before/after - in the webpart to assign my class .Hor as
<div class="Hor">
<div style="padding-left: 20px;padding-top:8px;">

no other specifications in the webpart.

Any tips? thanks, -Eric

Here is my HTML:
<div class="Hor">
<div style="padding-left: 20px;padding-top:8px;">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Svcs .0</a></li>
<li style="z-index: 10"><a href="#">Svcs .1</a></li>
<li><a href="#">Svcs .2</a></li>
<li><a href="#">Svcs .3</a></li>
<li><a href="#">Svcs .4</a></li>
</ul>
</li>
<li><a href="#">Gallery</a>
<ul>
<li><a href="#">Gallery 0</a></li>
<li><a href="#">Gallery 1</a></li>
<li><a href="#">Gallery 2</a>
<ul>
<li><a href="#">Gallery 2.1</a></li>
<li><a href="#">Gallery 2.2</a></li>
<li><a href="#">Gallery 2.3</a></li>
<li><a href="#">Gallery 2.4</a></li>
<li><a href="#">Gallery 2.5</a></li>
</ul>
</li>
<li><a href="#">Gallery 3</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
======================================================

Here is the associated CSS:

.Hor {
background: url('~/App_Themes/Test/ImagesCMS/menubar.gif') repeat-x center;
height: 50px;
}
div.Hor ul {
list-style-type: none;
font-size: 9pt;
color: white;
margin: 0px;
padding: 0px;
}
div.Hor li {
width: 135px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
line-height: 30px;
}
div.Hor a {
background: url('~/App_Themes/Test/ImagesCMS/Menuatas1.gif') no-repeat center;
text-decoration: none;
display: block;
width: 135px;
}
div.Hor ul li li a {
}
div.Hor ul ul ul > li {
margin-left: 3px;
}
div.Hor ul li:hover > a {
background-image: url('~/App_Themes/Test/ImagesCMS/menuatas_shadow.gif');
}
div.Hor ul li:hover a:hover {
background-image: url('~/App_Themes/Test/ImagesCMS/menuatas_shadow.gif');
}
div.Hor ul ul {
display: none;
}
div.Hor ul ul ul {
top: 0px;
display: none;
position: absolute;
left: 135px;
z-index: 10;
}
div.Hor ul li:hover > ul {
display: block;
position: absolute;
z-index: 10;
}
div.Hor ul ul li:hover ul {
display: block;
}