Design and CSS styles
Version 6.x > Design and CSS styles > CMSlistmenu (CSS) shifts my second level list item and ignores 2nd level css selector View modes: 
User avatar
Member
Member
evisser-vcontent - 6/3/2012 11:52:16 AM
   
CMSlistmenu (CSS) shifts my second level list item and ignores 2nd level css selector
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;
}

User avatar
Kentico Developer
Kentico Developer
kentico_ivanat - 6/4/2012 2:34:11 AM
   
RE:CMSlistmenu (CSS) shifts my second level list item and ignores 2nd level css selector
Hi,

have you tried to use Firebug or some other tool to check which css classes are applied on your menu?

In general he is a CSS stylesheet example which generates a vertical drop down menu. It may help.

CSS menu definition

In case your site is available online, could you please share the link?

Best regards,
Ivana Tomanickova

User avatar
Member
Member
ericv - 6/6/2012 10:42:15 AM
   
RE:CMSlistmenu (CSS) shifts my second level list item and ignores 2nd level css selector
Ivana,
sorry for the delay, I was out of town.
I merged the CSS from your link with my CSS and the problem is fixed Not sure which one of the statements did the trick but it is solved. Later I will try to understand what happened.
Thank you for your guidance.
-Eirc