No replies
ilpet
Offline
newbie
Last seen: 11 years 42 weeks ago
Timezone: GMT+3
Joined: 2008-08-15
Posts: 1
Points: 0

Hey there! I'm pretty much a beginner with css and would like help with some code... probably easy stuff I can't figure out...

I've got a list based dropdown menu with which I've got the following issues:

1. how can I display the menu nested inside the cell on the left of the table cell (in mozilla 2 it has an indenting i wanna get rid of)

2. when i hover over the second level of menus, i still want the main menu button to be styled as if it was hovered on, not the original button (if you don't know what i mean: if i hover over the button it turns red and displays the submenu, if i hover over the submenu the main menu button turns back to it's original grey color)

3. i would like to display a white 1px horizontal border between the submenu elements...

I attached the html and css code to be of help for you:

html:

<td width="770">
   <ul id="m01">
      <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">1</a>
	 <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
		<a href="#">Magunkr&oacute;l</a>
		<a href="#">Tev&eacute;kenys&eacute;gek</a>
		<a href="#">Tev&eacute;kenys&eacute;gi besz&aacute;mol&oacute;k</a>
	 </div>
      </li>
   </ul>
   <ul id="m02">
      <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">2</a>
	 <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
		<a href="#">Magunkr&oacute;l</a>
		<a href="#">Tev&eacute;kenys&eacute;gek</a>
		<a href="#">Tev&eacute;kenys&eacute;gi besz&aacute;mol&oacute;k</a>
	 </div>
      </li>
   </ul>			
</td>

css (only for id=m01):

ul#m01 {
	margin: 0;
	padding: 0;
	z-index: 30
}
 
ul#m01 li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}
 
ul#m01 li a {
	display: block;
	width: 125px;
	height: 60px;
	background: url('img/M01.gif');
}
 
#m01 li a:hover{
	background: url('img/M01_over.gif');
}
 
ul#m01 div {
	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #FF6666;
	border: 1px solid #000000;
}
 
ul#m01 div a {
	position: relative;
	display: block;
	margin: 0;
	padding: 5px 5px 0 5px;
	width: 150px;	
	height: 20px;
	text-align: left;
	text-decoration: none;
	background: #990000;
	color: #FFFFFF;
	font-family: Verdana, Arial;
	font-size: 10px;
	font-weight: bold;
}
 
ul#m01 div a:hover {
	background: #FFFFFF;
	color: #000000;
}

That's all Tongue... Somebody please help me out, i don't think it's hard (if you have the proper css knowledge i don't have). Thnx!