blggerstep: Menu vertical et le sub-submenu style rond regarder la démo

Démo
HTML CODE
CSS CODE

Item 3
Item 1
- Item 1 3
  - Item 1 3 0
    - Item 1 3 0 0
- Item 1 0
- Item 1 1
Item 2
- Item 2 0
- Item 2 1

<ul id="css3menu12" class="topmenu">
    <li class="topfirst"><a style="WIDTH: 133px" href="#"><img style="WIDTH: 50px; HEIGHT: 32px" alt="Home" src=
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsoektrkOZ6YdmYhyphenhyphenvidDvrhrgvq9sdYZuH9Gms4Di-_GLVIknj2d9tySLD0vhyphenhyphen4aHFcMmPSrKkRhRWFr_8fT3ZUiTgdF7KU1lJh9beshRxywQv3FjqYmS70AbysCwL-rLPhvzekLxD7X3/s1600/home.png" width="38" height="32"></a></li>

<li>
      <a style="WIDTH: 133px" title="Item 3" href="#"><span>Item 3</span></a>

<ul>
        <li><a title="Item 3 0" href="#">Item 3 0</a></li>

<li><a title="Item 3 1" href="#">Item 3 1</a></li>

<li><a title="Item 3 2" href="#">Item 3 2</a></li>
      </ul>
    </li>

<li>
      <a style="WIDTH: 133px" title="Item 1" href="#"><span>Item 1</span></a>

<ul>
        <li>
          <a title="Item 1 3" href="#"><span>Item 1 3</span></a>

<ul>
            <li>
              <a title="Item 1 3 0" href="#"><span>Item 1 3 0</span></a>

<ul>
                <li><a title="Item 1 3 0 0" href="#">Item 1 3 0 0</a></li>
              </ul>
            </li>
          </ul>
        </li>

<li>
          <a title="Item 1 0" href="#"><span>Item 1 0</span></a>

<ul>
            <li><a title="Item 1 0 0" href="#">Item 1 0 0</a></li>

<li><a title="Item 1 0 1" href="#">Item 1 0 1</a></li>

<li><a title="Item 1 0 2" href="#">Item 1 0 2</a></li>
          </ul>
        </li>

<li><a title="Item 1 1" href="#">Item 1 1</a></li>
      </ul>
    </li>

<li class="toplast">
      <a style="WIDTH: 133px" title="Item 2" href="#"><span>Item 2</span></a>

<ul>
        <li><a title="Item 2 0" href="#">Item 2 0</a></li>

<li><a title="Item 2 1" href="#">Item 2 1</a></li>
      </ul>
    </li>
</ul>

<style type="text/css">
UL#css3menu12 {
 border-bottom: #5f5f5f solid 0px; 
 border-left: #5f5f5f solid 0px;PADDING-BOTTOM: 0px; 
 BACKGROUND-COLOR: #dedede; LIST-STYLE-TYPE: none; MARGIN: 0px; 
 PADDING-LEFT: 0px; PADDING-RIGHT: 0px; border-top: #5f5f5f solid 0px; 
 border-right: #5f5f5f 0px solid;PADDING-TOP: 0px; 
 -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px
}
UL#css3menu12 UL {
 BORDER-BOTTOM: #5f5f5f 0px solid; BORDER-LEFT: #5f5f5f 0px solid; PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #dedede; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; border-top: #5f5f5f solid 0px;BORDER-RIGHT: #5f5f5f 1px solid; PADDING-TOP: 0px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px
}
UL#css3menu12 UL {
 POSITION: absolute; BORDER-BOTTOM-COLOR: #fff; PADDING-BOTTOM: 10px; BORDER-RIGHT-WIDTH: 2px; BACKGROUND-COLOR: #ffffff; BORDER-TOP-COLOR: #fff; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; DISPLAY: none; BORDER-TOP-WIDTH: 2px; BORDER-BOTTOM-WIDTH: 2px; BORDER-RIGHT-COLOR: #fff; BORDER-LEFT-COLOR: #fff; BORDER-LEFT-WIDTH: 2px; PADDING-TOP: 0px; TOP: 0px; LEFT: 100%; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; -moz-box-shadow: 3.5px 3.5px 5px #000000; -webkit-box-shadow: 3.5px 3.5px 5px #000000; box-shadow: 3.5px 3.5px 5px #000000
}
UL#css3menu12 LI:hover > * {
 DISPLAY: block
}
UL#css3menu12 LI:hover {
 POSITION: relative
}
UL#css3menu12 UL UL {
 POSITION: absolute; TOP: 0px; LEFT: 100%
}
UL#css3menu12 {
 DISPLAY: block; FLOAT: left; FONT-SIZE: 0px
}
UL#css3menu12 LI {
 DISPLAY: block; WHITE-SPACE: nowrap; FONT-SIZE: 0px
}
UL#css3menu12 > LI {
 MARGIN: 0px
}
UL#css3menu12 LI {
 MARGIN: 0px
}
UL#css3menu12 A:active {
 OUTLINE-STYLE: none
}
UL#css3menu12 A:focus {
 OUTLINE-STYLE: none
}
UL#css3menu12 A {
 TEXT-ALIGN: center; DISPLAY: block; FONT: bold italic 18px Georgia; COLOR: #000000; VERTICAL-ALIGN: middle; CURSOR: pointer; TEXT-DECORATION: underline; text-shadow: #FFF 0 0 1px
}
UL#css3menu12 A.pressed {
 TEXT-ALIGN: center; DISPLAY: block; FONT: bold italic 18px Georgia; COLOR: #000000; VERTICAL-ALIGN: middle; CURSOR: pointer; TEXT-DECORATION: underline; text-shadow: #FFF 0 0 1px
}
UL#css3menu12 UL LI {
 MARGIN: 10px 0px 0px; FLOAT: none
}
UL#css3menu12 UL A {
 BACKGROUND-IMAGE: none; TEXT-ALIGN: center; PADDING-BOTTOM: 4px; BORDER-RIGHT-WIDTH: 0px; BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 4px; PADDING-RIGHT: 4px; FONT: bold italic 19px Tahoma; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; COLOR: #000000; BORDER-LEFT-WIDTH: 0px; TEXT-DECORATION: none; PADDING-TOP: 4px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; text-shadow: #FFF 0 0 0
}
UL#css3menu12 LI:hover > A {
 BACKGROUND-IMAGE: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvftatuPhkgqaCunFJHoQMMItJQ7lKKd8oGXxlEHznWV95cKqzR8tp5KC0MpQHuXj6NJ344xh4KQ3rr3vy7ChI5usv6IwDdfhccdBlwplq_PkUJ6gzT5nINOMQ7Vw7Us5AzbO8kMp3iIe4/s1600/mainbk.png); BORDER-BOTTOM-STYLE: solid; BORDER-BOTTOM-COLOR: #c0c0c0; BACKGROUND-COLOR: #ffaa00; BORDER-TOP-COLOR: #c0c0c0; BORDER-LEFT-STYLE: solid; FONT: bold italic 18px Georgia; BACKGROUND-POSITION: 0px 100px; BORDER-TOP-STYLE: solid; COLOR: #000000; BORDER-RIGHT-COLOR: #c0c0c0; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-COLOR: #c0c0c0; TEXT-DECORATION: underline; text-shadow: #FFF 0 0 1px
}
UL#css3menu12 IMG {
 BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; VERTICAL-ALIGN: middle; MARGIN-RIGHT: 10px
}
UL#css3menu12 IMG.over {
 DISPLAY: none
}
UL#css3menu12 LI:hover > A IMG.def {
 DISPLAY: none
}
UL#css3menu12 LI:hover > A IMG.over {
 DISPLAY: inline
}
UL#css3menu12 LI A.pressed IMG.over {
 DISPLAY: inline
}
UL#css3menu12 LI A.pressed IMG.def {
 DISPLAY: none
}
UL#css3menu12 SPAN {
 PADDING-RIGHT: 0px; DISPLAY: block; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: right center; OVERFLOW: visible
}
UL#css3menu12 UL SPAN {
 BACKGROUND-IMAGE: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXf8BW4QRohef9CmeJXzuYRWUmZzZffDRlRu3AwRACpFT8xCoBqKtbJWBfkNLFEfU82GPfIin2LXzOSGGmPA-hviOawlTrakvsNPE06qRSKkVbFLaKY2e9pP7Q4pfZJ2B3qTdBIOjagnnc/s1600/256-6.png); PADDING-RIGHT: 24px
}
UL#css3menu12 A {
 BACKGROUND-IMAGE: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvftatuPhkgqaCunFJHoQMMItJQ7lKKd8oGXxlEHznWV95cKqzR8tp5KC0MpQHuXj6NJ344xh4KQ3rr3vy7ChI5usv6IwDdfhccdBlwplq_PkUJ6gzT5nINOMQ7Vw7Us5AzbO8kMp3iIe4/s1600/mainbk.png); BORDER-BOTTOM: #c0c0c0 0px solid; BORDER-LEFT: #c0c0c0 0px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND-REPEAT: repeat; BACKGROUND-POSITION: 0px 0px; COLOR: #000000; BORDER-TOP: #c0c0c0 1px solid; BORDER-RIGHT: #c0c0c0 0px solid; TEXT-DECORATION: underline; PADDING-TOP: 10px; text-shadow: #FFF 0 0 1px
}
UL#css3menu12 LI:hover > A {
 BACKGROUND-IMAGE: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvftatuPhkgqaCunFJHoQMMItJQ7lKKd8oGXxlEHznWV95cKqzR8tp5KC0MpQHuXj6NJ344xh4KQ3rr3vy7ChI5usv6IwDdfhccdBlwplq_PkUJ6gzT5nINOMQ7Vw7Us5AzbO8kMp3iIe4/s1600/mainbk.png); BORDER-BOTTOM-STYLE: solid; BORDER-BOTTOM-COLOR: #c0c0c0; BACKGROUND-COLOR: #ffaa00; BORDER-TOP-COLOR: #c0c0c0; BORDER-LEFT-STYLE: solid; BACKGROUND-POSITION: 0px 100px; BORDER-TOP-STYLE: solid; COLOR: #000000; BORDER-RIGHT-COLOR: #c0c0c0; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-COLOR: #c0c0c0; TEXT-DECORATION: underline; text-shadow: #FFF 0 0 1px
}
UL#css3menu12 LI > A.pressed {
 BACKGROUND-IMAGE: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvftatuPhkgqaCunFJHoQMMItJQ7lKKd8oGXxlEHznWV95cKqzR8tp5KC0MpQHuXj6NJ344xh4KQ3rr3vy7ChI5usv6IwDdfhccdBlwplq_PkUJ6gzT5nINOMQ7Vw7Us5AzbO8kMp3iIe4/s1600/mainbk.png); BORDER-BOTTOM-STYLE: solid; BORDER-BOTTOM-COLOR: #c0c0c0; BACKGROUND-COLOR: #ffaa00; BORDER-TOP-COLOR: #c0c0c0; BORDER-LEFT-STYLE: solid; BACKGROUND-POSITION: 0px 100px; BORDER-TOP-STYLE: solid; COLOR: #000000; BORDER-RIGHT-COLOR: #c0c0c0; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-COLOR: #c0c0c0; TEXT-DECORATION: underline; text-shadow: #FFF 0 0 1px
}
UL#css3menu12 UL LI:hover > A {
 BACKGROUND-IMAGE: none; BACKGROUND-COLOR: #ffaa00; FONT: bold italic 19px Tahoma; COLOR: #000000; TEXT-DECORATION: underline; text-shadow: #FFF 0 0 0
}
UL#css3menu12 UL LI > A.pressed {
 BACKGROUND-IMAGE: none; BACKGROUND-COLOR: #ffaa00; FONT: bold italic 19px Tahoma; COLOR: #000000; TEXT-DECORATION: underline; text-shadow: #FFF 0 0 0
}
UL#css3menu12 LI.topfirst > A {
 BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; -moz-border-radius: 50px 50px 0 0; -webkit-border-radius: 50px; border-radius: 50px 50px 0 0; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0
}
UL#css3menu12 LI.toplast > A {
 -moz-border-radius: 0 0 50px 50px; -webkit-border-radius: 0; border-radius: 0 0 50px 50px; -webkit-border-bottom-right-radius: 50px; -webkit-border-bottom-left-radius: 50px
}
</style>