how to create submenu

[eluser]tashigiri[/eluser]
hello all..
i got stuck with this..
i want to make horizontal submenu, when mainMenu mouseover so submenu will show..
when mouseOut so subMenu will hidden..
ive try this but always wrong in IE6..
any idea for this to be compatible for all browser, especially mozilla, IE7 and IE6??

the sructure to be like this :
-Main Menu 1 -Main Menu 2 -Main Menu 3
•SubMenu1.1 •SubMenu3.1
•SubMenu1.2 •SubMenu3.2

My coding like this

Code:

<ul>
    <li>&lt;?php echo anchor('company','home','');?&gt;
        <ul>
            <li>&lt;?php echo anchor('company','Status&uuml;bersicht','');?&gt;</li>
            <li>&lt;?php echo anchor('company','Benutzermanagement','');?&gt;</li>
            <li>&lt;?php echo anchor('company','Firmenprofil bearbeiten','');?&gt;</li>
            <li>&lt;?php echo anchor('company','Rechnungen','');?&gt;</li>
        </ul>
    </li>
    <li>&lt;?php echo anchor('company','Postfach','');?&gt;</li>
    <li>&lt;?php echo anchor('company','Credits','');?&gt;</li>
    <li>&lt;?php echo anchor('company','Anzeigen','');?&gt;</li>
    <li>&lt;?php echo anchor('company','Lebenslaufdatenbank','');?&gt;</li>
    <li>&lt;?php echo anchor('company','Personalmanagement','');?&gt;
        <ul>
            <li>&lt;?php echo anchor('company','Bewerbungen','');?&gt;</li>
            <li>&lt;?php echo anchor('company','Profilanfragen','');?&gt;</li>
            <li>&lt;?php echo anchor('company','Eingeladene Personen','');?&gt;</li>
        </ul>
    </li>

Thanks for your attention and your help..^^

[eluser]pistolPete[/eluser]
How about one of those:

- http://www.cssplay.co.uk/menus/final_drop.html
- http://www.cssplay.co.uk/menus/dd_valid.html
- http://www.tjkdesign.com/articles/keyboa...efault.asp

Btw: You don't need to specify the third argument of anchor() if it's empty.

[eluser]tashigiri[/eluser]
ok will try this..
thanks for help..

[eluser]tashigiri[/eluser]
Hello all..
here is my code, in mozilla it work well, but in IE6, submenu not show when i hover main menu..
something wrong with my code..
thanks for your help..

Code:

<style type="text/css">
#menu, #menu ul {
    list-style:none;

    
    /*padding:0;
    margin:0;*/
}
#menu li {
    float:left;
    position:relative;
    /*line-height: 4.5em;
    width: 10em;*/
}

#menu li ul {
    position:absolute;
    /*margin-top:-1em;
    margin-left:.5em;*/
    display:none;
    margin-top:-11px;
    margin-left:-20px;
}
#menu ul li ul {
    /*margin-top:-3em;
    margin-left:7em;*/
    margin-left:-100px;

}

#menu a {
    display:block;
    /*border-right:1px solid #fff;*/
    /*background:#E0F574;*/
    color:#3B3B3B;
    text-decoration:none;
    /*padding:0 10px;*/
    
}
#menu a:hover {
    background-color:#5798B4;
    color:#fff;
}
#menu ul {
    /*border-top:1px solid #fff;*/
    padding-top:9px;
    position:absolute;
}
#menu ul a {
    border-bottom:1px solid #fff;
    background:url(../images/bg_gray.gif) left repeat-x;
    width:150px;
    padding-left:11px;
    margin-bottom:-3px;
    
    /*background:#AEC245;*/
}

/* SHOW SUBMENU 1 */
#menu li:hover ul, #menu li.over ul {
    display:block;
}
#menu li:hover ul ul, #menu li.over ul ul {
    display:none;
}
/* SHOW SUBMENU 2 */
#menu ul li:hover ul, #menu ul li.over ul {
    display:block;
}

</style>
[removed]
<!--[if IE]>
<style type="text/css">
    #menu li {
        position:static;
    }
</style>
<![endif]--&gt;
[removed]
<ul id="menu">
    <li>&lt;?php echo anchor('company','&Uuml;bersicht','');?&gt;
        <ul>
            <li>&lt;?php echo anchor('company','Status&uuml;bersicht','');?&gt;</li>
            <li>&lt;?php echo anchor('company','Benutzermanagement','');?&gt;</li>
            <li>&lt;?php echo anchor('company','Firmenprofil bearbeiten','');?&gt;</li>
            <li>&lt;?php echo anchor('company','Rechnungen','');?&gt;</li>
        </ul>
    </li>
    <li>&lt;?php echo anchor('company','Postfach','');?&gt;</li>
    <li>&lt;?php echo anchor('company','Credits','');?&gt;</li>
    <li>&lt;?php echo anchor('company','Anzeigen','');?&gt;</li>
    <li>&lt;?php echo anchor('company','Lebenslaufdatenbank','');?&gt;</li>
    <li>&lt;?php echo anchor('company','Personalmanagement','');?&gt;
        <ul>
            <li>&lt;?php echo anchor('company','Bewerbungen','');?&gt;</li>
            <li>&lt;?php echo anchor('company','Profilanfragen','');?&gt;</li>
            <li>&lt;?php echo anchor('company','Eingeladene Personen','');?&gt;</li>
        </ul>
    </li>
    
</ul>

[eluser]umefarooq[/eluser]
hi
you are just making static menu or database driven menu, what ever try this menu it will work on every browser very small css and easy to modify according to your style

http://onehackoranother.com/projects/jquery/droppy/

[eluser]tashigiri[/eluser]
thanks i will check this..^^

[eluser]tashigiri[/eluser]
Thanks for all..
case solved..
i've try in mozila and IE, its work well :lol:
my code to be like this :

Code:

<style type="text/css">
#navbar {
/*    margin: 0;
    padding: 0;*/
    height: 1em; }
#navbar li {
    list-style: none;
    float: left; }
#navbar li a {
    display: block;
    /*padding: 3px 8px;*/
    /*background-color: #5e8ce9;*/
    color: #fff;
    text-decoration: none; }
#navbar li ul {
    display: none;
    width: 10em; /* Width to help Opera out */
    background:url(../images/bg_gray.gif) left repeat-x; /*this help to avoid mouseout in IE*/
    
    }
#navbar li ul a {
width:150px;
background:url(../images/bg_gray.gif) left repeat-x;
color:#FFFFFF;
padding-left:10px;
margin-bottom:-17px !important;
margin-bottom:-3px;

}
#navbar li:hover ul, #navbar li.hover ul{
    display: block;
    position: absolute;
    margin-left:-10px;
    margin-top:-18px !important;
    margin-top:-2px;/*For IE*/
    padding-bottom:-100px;
    border-bottom: 1px solid #fff;
    }
#navbar li:hover li, #navbar li.hover li {
    float: none; }
#navbar li:hover li a, #navbar li.hover li a {
    /*background:url(../images/bg_gray.gif) left repeat-x;*/
    border-bottom: 1px solid #fff;
    }
#navbar li li a:hover {
    background-color: #8db3ff; }

</style>
[removed]
[removed]
sfHover = function() {
    var sfEls = document.getElementById("navbar").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].o nmouseover=function() {
            this.className+=" hover";
        }
        sfEls[i].o nmouseout=function() {
            this.className=this.className.replace(new RegExp(" hover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
[removed]
<ul id="navbar">
    <li>&lt;?php echo anchor('company','&Uuml;bersicht','');?&gt;
        <ul>
            <li>&lt;?php echo anchor('company','Status&uuml;bersicht','');?&gt;</li>
            <li>&lt;?php echo anchor('company','Benutzermanagement','');?&gt;</li>
            <li>&lt;?php echo anchor('company','Firmenprofil bearbeiten','');?&gt;</li>
            <li>&lt;?php echo anchor('company','Rechnungen','');?&gt;</li>
        </ul>
    </li>
    <li>&lt;?php echo anchor('company','Postfach','');?&gt;</li>
    <li>&lt;?php echo anchor('company','Credits','');?&gt;</li>
    <li>&lt;?php echo anchor('company','Anzeigen','');?&gt;</li>
    <li>&lt;?php echo anchor('company','Lebenslaufdatenbank','');?&gt;</li>
    <li>&lt;?php echo anchor('company','Personalmanagement','');?&gt;
        <ul>
            <li>&lt;?php echo anchor('company','Bewerbungen','');?&gt;</li>
            <li>&lt;?php echo anchor('company','Profilanfragen','');?&gt;</li>
            <li>&lt;?php echo anchor('company','Eingeladene Personen','');?&gt;</li>
        </ul>
    </li>
</ul>

note : i give some space @code "o nmouseover" and " o nmouseout", because the script not shown when i post so i give some space..^^