blggerstep: MENU DYNAMIC SIMPLE AVEC BORDER RADIUS ET SUB-SUBMENU

Démo
HTML CODE
CSS CODE

<ul id="MHZRAorange" class="topmenu">
    <li class="topfirst"><a style="LINE-HEIGHT: 20px; WIDTH: 92px; HEIGHT: 27px"  href="#"><img alt="" src=
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_RFhdSJQM-3-a3JuSSSHBY_ti1E1BrdXVIW2Xz5rDzr6ZKNe2lP7UPG_s7Ri29oHcgs4v3H_Vgtjt6-JJV9c0zXINCbvv1uZc6oW_YWXZj-z_6uo0tg9YGN3D4t77EphNmcIug6HXo7nh/s1600/orange-home-32.png" /> </a></li>

<li>
      <a style="LINE-HEIGHT: 27px; WIDTH: 92px; HEIGHT: 27px" title="page - 0" href="#"><span>page - 0</span></a>

<ul>
        <li>
          <a title="page - 0 0" href="#"><span>page - 0 0</span></a>

<ul>
            <li><a title="page - 0 0 0" href="#">page - 0 0 0</a></li>

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

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

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

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

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

<li>
          <a title="page - 0 3" href="#"><span>page - 0 3</span></a>

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

<li>
      <a style="LINE-HEIGHT: 27px; WIDTH: 92px; HEIGHT: 27px" title="page - 1" href="#"><span>page - 1</span></a>

<ul>
        <li>
          <a title="page - 1 0" href="#"><span>page - 1 0</span></a>

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

<li>
          <a title="page - 1 1" href="#"><span>page - 1 1</span></a>

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

<li>
          <a title="page - 1 2" href="#"><span>page - 1 2</span></a>

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

<li>
      <a style="LINE-HEIGHT: 27px; WIDTH: 85px; HEIGHT: 27px" title="page -2" href="#"><span>page -2</span></a>

<ul>
        <li>
          <a title="page -2 3" href="#"><span>page -2 3</span></a>

<ul>
            <li><a title="page -2 3 0" href="#">page -2 3 0</a></li>
          </ul>
        </li>

<li>
          <a title="page -2 0" href="#"><span>page -2 0</span></a>

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

<li>
          <a title="page -2 1" href="#"><span>page -2 1</span></a>

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

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

<li>
          <a title="page -2 2" href="#"><span>page -2 2</span></a>

<ul>
            <li>
              <a title="page -2 2 0" href="#"><span>page -2 2 0</span></a>

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

<li>
              <a title="page -2 2 1" href="#"><span>page -2 2 1</span></a>

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

<li>
      <a style="LINE-HEIGHT: 27px; WIDTH: 92px; HEIGHT: 27px" title="page - 3" href="#"><span>page - 3</span></a>

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

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

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

<li class="toplast">
      <a style="LINE-HEIGHT: 27px; WIDTH: 92px; HEIGHT: 27px" title="page - 4" href="#"><span>page - 4</span></a>

<ul>
        <li><a title="page - 4 0" href="#">page - 4 0</a></li>

<li><a title="page - 4 1" href="#">page - 4 1</a></li>

<li><a title="page - 4 2" href="#">page - 4 2</a></li>
      </ul>
    </li>
  </ul>

<style type="text/css">
/*<![CDATA[*/
UL#MHZRAorange {
 BORDER-BOTTOM: #5f5f5f 1px solid; BORDER-LEFT: #5f5f5f 1px solid; PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #dedede; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: #5f5f5f 1px solid; BORDER-RIGHT: #5f5f5f 1px solid; PADDING-TOP: 0px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px
}
UL#MHZRAorange UL {
 BORDER-BOTTOM: #5f5f5f 1px solid; BORDER-LEFT: #5f5f5f 1px solid; PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #dedede; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: #5f5f5f 1px solid; BORDER-RIGHT: #5f5f5f 1px solid; PADDING-TOP: 0px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px
}
UL#MHZRAorange UL {
 POSITION: absolute; BORDER-BOTTOM-COLOR: #d4d4d4; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #55aaff; BORDER-TOP-COLOR: #d4d4d4; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; DISPLAY: none; BORDER-RIGHT-COLOR: #d4d4d4; BORDER-LEFT-COLOR: #d4d4d4; PADDING-TOP: 0px; TOP: 100%; LEFT: 0px; -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; -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#MHZRAorange LI:hover > * {
 DISPLAY: block
}
UL#MHZRAorange LI:hover {
 POSITION: relative
}
UL#MHZRAorange UL UL {
 POSITION: absolute; TOP: 0px; LEFT: 100%
}
UL#css3menu1 {
 DISPLAY: block; FLOAT: left; FONT-SIZE: 0px
}
UL#MHZRAorange LI {
 DISPLAY: block; WHITE-SPACE: nowrap; FLOAT: left; FONT-SIZE: 0px
}
UL#MHZRAorange > LI {
 MARGIN: 0px
}
UL#MHZRAorange LI {
 MARGIN: 0px
}
UL#MHZRAorange A:active {
 OUTLINE-STYLE: none
}
UL#MHZRAorange A:focus {
 OUTLINE-STYLE: none
}
UL#MHZRAorange A {
 TEXT-ALIGN: center; DISPLAY: block; FONT: bold 22px Trebuchet MS; COLOR: #ffff00; VERTICAL-ALIGN: middle; CURSOR: pointer; TEXT-DECORATION: none; text-shadow: #FFF 0 0 1px
}
UL#MHZRAorange A.pressed {
 TEXT-ALIGN: center; DISPLAY: block; FONT: bold 22px Trebuchet MS; COLOR: #ffff00; VERTICAL-ALIGN: middle; CURSOR: pointer; TEXT-DECORATION: none; text-shadow: #FFF 0 0 1px
}
UL#MHZRAorange UL LI {
 MARGIN: 10px 0px 0px; FLOAT: none
}
UL#MHZRAorange UL A {
 BACKGROUND-IMAGE: none; TEXT-ALIGN: center; PADDING-BOTTOM: 4px; BORDER-RIGHT-WIDTH: 0px; BACKGROUND-COLOR: #55aaff; PADDING-LEFT: 4px; PADDING-RIGHT: 4px; FONT: bold 15px Verdana; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; COLOR: #ffff00; BORDER-LEFT-WIDTH: 0px; TEXT-DECORATION: none; PADDING-TOP: 4px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px
}
UL#MHZRAorange LI:hover > A {
 BACKGROUND-IMAGE: url(mainbk.png); BORDER-BOTTOM-STYLE: solid; BORDER-BOTTOM-COLOR: #c0c0c0; BACKGROUND-COLOR: #55aaff; BORDER-TOP-COLOR: #c0c0c0; BORDER-LEFT-STYLE: solid; FONT: bold 22px Trebuchet MS; BACKGROUND-POSITION: 0px 100px; BORDER-TOP-STYLE: solid; COLOR: #ffaa00; BORDER-RIGHT-COLOR: #c0c0c0; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-COLOR: #c0c0c0; TEXT-DECORATION: none; text-shadow: #FFF 0 0 1px
}
UL#MHZRAorange IMG {
 BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; VERTICAL-ALIGN: middle; MARGIN-RIGHT: 10px
}
UL#MHZRAorange IMG.over {
 DISPLAY: none
}
UL#MHZRAorange LI:hover > A IMG.def {
 DISPLAY: none
}
UL#MHZRAorange LI:hover > A IMG.over {
 DISPLAY: inline
}
UL#MHZRAorange LI A.pressed IMG.over {
 DISPLAY: inline
}
UL#MHZRAorange LI A.pressed IMG.def {
 DISPLAY: none
}
UL#MHZRAorange SPAN {
 PADDING-RIGHT: 0px; DISPLAY: block; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: right center; OVERFLOW: visible
}
UL#MHZRAorange UL SPAN {
 BACKGROUND-IMAGE: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6wWcLR-kb-JAiz20K3pQ5Ag9Fw42beXTiE3dAtekCFpSwWcVZ7bFmtkK06Y3bdlHKVIWJi8Kh6F_7qhGtnkXZWuZeq78-aElbG8HyMGVry13823uVx7Fkh2RXo86bfaLpuwcvatJn8Z9J/s1600/arrow.gif); PADDING-RIGHT: 28px
}
UL#MHZRAorange A {
 BACKGROUND-IMAGE: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Gdm8n187QwfWWxiCioVb_4-BTIAn80hmVq5qKqAgAlx1mZ5c0YhtuiFeA3FTb98upImIn1j2N8SnYIZiHXaGk8VcOKhcA2vmACPMt0gmG7lVwW-AwjTUKPhbM-V3ZIZAxeZY-nn07AdI/s1600/mainbblanc.png); BORDER-BOTTOM: #c0c0c0 0px solid; BORDER-LEFT: #c0c0c0 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #00aaff; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND-REPEAT: repeat; BACKGROUND-POSITION: 0px 0px; COLOR: #ffff00; BORDER-TOP: #c0c0c0 0px solid; BORDER-RIGHT: #c0c0c0 0px solid; TEXT-DECORATION: none; PADDING-TOP: 10px; text-shadow: #FFF 0 0 1px
}
UL#MHZRAorange LI:hover > A {
 BACKGROUND-IMAGE: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Gdm8n187QwfWWxiCioVb_4-BTIAn80hmVq5qKqAgAlx1mZ5c0YhtuiFeA3FTb98upImIn1j2N8SnYIZiHXaGk8VcOKhcA2vmACPMt0gmG7lVwW-AwjTUKPhbM-V3ZIZAxeZY-nn07AdI/s1600/mainbblanc.png); BORDER-BOTTOM-STYLE: solid; BORDER-BOTTOM-COLOR: #c0c0c0; BACKGROUND-COLOR: #55aaff; BORDER-TOP-COLOR: #c0c0c0; BORDER-LEFT-STYLE: solid; BACKGROUND-POSITION: 0px 100px; BORDER-TOP-STYLE: solid; COLOR: #ffaa00; BORDER-RIGHT-COLOR: #c0c0c0; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-COLOR: #c0c0c0; TEXT-DECORATION: none; text-shadow: #FFF 0 0 1px
}
UL#MHZRAorange LI > A.pressed {
 BACKGROUND-IMAGE: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Gdm8n187QwfWWxiCioVb_4-BTIAn80hmVq5qKqAgAlx1mZ5c0YhtuiFeA3FTb98upImIn1j2N8SnYIZiHXaGk8VcOKhcA2vmACPMt0gmG7lVwW-AwjTUKPhbM-V3ZIZAxeZY-nn07AdI/s1600/mainbblanc.png); BORDER-BOTTOM-STYLE: solid; BORDER-BOTTOM-COLOR: #c0c0c0; BACKGROUND-COLOR: #55aaff; BORDER-TOP-COLOR: #c0c0c0; BORDER-LEFT-STYLE: solid; BACKGROUND-POSITION: 0px 100px; BORDER-TOP-STYLE: solid; COLOR: #ffaa00; BORDER-RIGHT-COLOR: #c0c0c0; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-COLOR: #c0c0c0; TEXT-DECORATION: none; text-shadow: #FFF 0 0 1px
}
UL#MHZRAorange UL LI:hover > A {
 BACKGROUND-IMAGE: none; BACKGROUND-COLOR: #ffff7f; FONT: bold 15px Verdana; COLOR: #ffaa00; TEXT-DECORATION: none
}
UL#MHZRAorange UL LI > A.pressed {
 BACKGROUND-IMAGE: none; BACKGROUND-COLOR: #ffff7f; FONT: bold 15px Verdana; COLOR: #ffaa00; TEXT-DECORATION: none
}
UL#MHZRAorange LI.topfirst > A {
 -moz-border-radius: 50px 0 0 50px; -webkit-border-radius: 50px; border-radius: 50px 0 0 50px; -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0
}
UL#MHZRAorange LI.toplast > A {
 -moz-border-radius: 0 50px 50px 0; -webkit-border-radius: 0; border-radius: 0 50px 50px 0; -webkit-border-top-right-radius: 50px; -webkit-border-bottom-right-radius: 50px
}
/*]]>*/
</style>