blggerstep: Menu accordion dropdown menu horizontal simple

Démo
HTML CODE
CSS CODE

Item 1
- Item 1
- Item 1 1
- Item 1 2
- Item 1 3
- Item 1 4
- Item 1 5
Item 3
- Item 3 0
- Item 3 1
- Item 3 2
- Item 3 0
- Item 3 1
- Item 3 2
Item 4
- Item 4 0
- Item 4 1
- Item 4 2
- Item 4 0
- Item 4 1
- Item 4 2

<ul id="menuhcolumn" class="topmenu">
    <li class="topfirst"><a style="LINE-HEIGHT: 28px; WIDTH: 150px; HEIGHT: 28px" title="HOME" href="#">HOME</a></li>

<li>
      <a style="LINE-HEIGHT: 28px; WIDTH: 160px; HEIGHT: 28px" class="pressed" title="Item 1" href="#"><span>Item 1</span></a>

<ul style="WIDTH: 160px" title="Item 1">
        <li>Item 1</li>

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

</li>

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

</li>

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

</li>

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

</li>

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

</li>
      </ul>
    </li>
  <li>
      <a style="LINE-HEIGHT: 28px; WIDTH: 160px; HEIGHT: 28px" title="Item 3" href="#"><span>Item 3</span></a>

<ul style="WIDTH: 160px">
        <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>
  
  <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 class="toplast">
      <a style="LINE-HEIGHT: 28px; WIDTH: 160px; HEIGHT: 28px" title="Item 3" href="#"><span>Item 4</span></a>

<ul style="WIDTH: 160px">
        <li><a title="Item 4 0" href="#">Item 4 0</a></li>

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

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

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

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

</ul>

<style type="text/css">
/*<![CDATA[*/
UL#menuhcolumn {
 border-bottom: #5f5f5f solid 0px;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 px;border-right: #5f5f5f solid 0px; PADDING-TOP: 0px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px
}
UL#menuhcolumn UL {
 border-bottom: #0033FF solid 0px;border-left: #5f5f5f solid 0px;PADDING-BOTTOM: 0px; background-color: #CCFF00;LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; border-right: #5f5f5f solid 0px;PADDING-TOP: 0px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px
}
UL#menuhcolumn UL {
 POSITION: absolute ; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #ffffff; 
 PADDING-LEFT: 10px; PADDING-RIGHT: 10px; DISPLAY: none; 
 border-left-color: #009900;PADDING-TOP: 0px; TOP: 100%; LEFT: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; -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#menuhcolumn LI:hover > * {
 DISPLAY: block
}
UL#menuhcolumn LI:hover {
 POSITION: relative
}
UL#menuhcolumn UL UL {
 POSITION: absolute; TOP: 0px; LEFT: 100%
}
UL#menuhcolumn {
 DISPLAY: block; FLOAT: left; FONT-SIZE: 0px
}
UL#menuhcolumn LI {
 DISPLAY: block; WHITE-SPACE: nowrap; FLOAT: left; FONT-SIZE: 0px
}
UL#menuhcolumn > LI {
 MARGIN: 0px
}
UL#menuhcolumn LI {
 MARGIN: 0px
}
UL#menuhcolumn A:active {
 OUTLINE-STYLE: none
}
UL#menuhcolumn A:focus {
 OUTLINE-STYLE: none
}
UL#menuhcolumn A {
 TEXT-ALIGN: center; DISPLAY: block; FONT: bold 20px Times New Roman; COLOR: #000000; VERTICAL-ALIGN: middle; CURSOR: pointer;
  TEXT-DECORATION: none; text-shadow: #FFF 0 0 1px
}
UL#menuhcolumn A.pressed {
 TEXT-ALIGN: center; DISPLAY: block; FONT: bold 20px Times New Roman; COLOR: #000000; VERTICAL-ALIGN: middle; CURSOR: pointer; TEXT-DECORATION: none; text-shadow: #FFF 0 0 1px
}
UL#menuhcolumn UL LI {
 MARGIN: 10px 0px 0px; FLOAT: none
}
UL#menuhcolumn UL A {
 BACKGROUND-IMAGE: none; TEXT-ALIGN: center; PADDING-BOTTOM: 4px;
  BORDER-RIGHT-WIDTH: 0px; background-color: #99FFFF;PADDING-LEFT: 4px;
   PADDING-RIGHT: 4px; FONT: bold 15px Times New Roman; BORDER-TOP-WIDTH:0px;
    BORDER-BOTTOM-WIDTH: 4px; COLOR: #090; BORDER-LEFT-WIDTH: 0px; TEXT-DECORATION: none; 
    PADDING-TOP: 4px; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px
}
UL#menuhcolumn LI:hover > A { 
 BORDER-BOTTOM-STYLE: solid; 
 border-bottom-color: #009900; 
 BACKGROUND-COLOR: #ffffff; 
 BORDER-TOP-COLOR: ; 
 BORDER-LEFT-STYLE: solid; 
 FONT: bold 20px Times New Roman;
  background-position: 5px 100px;BORDER-TOP-STYLE: solid;
   COLOR: #444444; 
   BORDER-RIGHT-COLOR: #c0c0c0; 
   BORDER-RIGHT-STYLE: solid; 
   BORDER-LEFT-COLOR: #c0c0c0; 
   TEXT-DECORATION: underline; 
   text-shadow: #fff 0 0 1px
}
UL#menuhcolumn IMG {
 BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; 
 BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; 
 VERTICAL-ALIGN: middle; 
 MARGIN-RIGHT: 10px
}
UL#menuhcolumn IMG.over {
 DISPLAY: none
}
UL#menuhcolumn LI:hover > A IMG.def {
 DISPLAY: none
}
UL#menuhcolumn LI:hover > A IMG.over {
 DISPLAY: inline
}
UL#menuhcolumn LI A.pressed IMG.over {
 DISPLAY: inline
}
UL#menuhcolumn LI A.pressed IMG.def {
 DISPLAY: none
}
UL#menuhcolumn SPAN {
 PADDING-RIGHT: 0px; DISPLAY: block; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: right center; OVERFLOW: visible
}
UL#menuhcolumn A {
 BACKGROUND-IMAGE: url(mainbk.png); BORDER-BOTTOM: #c0c0c0 0px solid; BORDER-LEFT: #c0c0c0 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #79f7f9; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND-REPEAT: repeat; BACKGROUND-POSITION: 0px 0px; COLOR: #000000; BORDER-TOP: #c0c0c0 0px solid; BORDER-RIGHT: #c0c0c0 0px solid; TEXT-DECORATION: none; PADDING-TOP: 10px; text-shadow: #FFF 0 0 1px
}
UL#menuhcolumn LI:hover > A {
 BACKGROUND-IMAGE: url(mainbk.png); BORDER-BOTTOM-STYLE: solid; BORDER-BOTTOM-COLOR: #c0c0c0; BACKGROUND-COLOR: #ffffff; BORDER-TOP-COLOR: #c0c0c0; BORDER-LEFT-STYLE: solid; BACKGROUND-POSITION: 0px 100px; BORDER-TOP-STYLE: solid; COLOR: #444444; BORDER-RIGHT-COLOR: #c0c0c0; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-COLOR: #c0c0c0; TEXT-DECORATION: underline; text-shadow: #FFF 0 0 1px
}
UL#menuhcolumn LI > A.pressed {
 BACKGROUND-IMAGE: url(mainbk.png); 
 BORDER-BOTTOM-STYLE: solid;
  BORDER-BOTTOM-COLOR: #c0c0c0;
   BACKGROUND-COLOR: #ffffff; 
   BORDER-TOP-COLOR: #c0c0c0;
    BORDER-LEFT-STYLE: solid; 
    BACKGROUND-POSITION: 0px 100px;
     BORDER-TOP-STYLE: solid; COLOR: #444444;
   BORDER-RIGHT-COLOR: #c0c0c0; 
   BORDER-RIGHT-STYLE: solid; 
   BORDER-LEFT-COLOR: #c0c0c0;
    TEXT-DECORATION: underline;
    text-shadow: #FFF 0 0 1px
}
UL#menuhcolumn UL LI:hover > A {
 BACKGROUND-IMAGE: none; BACKGROUND-COLOR: #ffffff; FONT: bold 14px Times New Roman; COLOR: #000000; TEXT-DECORATION: underline
}
UL#menuhcolumn UL LI > A.pressed {
 BACKGROUND-IMAGE: none; BACKGROUND-COLOR: #ffffff; FONT: bold 14px Times New Roman; COLOR: #000000; TEXT-DECORATION: underline
}
UL#menuhcolumn 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#menuhcolumn 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>