טוב, אני כבר מלא זמן עובד על זה, ועוד לא הצלחתי.
אני מנסה לשלב 2 תפריטי-ניווט ביחד, כדי לקבל בסוף את התפריט ה'מושלם' מבחינתי.
מה שיש לי עכשיו הוא התפריט באתר הזה:
http://roniblabla.googlepages.com/index.html
ואני רוצה לשלב לו תפריט בסגנון שנמצא באתר הזה:
http://www.stunicholls.com/menu/tree_frog_vertical.html (התפריט האדום, בצד שמאל)

כך שכאשר מישהו ילחץ על תפריט ראשי, יפתח לו תת-תפריט, וכאשר הוא 'ירחף' מעליו - יפתח עוד תת-תפריט.
בינתיים אני עובד על חלק ה-'מסלולים' כאשר מישהו ילחץ עליו יפתח איזור (צפון, מרכז, דרום) ומשם - מסלולים לכל איזור.

קוד ה CSS שיש לי עד עכשיו (מה שבשימוש באתר הראשון שהבאתי):

קוד:

 #avmenu {

 
float: right;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}
#avmenu ul { 
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0px;
font-size: 1.1em;
text-align: right;
} 
#avmenu li {
margin-bottom: 4px;
}
#avmenu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 10px 0 0;
background: #f4f4f4;
border-left: 4px solid #aaaaaa;
} 
 
#avmenu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}
#submenu {
display: none;
}
#submenu ul { 
list-style: none;
width: 100px;
float: left;
font-size: 0.9em;
margin: 4px 50px 0px 0;
} 
#submenu li a { 
height: 15px;
padding: 5px 10px 5px 0;
} 

כשהתפריט נפתח ע"י JS קטן-

קוד:

<script language="javascript">

function showHideTable(menuId){
	var obj=document.getElementById(menuId)
	obj.style.display=(obj.style.display=="block"?"none":"block")
}
</script>

הקוד באתר ההוא (Frog):

קוד:

#menu {list-style-type:none; padding:0; margin:0; width:125px; position:absolute; top:70px; left:0; border:1px solid #fff; border-width:0 1px 1px; z-index:100;}

 
#menu ul {list-style-type:none; padding:0; margin:0; width:125px;}
#menu li {float:left; background:#657; position:relative; border-top:1px solid #fff;}
#menu li.sub {background:#d30;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-decoration:none; cursor:pointer; font-weight:bold; text-indent:5px;}
 
#menu ul,
#menu li.click ul ul,
#menu li.click ul li.hover ul ul {display:none;}
#menu li.hover {color:#ff0; z-index:500;}
#menu li.click {color:#ff0;}
#menu li.click ul {display:block;}
#menu li.click ul li.hover ul, 
#menu li.click ul li.hover ul li.hover ul {display:block; position:absolute; left:110px; top:-1px; border:1px solid #fff; border-width:0 1px 1px;}
#menu li.click ul li.fly {background: #657 url(frog_arrow.gif) no-repeat top right;}
#menu li.click ul li.hover {background:#98a;}
#menu li.click ul li.hover ul li {background:#c60;}
#menu li.click ul li.hover ul li.hover ul li {background:#780; z-index:500;}
#menu li.click ul li.hover ul li.fly {background: #c60 url(frog_arrow.gif) no-repeat top right;}
#menu li.click ul li.hover ul li.hover {z-index:500; background:#fa4;}
#menu li.click ul li.hover ul li.hover a {color:#000;}
#menu li.click ul li.hover ul li.hover ul li.hover {background:#aa0;}
#menu li.click ul li.hover ul li.hover ul li.hover a {color:#fff;}

כשגם שם משתמשים בJS לצורך הצגה/הסתרה של התפריטים.

יש בכלל אפשרות לשלב בין השניים? באמת שעבדתי על זה הרבה זמן, ואני אשמח לכל עזרה שתוגש לי..
.

http://www.fresh.co.il/vBulletin/sh...ad.php?t=407453

אני מציע שאת ה"התנהגות" של התפריט תבצע בעזרת JS בלבד, ולא בעזרת CSS (כפי שעשית עם hover לאלמנטים)

http://www.fresh.co.il/vBulletin/sh...ad.php?t=408256

אכן ההתנהגות בתפריט מתבצעת בעזרת JS בלבד. ה.hover הוא רק מחלקה, ולא התנהגות (אני מדבר על הקוד של Frog, שזה הקוד שאני שואף לשלב באתר)

איזה מעצבן, ממש לא הולך. בינתיים, הכי רחוק שהגעתי הוא:
http://cheetah64d.brinkster.net/wip/
אתם יכולים לראות לבד ששומדבר שם לא עובד...

אה, ד.א. קוד הHTML מורכב כולו רק מ Li Ul, כמובן.
או במילים אחרות:

קוד:

 <ul id="menu"> 

<li><a href="#">ברוכים הבאים!</a></li>
<li class="sub"><a href="#">מסלולים</a>
<ul>
<li class="fly"><a href="#">אזור הצפון</a></li>
<li class="fly"><a href="#">אזור המרכז</a></li>
<li class="fly"><a href="#">אזור הדרום</a></li>
</ul>
</li>
<li class="hover"><a href="#">קצת על עצמי</a></li>
<li><a href="#">קישורים</a></li>
<li><a href="#">אודות</a></li>
<li><a href="#">מעצב האתר</a></li>
</ul>

זה כדי לחסוך לכם 'הצג מקור'...