...

View Full Version : Vetical menu,need help with alignment,spacing, z-index



abduraooft
05-21-2007, 05:54 PM
Hello friends,

I've been trying to alter the suckerfish vertical menu.

Please have a look at the progress

here (http://trials.casemumbai.com/trials/sucker_fish.htm)

All the images are of same width and the toggling images are opaque.
Here I've used the very top and bottom " li " tags for displaying a head and tail.

I want to display the submenu over the main menu a little bit slided over it.

My questions are
1) Why a small gap shown b/w the list when viewed through IE?
2) How can I show all the items in a particular submenu over the main menu on its mouse over?
3)How can I move all the link texts from left to some 10 or 15px right?

regards,
art

abduraooft
05-22-2007, 08:50 AM
My html part is


<div id="menu">
<ul id="nav">
<li id="menu_top"></li>

<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a>

</li>
<li><a href="#">Phtheirichthys</a></li>
<li><a href="#">Remora</a>
</ul>
</li>

<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a> </li>
<li><a href="#">Phtheirichthys</a></li>
<li><a href="#">Remora</a>
</ul>
</li>


<li id="menu_bottom" ></li>
</ul>
</div>

where as my currrent css is


#menu_top{
width:200px;
height:74px;
background:url(tabs/1.gif) #c4c4c4;
position:relative;
border:1px solid green;
}
#menu_bottom{
height:164px;
width:214px;
margin-top:0px;
position:relative;
padding:0px;
background:url(tabs/tail.gif) #c4c4c4;
border:1px solid green;
}
#nav {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
width: 214px;
padding-TOP: 0px;
/* border:1px solid blue; */
list-style-type: none ;
}
#nav ul {
padding: 0px;
margin: 0px;
width: 214px;
list-style-type: none;
}
#nav li {
margin: 0;
padding:0;
width: 214px;
position: relative;
}
#nav li ul {
margin-TOP: -26px;
left: -999em;
margin-left: 200px;
position: absolute
}
#nav li A {
border: black 1px solid;
DISPLAY: block;
padding: 0;
font-weight: bold;
width: 214px;
height:24px;
COLOR: black;
background:url(tabs/2.gif);
TEXT-DECORATION: none
}
#nav li A:hover {
COLOR: blue;
background:url(tabs/2_m.gif);

}

and some javascript is also there.

please help me!

koyama
05-22-2007, 09:02 PM
1) Why a small gap shown b/w the list when viewed through IE?
IE6 and IE7 have some real nasty display quirks only occuring for the li element. I'm not even sure that they have been fully understood.

As a start, try to use li {float: left}. I think that the rendering bug will disappear. As for your other issues, you'll need to add some :hover selection rules. See how it can be done: Suckerfish Dropdowns (http://alistapart.com/articles/dropdowns)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum