wolf84
03-10-2007, 01:54 PM
hello there...
can someone tell me what's wrong with the this code, i can get the drop down working but i can't get the sub-menu under it's main menu...
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>Untitled Document</title>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#underlinemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
margin-bottom: 1em;
float: right;
font-weight: bold;
width: 100%;
border: 1px solid #DFDFDF;
border-width: 1px 0;
position:relative;
}
* html #underlinemenu ul{ /*IE only rule. Delete extra margin-bottom*/
margin-bottom: 0;
}
/*Top level list items*/
#underlinemenu ul li{
display: inline;
}
/*Top level menu link items style*/
#underlinemenu ul li a{
float: right;
color: gray;
font-weight: bold;
padding: 2px 6px 4px 6px;
text-decoration: none;
/*background: white url(media/menudivide.gif) top right repeat-y;*/
display: block;
}
/*1st sub level menu*/
#underlinemenu ul li ul{
left:0px;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
#underlinemenu ul li ul li{
display: list-item;
float: none;
display:block;
position:relative;
}
/*All subsequent sub menu levels offset after 1st level sub menu */
#underlinemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: 0;
}
/* Sub level menu links style */
#underlinemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}
#underlinemenu ul li a:hover{
color: black;
background-color: #F3F3F3;
border-bottom: 4px solid black;
padding-bottom: 0;
}
/*Background image for top level menu list links */
#underlinemenu .mainfoldericon{
background: url(media/arrow-down.gif) no-repeat center right;
}
/*Background image for subsequent level menu list links */
#underlinemenu .subfoldericon{
background: url(media/arrow-right.gif) no-repeat center right;
}
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: right; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
* html .suckertreemenu ul li ul li { float: right;}
/* End */
</style>
<script type="text/javascript">
//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
</script>
</head>
<body>
<div id="underlinemenu">
<ul id="treemenu1">
<li><a href="http://www.dynamicdrive.com" title="Home">الصفحة الرئيسية</a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS Library">نبذة عنا</a></li>
<ul>
<li> تعال وقابل قيادتنا </li>
<li> تعال وقابل أناسنا </li>
<li> تعال وتعرف على طائراتنا</li>
</ul>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New">تعريف برحلاتنا الميسرة</a></li>
<ul>
<li> نحن لا نستخدم التذاكر </li>
<li> كيف نقرر أسعارنا</li>
<li> كيف تحجز وتدفع </li>
<li> جداول الرحلات </li>
<li> وجهات السفر </li>
<li> متطلبات السفر </li>
</ul>
<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised">ابقى على اتصال بنا</a></li>
<ul>
<li> إرشادات السفر </li>
<li> الأسئلة الشائعة </li>
</ul>
<li><a href="http://tools.dynamicdrive.com" title="Tools">وكلات السفر</a></li>
<ul>
<li> page 1</li>
<li> page 2</li>
</ul>
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">احجز</a></li>
</ul>
</div>
</body>
</html>
the page is rtl, and the menu is on the write, it's for an arabic site...
thank you
can someone tell me what's wrong with the this code, i can get the drop down working but i can't get the sub-menu under it's main menu...
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>Untitled Document</title>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#underlinemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
margin-bottom: 1em;
float: right;
font-weight: bold;
width: 100%;
border: 1px solid #DFDFDF;
border-width: 1px 0;
position:relative;
}
* html #underlinemenu ul{ /*IE only rule. Delete extra margin-bottom*/
margin-bottom: 0;
}
/*Top level list items*/
#underlinemenu ul li{
display: inline;
}
/*Top level menu link items style*/
#underlinemenu ul li a{
float: right;
color: gray;
font-weight: bold;
padding: 2px 6px 4px 6px;
text-decoration: none;
/*background: white url(media/menudivide.gif) top right repeat-y;*/
display: block;
}
/*1st sub level menu*/
#underlinemenu ul li ul{
left:0px;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
#underlinemenu ul li ul li{
display: list-item;
float: none;
display:block;
position:relative;
}
/*All subsequent sub menu levels offset after 1st level sub menu */
#underlinemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: 0;
}
/* Sub level menu links style */
#underlinemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}
#underlinemenu ul li a:hover{
color: black;
background-color: #F3F3F3;
border-bottom: 4px solid black;
padding-bottom: 0;
}
/*Background image for top level menu list links */
#underlinemenu .mainfoldericon{
background: url(media/arrow-down.gif) no-repeat center right;
}
/*Background image for subsequent level menu list links */
#underlinemenu .subfoldericon{
background: url(media/arrow-right.gif) no-repeat center right;
}
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: right; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
* html .suckertreemenu ul li ul li { float: right;}
/* End */
</style>
<script type="text/javascript">
//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
</script>
</head>
<body>
<div id="underlinemenu">
<ul id="treemenu1">
<li><a href="http://www.dynamicdrive.com" title="Home">الصفحة الرئيسية</a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS Library">نبذة عنا</a></li>
<ul>
<li> تعال وقابل قيادتنا </li>
<li> تعال وقابل أناسنا </li>
<li> تعال وتعرف على طائراتنا</li>
</ul>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New">تعريف برحلاتنا الميسرة</a></li>
<ul>
<li> نحن لا نستخدم التذاكر </li>
<li> كيف نقرر أسعارنا</li>
<li> كيف تحجز وتدفع </li>
<li> جداول الرحلات </li>
<li> وجهات السفر </li>
<li> متطلبات السفر </li>
</ul>
<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised">ابقى على اتصال بنا</a></li>
<ul>
<li> إرشادات السفر </li>
<li> الأسئلة الشائعة </li>
</ul>
<li><a href="http://tools.dynamicdrive.com" title="Tools">وكلات السفر</a></li>
<ul>
<li> page 1</li>
<li> page 2</li>
</ul>
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">احجز</a></li>
</ul>
</div>
</body>
</html>
the page is rtl, and the menu is on the write, it's for an arabic site...
thank you