Menu horizontal et le sub-sub-submenu style regarder la démo

Comme toujours pas de téléchargement copier coller le HTML CSS ET vous pouvez modifier tous.Menu avec arriére plan backgrond ,vert light et bleu light avec sub-sub-submenu COOL !!!!

• Démo
• HTML CODE
• CSS CODE

• chez-vous
• Item1
  • Item1 0 0
    • Item1 0 0
      • Item1 0 0 0
      • Item1 0 0 1
      • Item1 0 0 2
  • Item1 1
    • Item1 1 0
    • Item1 1 1
  • Item1 2
    • Item1 2 0
  • Item1 3
    • Item1 3 0
• Item 2
  • Item 2 0
  • Item 2 1
  • Item 2 2
• Item 3
• Item 4
  • Item 4 0
  • Item 4 1

<UL id=css3menu13 class=topmenu> <LI class=topfirst><A style="LINE-HEIGHT: 30px; WIDTH: 134px; HEIGHT: 30px" title=chez-vous href="#"><IMG alt=chez-vous src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi84ljg_GshW0B5Hl4VTIHAmqjzamw_6flEgX89-i7iU-U51GzovxszookYll1ZLRJj693x79u-ay42POjTHrur7a4Cyldfqm7VTE3XvcY7IF7ADKLs9D_VseLMyyGWwyVNQ7CFlfcYEI8Z/s1600/micon1_3.png">chez-vous</A> </LI> <LI class=topmenu><A style="LINE-HEIGHT: 30px; WIDTH: 72px; HEIGHT: 30px" title=Item1 href="#"><SPAN>Item1</SPAN></A> <UL> <LI><A title="Item1 0 0" href="#"><SPAN><IMG alt="Item1 0 0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDRrCrNwarmQ7GDft0JoKji077nx1lfUrLQKDxtucQo4se_tRzQJrDeiwXX4_4ROg67jEJZdAnwatWXwmsrldAsUUnqF62oL_tRsLBknDaae0qm5ysysMPRGUax3TsdOQrSqgan3yFkxH1/s1600/256base-rundo-over6.png">Item1 0 0</SPAN></A> <UL> <LI><A title="Item1 0 0" href="#"><SPAN><IMG alt="Item1 0 0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDRrCrNwarmQ7GDft0JoKji077nx1lfUrLQKDxtucQo4se_tRzQJrDeiwXX4_4ROg67jEJZdAnwatWXwmsrldAsUUnqF62oL_tRsLBknDaae0qm5ysysMPRGUax3TsdOQrSqgan3yFkxH1/s1600/256base-rundo-over6.png">Item1 0 0</SPAN></A> <UL> <LI><A title="Item1 0 0 0" href="#"><IMG alt="Item1 0 0 0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDRrCrNwarmQ7GDft0JoKji077nx1lfUrLQKDxtucQo4se_tRzQJrDeiwXX4_4ROg67jEJZdAnwatWXwmsrldAsUUnqF62oL_tRsLBknDaae0qm5ysysMPRGUax3TsdOQrSqgan3yFkxH1/s1600/256base-rundo-over6.png">Item1 0 0 0</A> <LI><A title="Item1 0 0 1" href="#">Item1 0 0 1</A> <LI><A title="Item1 0 0 2" href="#">Item1 0 0 2</A> </LI></UL></LI></UL> <LI><A title="Item1 1" href="#"><SPAN><IMG alt="Item1 1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDRrCrNwarmQ7GDft0JoKji077nx1lfUrLQKDxtucQo4se_tRzQJrDeiwXX4_4ROg67jEJZdAnwatWXwmsrldAsUUnqF62oL_tRsLBknDaae0qm5ysysMPRGUax3TsdOQrSqgan3yFkxH1/s1600/256base-rundo-over6.png">Item1 1</SPAN></A> <UL> <LI><A title="Item1 1 0" href="#"><IMG alt="Item1 1 0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDRrCrNwarmQ7GDft0JoKji077nx1lfUrLQKDxtucQo4se_tRzQJrDeiwXX4_4ROg67jEJZdAnwatWXwmsrldAsUUnqF62oL_tRsLBknDaae0qm5ysysMPRGUax3TsdOQrSqgan3yFkxH1/s1600/256base-rundo-over6.png">Item1 1 0</A> <LI><A title="Item1 1 1" href="#">Item1 1 1</A> </LI></UL> <LI><A title="Item1 2" href="#"><SPAN><IMG alt="Item1 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDRrCrNwarmQ7GDft0JoKji077nx1lfUrLQKDxtucQo4se_tRzQJrDeiwXX4_4ROg67jEJZdAnwatWXwmsrldAsUUnqF62oL_tRsLBknDaae0qm5ysysMPRGUax3TsdOQrSqgan3yFkxH1/s1600/256base-rundo-over6.png">Item1 2</SPAN></A> <UL> <LI><A title="Item1 2 0" href="#">Item1 2 0</A> </LI></UL> <LI><A title="Item1 3" href="#"><SPAN><IMG alt="Item1 3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDRrCrNwarmQ7GDft0JoKji077nx1lfUrLQKDxtucQo4se_tRzQJrDeiwXX4_4ROg67jEJZdAnwatWXwmsrldAsUUnqF62oL_tRsLBknDaae0qm5ysysMPRGUax3TsdOQrSqgan3yFkxH1/s1600/256base-rundo-over6.png">Item1 3</SPAN></A> <UL> <LI><A title="Item1 3 0" href="#">Item1 3 0</A> </LI></UL></LI></UL></LI> <LI class=topmenu><A style="LINE-HEIGHT: 30px; WIDTH: 79px; HEIGHT: 30px" title="Item 2" href="#"><SPAN>Item 2</SPAN></A> <UL> <LI><A title=" Item 2 0" href="#">Item 2 0</A> <LI><A title="Item 2 1" href="#">Item 2 1</A> <LI><A title="Item 2 2" href="#">Item 2 2</A> </LI></UL></LI> <LI class=topmenu><A style="LINE-HEIGHT: 30px; WIDTH: 80px; HEIGHT: 30px" title="Item 3" href="#">Item 3</A> </LI> <LI class=toplast><A style="LINE-HEIGHT: 30px; WIDTH: 79px; HEIGHT: 30px" title="Item 4" href="#"><SPAN>Item 4</SPAN></A> <UL> <LI><A title="Item 4 0" href="#">Item 4 0</A> <LI><A title="Item 4 1" href="#">Item 4 1</A> </LI></UL></LI></UL>

<STYLE>UL#css3menu13 { border-bottom: White solid 2px; border-left: #FF9966 solid 0px;PADDING-BOTTOM: 0px; background-color: White; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; border-top: #FF9933 solid 1px; border-right: #FF9900 2px;1px solid; PADDING-TOP: 0px; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px } UL#css3menu13 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: 25px; -webkit-border-radius: 25px; border-radius: 25px } UL#css3menu13 UL { POSITION: absolute; BORDER-BOTTOM-COLOR: #fff; FILTER: alpha(opacity=89); PADDING-BOTTOM: 10px; BORDER-RIGHT-WIDTH: 2px; BACKGROUND-COLOR: #aaff7f; 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: 100%; LEFT: 0px; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; opacity: 0.89; -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#css3menu13 LI:hover > * { DISPLAY: block } UL#css3menu13 LI:hover { POSITION: relative } UL#css3menu13 UL UL { POSITION: absolute; TOP: 0px; LEFT: 100%; opacity: 1 } UL#css3menu13 { DISPLAY: block; FLOAT: left; FONT-SIZE: 0px } UL#css3menu13 LI { DISPLAY: block; WHITE-SPACE: nowrap; FLOAT: left; FONT-SIZE: 0px } UL#css3menu13 > LI { MARGIN: 0px } UL#css3menu1 LI { MARGIN: 0px } UL#css3menu13 A:active { OUTLINE-STYLE: none } UL#css3menu1 A:focus { OUTLINE-STYLE: none } UL#css3menu13 A { TEXT-ALIGN: center; DISPLAY: block; FONT: bold italic 20px Times New Roman; COLOR: #aa0000; VERTICAL-ALIGN: middle; CURSOR: pointer; TEXT-DECORATION: none; text-shadow: #FFF 0 0 1px } UL#css3menu13 A.pressed { TEXT-ALIGN: center; DISPLAY: block; FONT: bold italic 20px Times New Roman; COLOR: #aa0000; VERTICAL-ALIGN: middle; CURSOR: pointer; TEXT-DECORATION: none; text-shadow: #FFF 0 0 1px } UL#css3menu13 UL LI { MARGIN: 10px 0px 0px; FLOAT: none } UL#css3menu13 UL A { BACKGROUND-IMAGE: none; TEXT-ALIGN: center; PADDING-BOTTOM: 4px; BORDER-RIGHT-WIDTH: 0px; BACKGROUND-COLOR: #aaff7f; PADDING-LEFT: 4px; PADDING-RIGHT: 4px; FONT: bold 18px Times New Roman; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; COLOR: #aa0000; BORDER-LEFT-WIDTH: 0px; TEXT-DECORATION: underline; PADDING-TOP: 4px; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; text-shadow: #FFF 0 0 0 } UL#css3menu13 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: #aaffff; BORDER-TOP-COLOR: #c0c0c0; BORDER-LEFT-STYLE: solid; FONT: bold italic 20px Times New Roman; 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#css3menu13 IMG { BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; VERTICAL-ALIGN: middle; MARGIN-RIGHT: 10px } UL#css3menu13 IMG.over { DISPLAY: none } UL#css3menu13 LI:hover > A IMG.def { DISPLAY: none } UL#css3menu13 LI:hover > A IMG.over { DISPLAY: inline } UL#css3menu13 LI A.pressed IMG.over { DISPLAY: inline } UL#css3menu13 LI A.pressed IMG.def { DISPLAY: none } UL#css3menu13 SPAN { PADDING-RIGHT: 0px; DISPLAY: block; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: right center; OVERFLOW: visible } UL#css3menu13 UL SPAN { BACKGROUND-IMAGE: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6wWcLR-kb-JAiz20K3pQ5Ag9Fw42beXTiE3dAtekCFpSwWcVZ7bFmtkK06Y3bdlHKVIWJi8Kh6F_7qhGtnkXZWuZeq78-aElbG8HyMGVry13823uVx7Fkh2RXo86bfaLpuwcvatJn8Z9J/s1600/arrow.gif); PADDING-RIGHT: 24px } UL#css3menu13 A { BACKGROUND-IMAGE: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvftatuPhkgqaCunFJHoQMMItJQ7lKKd8oGXxlEHznWV95cKqzR8tp5KC0MpQHuXj6NJ344xh4KQ3rr3vy7ChI5usv6IwDdfhccdBlwplq_PkUJ6gzT5nINOMQ7Vw7Us5AzbO8kMp3iIe4/s1600/mainbk.png); BORDER-BOTTOM: #c0c0c0 0px solid; BORDER-LEFT: #c0c0c0 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #aaff7f; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND-REPEAT: repeat; BACKGROUND-POSITION: 0px 0px; COLOR: #aa0000; BORDER-TOP: #c0c0c0 0px solid; BORDER-RIGHT: #c0c0c0 0px solid; TEXT-DECORATION: none; PADDING-TOP: 10px; text-shadow: #FFF 0 0 1px } UL#css3menu13 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: #aaffff; 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#css3menu13 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: #aaffff; 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#css3menu13 UL LI:hover > A { BACKGROUND-IMAGE: none; BACKGROUND-COLOR: #00ffff; FONT: bold 18px Times New Roman; COLOR: #aa007f; TEXT-DECORATION: none; text-shadow: #FFF 0 0 0 } UL#css3menu13 UL LI > A.pressed { BACKGROUND-IMAGE: none; BACKGROUND-COLOR: #00ffff; FONT: bold 18px Times New Roman; COLOR: #aa007f; TEXT-DECORATION: none; text-shadow: #FFF 0 0 0 } UL#css3menu13 LI.topfirst > A { LINE-HEIGHT: 18px; BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 18px; BORDER-LEFT-WIDTH: 0px; -moz-border-radius: 25px 0 0 25px; -webkit-border-radius: 25px; border-radius: 25px 0 0 25px; -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0 } UL#css3menu13 LI.topfirst:hover > A { LINE-HEIGHT: 18px } UL#css3menu1 LI.topfirst > A.pressed { LINE-HEIGHT: 18px } UL#css3menu13 LI.topmenu > A { LINE-HEIGHT: 18px; HEIGHT: 18px } UL#css3menu13 LI.topmenu:hover > A { LINE-HEIGHT: 18px } UL#css3menu13 LI.topmenu > A.pressed { LINE-HEIGHT: 18px } UL#css3menu13 LI.toplast > A { LINE-HEIGHT: 18px; HEIGHT: 18px; -moz-border-radius: 0 25px 25px 0; -webkit-border-radius: 0; border-radius: 0 25px 25px 0; -webkit-border-top-right-radius: 25px; -webkit-border-bottom-right-radius: 25px } UL#css3menu13 LI.toplast:hover > A { LINE-HEIGHT: 18px } UL#css3menu13 LI.toplast > A.pressed { LINE-HEIGHT: 18px } </STYLE>