Add another menu with submenu

[andi-dev]

the html code.

<ul id="level-one">
<li>First</li>
<li>Second 
    <ul id="level-two">
        <li><a href="#">sub-Second</a></li>
    </ul>
</li>
<li>Third
    <ul id="level-three">
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
    </ul>
</li>
<li>Fourth
    <ul id="level-four">
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
    </ul>
</li>
<li>Fifth</li>
</ul>

the css code.
ul#level-one{
    width: 83.2%;/*gjatesia e Menuse kryesore*/
    height: 36px;
    position: relative;
    list-style: none;
    line-height: 36px;
    background: #f0f0f0 url("images/menu-back.png") repeat-x bottom left;/* for non-css3 browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#f0f0f0)); /* for firefox 3.6+ */
    visibility: visible;
    z-index: 2;
    left: 10px;
    background-color: -moz-linear-gradient(;
    background-image: url(imazhe%20shtese/menu-li-blue.png);
    background-position: top;
}
ul#level-one li{
    width:80px;/*hapesira midis linkeve te menuse*/
    float: left;
    font-weight: bold;
    font-family: Arial;
    padding-left: 12px;
}
ul#level-one li:hover{
    background:#FFA500;/*Menuja ndryshon ne portokalli kur mausi kalon siper*/
}
ul#level-two{
    list-style: none;
    background: #FFA500 url(images/menu-grad.png) repeat-x bottom left;
    display: none;
    position: absolute;
    top: 36px;
    padding: 0;
    width: 200px;
    height: 30px;
    border: 0px solid red;
    background-color: -moz-linear-gradient(;
    background-position: top;
}
ul#level-three{
list-style: none;
    background: #FFA500 url(images/menu-grad.png) repeat-x bottom left;
    display: none;
    position: absolute;
    top: 36px;
    padding: 0;
    width: 200px;
    height: 120px;
    border: 0px solid red;
    background-color: -moz-linear-gradient(;
    background-position: top;               
}
ul#level-four{
    list-style: none;
    background: #FFA500 url(images/menu-grad.png) repeat-x bottom left;
    display: none;
    position: absolute;
    top: 36px;
    padding: 0;
    width: 200px;
    height: 120px;
    border: 0px solid red;
    background-color: -moz-linear-gradient(;
    background-position: top;
}

ul#level-five{
    list-style: none;
    background: #FFA500 url(images/menu-grad.png) repeat-x bottom left;
    display: none;
    position: absolute;
    top: 36px;
    padding: 0;
    width: 200px;
    height: 120px;
    border: 0px solid red;
    background-color: -moz-linear-gradient(;
    background-position: top;
}

ul#level-six{
    list-style: none;
    background: #FFA500 url(images/menu-grad.png) repeat-x bottom left;
    display: none;
    position: absolute;
    top: 36px;
    padding: 0;
    width: 200px;
    height: 120px;
    border: 0px solid red;
    background-color: -moz-linear-gradient(;
    background-position: top;
}




ul#level-two li,ul#level-three li,ul#level-four li{
    width:196px;
    padding-left:4px ;
    line-height: 30px;
}
ul#level-two li:hover{
    background:#f0f0f0 url(images/menu-li.png) repeat-x bottom left;/* for non-css3 browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c0c0c0)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #fff,  #c0c0c0); /* for firefox 3.6+ */ 

}
ul#level-one li:hover > ul#level-two,ul#level-one li:hover > ul#level-three,ul#level-one li:hover > ul#level-four {
    display: block;
}
a{
    width:200px;
    text-align: center;
    text-decoration: none;
    color:#000000;
}
ul#level-two li:hover{
    background-image: url(imazhe%20shtese/menu-li.png); 
}
ul#level-three li:hover{
    background-image: url(imazhe%20shtese/menu-li.png); 
}
ul#level-four li:hover{
    background-image: url(imazhe%20shtese/menu-li.png); 
}

[andi-dev]

i have create five menu with some submenu and now i cant add another menu with submenu how i can fix this.

[andi-dev]

For example i wont to add submenu in the fifth menu,and if it possible how i can add a sixth menu with submenu

[andi-dev]

is someone here

[IIM]

<html>
<head>
<style type="text/css">
ul#level-one{
    width: 83.2%;/*gjatesia e Menuse kryesore*/
    height: 36px;
    position: relative;
    list-style: none;
    line-height: 36px;
    background: #f0f0f0 url("images/menu-back.png") repeat-x bottom left;/* for non-css3 browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#f0f0f0)); /* for firefox 3.6+ */
    visibility: visible;
    z-index: 2;
    left: 10px;
    background-color: -moz-linear-gradient(;
    background-image: url(imazhe%20shtese/menu-li-blue.png);
    background-position: top;
}
ul#level-one li{
    width:80px;/*hapesira midis linkeve te menuse*/
    float: left;
    font-weight: bold;
    font-family: Arial;
    padding-left: 12px;
}
ul#level-one li:hover{
    background:#FFA500;/*Menuja ndryshon ne portokalli kur mausi kalon siper*/
}
ul.submenu_me1{
    list-style: none;
    background: #FFA500 url(images/menu-grad.png) repeat-x bottom left;
    display: none;
    position: absolute;
    top: 36px;
    padding: 0;
    width: 200px;
    height: 30px;
    border: 0px solid red;
    background-color: -moz-linear-gradient(;
    background-position: top;
}
ul.submenu_me{
list-style: none;
    background: #FFA500 url(images/menu-grad.png) repeat-x bottom left;
    display: none;
    position: absolute;
    top: 36px;
    padding: 0;
    width: 200px;
    height: 120px;
    border: 0px solid red;
    background-color: -moz-linear-gradient(;
    background-position: top;               
}
ul#level-two li,ul#level-three li,ul#level-four li,ul#level-five li,ul#level-sixth li{
    width:196px;
    padding-left:4px ;
    line-height: 30px;
}
ul#level-two li:hover{
    background:#f0f0f0 url(images/menu-li.png) repeat-x bottom left;/* for non-css3 browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c0c0c0)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #fff,  #c0c0c0); /* for firefox 3.6+ */ 
}
ul#level-one li:hover > ul#level-two,ul#level-one li:hover > ul#level-three,ul#level-one li:hover > ul#level-four,ul#level-one li:hover > ul#level-five,ul#level-one li:hover > ul#level-sixth {
    display: block;
}
a{
    width:200px;
    text-align: center;
    text-decoration: none;
    color:#000000;
}
ul.submenu_me li:hover,submenu_me1 li:hover{
    background-image: url(imazhe%20shtese/menu-li.png); 
}

</style>
</head>
<body>
<ul id="level-one" >
<li>First</li>
<li>Second 
    <ul id="level-two" class="submenu_me1">
        <li><a href="#">sub-Second</a></li>
    </ul>
</li>
<li>Third
    <ul id="level-three" class="submenu_me">
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
    </ul>
</li>
<li>Fourth
    <ul id="level-four" class="submenu_me">
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
    </ul>
</li>
<li>Fifth<ul id="level-five" class="submenu_me">
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
    </ul></li>
    <li>Sixth<ul id="level-sixth" class="submenu_me">
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
        <li><a href="#">sub-Second</a></li>
    </ul></li>
</ul>
</body>
</html>

What do you mean??I am able to create sixth menu with submenu.Check the example above.
Also why are you dublicating css.If two id's have same css property,give them a class and apply css on that class.

[andi-dev]

so thnx