css vertical menu problem

[dalum]

Hi i cant get my menu to work properly on my site http://xfv.dk/index.php/nyhedsarkiv.html '
it works fine if i make a "manual" html file and use it there but when i use it un typolight it wont behave the same way.

.mod_sitemap .select :hover .select_sub,
.mod_sitemap .current .show
{
width:100%;
top:35; <---------------------- position of sub menu top
left:0;
position:absolute;
display:block;
padding:0;
text-align:center;
background: url(tl_files/images/back.gif);
z-index: 100;
}

outside typolight i can ajust where the submenu will be displayed, 35 pix down as my menu it 35 pix high so the submenu will be displayed underneath the top layer of the menu.
But when i but my .css file in typolight the sub menu displays on top of the main layer no mather what i write in "top"

any help will be much appreciated.

[dalum]

My menu is of course horizontal not vertical

and here is the full code
my template

<div class="table">

<ul class="select">
	[*]Sample[/list]

<ul class="select">
	[*]Sample Menu
	<div class="select_sub">
	<ul class="sub">

		[*]Sample Menu
		[*]Sample Menu
		[*]Sample Menu
		[*]Sample Menu
		[*]Sample Menu
	[/list]

	</div>
	[/list]

<ul class="select">
	[*]Sample Menu
	<div class="select_sub">
	<ul class="sub">
		[*]Sample Menu 2

		[*]Sample Menu 2
		[*]Sample Menu 2
		[*]Sample Menu 2
		[*]Sample Menu 2
	[/list]
	</div>
	
[/list]


<ul class="select">
	[*]Sample Menu
	<div class="select_sub">
	<ul class="sub">
		[*]Sample Menu 3
		[*]Sample Menu 3

		[*]Sample Menu 3
		[*]Sample Menu 3
		[*]Sample Menu 3
	[/list]
	</div>
	[/list]

<ul class="select">
	[*]Sample Menu
	<div class="select_sub">
	<ul class="sub">
		[*]Sample Menu 4
		[*]Sample Menu 4
		[*]Sample Menu 4

		[*]Sample Menu 4
		[*]Sample Menu 4
	[/list]
	</div>
	[/list]

</div>

my .css

.mod_navigation {
	height: 35px;
	background: url(images/bg.gif) repeat-x;
	position: relative;
	font-family: arial, verdana, sans-serif;
	font-size: 11px;
	width: 100%;
	z-index: 100;
	margin: 0;
	padding: 0;
}

.mod_navigation .table {
	display: table;
	margin: 0 auto;
}

.mod_navigation .select,.mod_navigation .current {
	margin: 0;
	padding: 0;
	list-style: none;
	display: table-cell;
	white-space: nowrap;
}

.mod_navigation li {
	margin: 0;
	padding: 0;
	height: auto;
	float: left;
}

.mod_navigation .select a {
	display: block;
	height: 35px;
	float: left;
	font-weight: bold;
	background: url(images/bg.gif);
	padding: 0 30px 0 30px;
	text-decoration: none;
	line-height: 35px;
	white-space: nowrap;
	color: #2b3238;
}

.mod_navigation .select a:hover,.mod_navigation .select li:hover a {
	background: url(images/hover.gif);
	padding: 0 0 0 15px;
	cursor: pointer;
	color: #2b3238;
}

.mod_navigation .select a b {
	font-weight: bold;
}

.mod_navigation .select a:hover b,.mod_navigation .select li:hover a b {
	display: block;
	float: left;
	padding: 0 30px 0 15px;
	background: url(images/hover.gif) right top;
	cursor: pointer;
}

.mod_navigation .select_sub {
	display: none;
}

/* IE6 only */
.mod_navigation table {
	border-collapse: collapse;
	margin: -1px;
	font-size: 1em;
	width: 0;
	height: 0;
}

.mod_navigation .sub {
	display: table;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.mod_navigation .sub_active .current_sub a,.mod_navigation .sub_active a:hover
	{
	background: transparent;
	color: #2b3238;
}

.mod_navigation .select :hover .select_sub,.mod_navigation .current .show
	{
	display: block;
	position: absolute;
	width: 100%;
	top: 35px;
	background: url(images/back.gif);
	padding: 0;
	z-index: 100;
	left: 0;
	text-align: center;
}

.mod_navigation .current .show {
	z-index: 10;
}

.mod_navigation .select :hover .sub li a,.mod_navigation .current .show .sub li a
	{
	display: block;
	float: left;
	background: transparent;
	padding: 0 10px 0 10px;
	margin: 0;
	white-space: nowrap;
	border: 0;
	color: #2b3238;
}

.mod_navigation .current .sub li.sub_show a {
	color: #2b3238;
	cursor: default;
}

.mod_navigation .select .sub li a {
	font-weight: normal;
}

.mod_navigation .select :hover .sub li a:hover,.mod_navigation .current .sub li a:hover
	{
	visibility: visible;
	color: #73a0d2;
}

[Akhmet]

If I have correctly understood that that you have written, it is possible to make here so
http://dev.typolight.org/wiki/typolight ... ishEnglish

.mod_sitemap li ul {
top:36px; /* second level begins 1 pixel under the first one */
position:absolute; /* position is set absolute to the parent element */
display:block; /* set visible for testing and debugging purposes, will later be set to none*/
left:35px;
}

The item "left" can be other then 35px; It's for an example

[dalum]

I found my problem. it seems that typolight requires "px" so
top:35px instead of just top:35 solved the problem

[Akhmet]

Yes, px is necessary.
My variant works too, I have checked it with firebug.
But, as speak programmers - If it works, better nothing to change