Neofita CSS necessita di aiuto per modificare il seguente script per inserire un menù a cascata verticale nel [ .sidebar1 ], in rosso riporto le parti di codice da modificare.

grazie

segue listato:


<html>

<head>

<style type="text/css">


body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #4E5869;
margin: 0;
padding: 0;
color: #000;
}


ul, ol, dl {
padding: 0;
margin: 0;
}


h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}

a img {
border: none;
}


.container {
width: 80%;
max-width: 1260px;
min-width: 780px;
background: #FFF;
margin: 0 auto;
}


.header {
background: #6F7D94;
}
#nav ul {
list-style-type: none;
}


.sidebar1 {
float: left;
width: 20%;
background: #93A5C4;
padding-bottom: 10px;
}


.content {
padding: 10px 0;
width:50%;
float: left;
}
.sidebar2 {
float: left;
width: 30%;
background: #93A5C4;
padding: 10px 0;
}


.container .header div ul li {
}
.container .header div #menubar ul {
list-style-type: none;
}
.container .header div #menubar ul li {
float: right;
}
.container .header div #menubar ul li a {
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
color: #000;
padding-top: 10px;
padding-right: 50px;
padding-bottom: 10px;
padding-left: 50px;
}
.container .header div #menubar ul li a:hover {
color: #FFF;
text-decoration: none;
background-color: #4E5869;
}


.content ul, .content ol {
padding: 0 15px 15px 40px;
}

ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
background: #8090AB;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #4E5869;
color: #FFF;
}


.footer {
padding: 10px 0;
background: #6F7D94;
position: relative;
clear: both;
}

.container .sidebar2 div p strong a {
text-decoration: none;
color: #000;
}

.container .content div p strong a {
text-decoration: none;
color: #000;
}

</style>

</head>

<body>

<div class="container">

<div class="header">

<div id="menubar">
<ul>[/list]
</div>
</div>
</div>



<div class="sidebar1">
<ul class="nav">
<ul>[*]Link 1 >>
<ul>[*]Link 1-1[*]Link 1-2[/list]
[*]Link 2 >>
<ul>[*]Link 2-1[*]Link 2-2[*]Link 2-3[/list]
[*]Link 3[*]Link 4 >>
<ul>[*]Link 4-1[*]Link 4-2[*]Link 4-3[/list]
[/list][/list]
</div>


</body>
</html>

........