Log in

View Full Version : please Help


bhaniel
06-23-2011, 10:47 AM
I Have A drop down Menu that i inseret into a table.
in each cul there is a drop down menu.
the problem is that's the above drop down when hovering the second menu disapper him.
here's a picture that show's the situtation.
problem.jpg: http://www.imageupload.org/thumb/thumb_69366.jpg (http://www.imageupload.org/?d=31F2B9EF1)

code:


.preload1 {background: url(six_0a.gif);}
.preload2 {background: url(six_1a.gif);}


#nav {
position:relative;
float:cener;
padding:0; margin:0; list-style:none; height:38px; background:#fff url(six_0.gif) repeat-x; position:relative; z-index:200; font-family:"Times New Roman", Times, serif; direction:rtl}
#nav li.top {display:block; float:right;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(six_0.gif);}
#nav li a.top_link_double {display:block; float:left; height:35px; line-height:19px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(six_0.gif);}


#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0a.gif) no-repeat right top;}
#nav li a.top_link_double span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0.gif) right top no-repeat;}
#nav li a.top_link_double span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0a.gif) no-repeat right top;}

/*down menu*/
#nav li a.top_link_down {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:13px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(six_0.gif); width:200px; text-align:center;}

#nav li a.top_link_down span {float:right; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0.gif) right top no-repeat; width:180px;}
#nav li a.top_link_down span.down {float:right; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0a.gif) no-repeat right top; width:180;}
#nav li a.top_link_down span {float:right; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0.gif) right top no-repeat; width:180;}
#nav li a.top_link_down span.down {float:right; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0a.gif) no-repeat right top; width:180px;}


#nav li:hover a.top_link_down,
#nav a.top_link:_downhover
{color:#fff; background: url(six_1.gif) no-repeat;}
#nav li:hover a.top_link span,
#nav a.top_link_down:hover span
{background:url(six_1.gif) no-repeat right top;}
#nav li:hover a.top_link_down span.down,
#nav a.top_link_down:hover span.down
{background:url(six_1a.gif) no-repeat right top; padding-bottom:3px;}
/*end down menu*/

#nav li:hover a.top_link,
#nav a.top_link:hover
{color:#fff; background: url(six_1.gif) no-repeat;}
#nav li:hover a.top_link span,
#nav a.top_link:hover span
{background:url(six_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down
{background:url(six_1a.gif) no-repeat right top; padding-bottom:3px;}

#nav li:hover a.top_link_double,
#nav a.top_link_double:hover
{color:#fff; background: url(six_1.gif) no-repeat;}
#nav li:hover a.top_link_double span,
#nav a.top_link_double:hover span
{background:url(six_1.gif) no-repeat right top;}
#nav li:hover a.top_link_double span.down,
#nav a.top_link_double:hover span.down
{background:url(six_1a.gif) no-repeat right top; padding-bottom:3px;}

#nav table {border-collapse:collapse; padding:0; margin:0; position:absolute; right:0; top:0;}

#nav li:hover {position:relative; z-index:200;}
#nav a:hover {position:relative; white-space:normal; z-index:200;}

#nav :hover ul.sub
{right:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav :hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav :hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
{background:#50b5d0 url(arrow.gif) 4px no-repeat;}
#nav :hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav :hover ul.sub li a.fly:hover
{background:#3f96a9 url(arrow_over.gif) 4px no-repeat; color:#fff;}

#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{right:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul,
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover > ul
{right:89px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav li:hover > ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover > a.fly
{background:#3f96a9 url(arrow_over.gif) 4px no-repeat; color:#fff; border-color:#fff;}
#nav li:hover li:hover > li a.fly
{background:#50b5d0 url(arrow.gif) 4px no-repeat; color:#000; border-color:#50b5d0;}




please please help i have to fix it today.
Beverleyh
06-23-2011, 11:49 AM
I can't see all of the code you posted due to being on a blackberry so my only suggestion would be to increase the z-index of the upper menu so its a higher z-index than the menu below.

For more specific help you should post the link to the page so somebody on a computer can assist you further.
Beverleyh
06-23-2011, 11:51 AM
I can't see all of the code you posted due to being on a blackberry so my only suggestion would be to increase the z-index of the upper menu so its a higher z-index than the menu below.

For more specific help you should post the link to the page so somebody on a computer can assist you further.
deathbycheese
06-24-2011, 07:13 PM
I don't know if this is the problem, but I notice on approx line 28 or so your colon is in the wrong place:
#nav a.top_link:_downhover

dbc
bhaniel
06-26-2011, 05:28 PM
the suggestions doesn't work.
again i am working on a table.
each menu is in adiffrent column.


<table border ="0" align="right">
<tr>
<td>
<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
<li class="top"><a href="#" target="_top" id="products" class="top_link"><span class="down">טפסים</span></a>
<ul class="sub">
<li><a href="#">ניהול פרויקט</a></li>
<li> <a href="#">ייזום</a></li>
<li> <a href="#">התארגנות לפרויקט</a></li>
<li> <a href="#">בקרת פרויקט</a></li>
<li><a href="#">תכנון והנדסה</a></li>
<li> <a href="#">רכש והתקשרויות</a></li>
<li> <a href="#" class="fly">הקמה</a>
<ul>
<li><a href="#">ניהול הקמה</a></li>
<li><a href="#">הנדסה אזרחית</a></li>
<li><a href="#">תשתיות</a></li>
<li><a href="#">מבנה פלדה</a></li>
<li><a href="#">מכונות</a></li>
<li><a href="#">צנרת</a></li>
</ul>
</li>
<li> <a href="#">ניהול מחסן</a></li>
<li><a href="#">סגירת פרויקט</a></li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">ניהול סיכונים</span></a>
<ul class="sub">
<li><a href="#">ניהול פרויקט</a></li>
<li> <a href="#">ייזום</a></li>
<li> <a href="#">התארגנות לפרויקט</a></li>
<li> <a href="#">בקרת פרויקט</a></li>
<li><a href="#">תכנון והנדסה</a></li>
<li> <a href="#">רכש והתקשרויות</a></li>
<li> <a href="#">הקמה</a></li>
<li> <a href="#">ניהול מחסן</a></li>
<li><a href="#">סגירת פרויקט</a></li>
</ul>
</li>
<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a>
<ul class="sub">
<li><a href="#nogo28">Support</a></li>
<li><a href="#nogo29" class="fly">Sales</a>
<ul>
<li><a href="#nogo30">USA</a></li>
<li><a href="#nogo31">Canadian</a></li>
<li><a href="#nogo32">South American</a></li>
<li><a href="#nogo33" class="fly">European</a>
<ul>
<li><a href="#nogo34" class="fly">British</a>
<ul>
<li><a href="#nogo35">London</a></li>
<li><a href="#nogo36">Liverpool</a></li>
<li><a href="#nogo37">Glasgow</a></li>
<li><a href="#nogo38" class="fly">Bristol</a>
<ul>
<li><a href="#nogo39">Redland</a></li>
<li><a href="#nogo40">Hanham</a></li>
<li><a href="#nogo41">Eastville</a></li>
</ul>
</li>
<li><a href="#nogo42">Cardiff</a></li>
<li><a href="#nogo43">Belfast</a></li>
</ul>
</li>
<li><a href="#nogo44">French</a></li>
<li><a href="#nogo45">German</a></li>
<li><a href="#nogo46">Spanish</a></li>
</ul>
</li>
<li><a href="#nogo47">Australian</a></li>
<li><a href="#nogo48">Asian</a></li>
</ul>
</li>
<li><a href="#nogo49">Buying</a></li>
<li><a href="#nogo50">Photographers</a></li>
<li><a href="#nogo51">Stockist</a></li>
<li><a href="#nogo52">General</a></li>
</ul>
</li>
<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>
<ul class="sub">
<li><a href="#nogo54">Online</a></li>
<li><a href="#nogo55">Catalogue</a></li>
<li><a href="#nogo56">Mail Order</a></li>
</ul>
</li>
<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
</td>
</tr>
<tr>
<td>
<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a>
<ul class="sub">
<li><a href="#nogo28">Support</a></li>
<li><a href="#nogo29" class="fly">Sales</a>
<ul>
<li><a href="#nogo30">USA</a></li>
<li><a href="#nogo31">Canadian</a></li>
<li><a href="#nogo32">South American</a></li>
<li><a href="#nogo33" class="fly">European</a>
<ul>
<li><a href="#nogo34" class="fly">British</a>
<ul>
<li><a href="#nogo35">London</a></li>
<li><a href="#nogo36">Liverpool</a></li>
<li><a href="#nogo37">Glasgow</a></li>
<li><a href="#nogo38" class="fly">Bristol</a>
<ul>
<li><a href="#nogo39">Redland</a></li>
<li><a href="#nogo40">Hanham</a></li>
<li><a href="#nogo41">Eastville</a></li>
</ul>
</li>
<li><a href="#nogo42">Cardiff</a></li>
<li><a href="#nogo43">Belfast</a></li>
</ul>
</li>
<li><a href="#nogo44">French</a></li>
<li><a href="#nogo45">German</a></li>
<li><a href="#nogo46">Spanish</a></li>
</ul>
</li>
<li><a href="#nogo47">Australian</a></li>
<li><a href="#nogo48">Asian</a></li>
</ul>
</li>
<li><a href="#nogo49">Buying</a></li>
<li><a href="#nogo50">Photographers</a></li>
<li><a href="#nogo51">Stockist</a></li>
<li><a href="#nogo52">General</a></li>
</ul>
</li>
<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>
<ul class="sub">
<li><a href="#nogo54">Online</a></li>
<li><a href="#nogo55">Catalogue</a></li>
<li><a href="#nogo56">Mail Order</a></li>
</ul>
</li>
<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
</td>
</tr>
Beverleyh
06-26-2011, 06:26 PM
How are you targetting the upper menu to apply a z-index value? BOTH your menus have an id of "nav" which you shouldn't have (you also have 2 "contacts" ids)
ids need to be unique - only classes can occur multiple times. If you're applying the z-index to the nav id, of course it won't work as the menu below directly overrides it.

Posting chains of code is getting confusing so if you need more help, please post a link to the page in question and we'll make further suggestions based on that.
bhaniel
06-27-2011, 01:28 PM
thank's alot i will try this.
and if have more questions will post here again.