كاربردي آموزش ایجاد منو آبشاری در قالب های جوملا

کد:
#magicjoomla_com_1_wrapper {

 

          float: right;

 

          width: 980px;

 

          position: absolute;

 

          height: 55px;

 

          z-index: 999;

 

          }

 

#magicjoomla_com_wrapper {

 

          overflow:hidden;

 

          }

 

div#menu {

 

    height: 55px;

 

    padding: 10px 0 0;

 

    width:auto;

 

          z-index: 999;

 

  }

 

div#menu ul  {

 

    margin: 0;

 

    padding: 0;

 

    list-style: none;

 

}

 

div#menu ul.menu {

 

    padding-left: 30px;

 

}

 

div#menu a  {

 

    position: relative;

 

    z-index: 10;

 

    height: 41px;

 

    display: block;

 

    float: left;

 

    line-height: 41px;

 

    text-decoration: none;

 

    font: normal 12px Tahoma, Trebuchet MS;

 

}

 

div#menu li  {

 

    position: relative;

 

    margin: 0;

 

    padding: 0 0px 0 0;

 

    display: block;

 

    float: right;

 

    z-index: 9;

 

}

 

div#menu ul ul li  {

 

    z-index: 9;

 

}

 

div#menu li:hover>ul  {

 

    right: -2px;

 

}

 

  

 

div#menu ul ul  }

 

          z-index: 999;

 

    padding: 0px 4px 10px 4px;

 

          background-color: #343434;

 

    border: 3px solid #fff;

 

          color: #fff; 

 

    position: absolute;

 

    top: 48px;

 

    left: -999em;

 

    width: 180px;

 

   padding: 0px 4px 10px 4px;

 

    margin-top:1px;

 

          color: #fff;

 

    }

 

div#menu li:hover>div  {

 

    visibility: visible;

 

}

 

  

 

div#menu span  {

 

    margin-top: -4px;

 

    padding-left: 15px;

 

    color: #fff;

 

    font: normal 11px Tahoma, Helvetica,Arial,FreeSans,sans-serif;

 

    background: none;

 

    line-height: 42px;

 

    display: block;

 

    cursor: pointer;

 

    background-repeat: no-repeat;

 

    background-position: 95% 0;

 

    text-align: center;

 

}

 

  

 

/* menu::level1 */

 

div#menu a  {

 

    padding: 0 10px 0 0;

 

    line-height: 50px;

 

    height: 52px;

 

    margin-right: 5px;

 

    _margin-right: 1px;

 

    background: none;

 

    text-transform: uppercase;

 

}

 

div#menu ul.menu>li:hover>a span  {

 

            color: #07b3e1;

 

}

 

/* menu::level2 */

 

div#menu ul ul li  {

 

    background: none;

 

    padding: 0;

 

}

 

div#menu ul ul a  {

 

    padding: 0px;

 

    height: auto;

 

    float: none;

 

    display: block;

 

    line-height: 25px;

 

    font-size: 13px;

 

    color: #fff;

 

    z-index: -1;

 

    padding-left: 5px;

 

    white-space: normal;

 

    width: 152px;

 

    margin: 0 8px;

 

    text-transform: none;

 

}

 

    

 

div#menu ul ul a span  {

 

            padding: 0 5px;

 

    line-height: 25px;

 

    font-size: 11px;

 

}

 

div#menu ul ul a:hover  {

 

 background:none;

 

 background-color: #3c3c3c;

 

}

 

div#menu ul ul a:hover span  {

 

          background:none;

 

          color: #07b3e1;

 

}

 

div#menu ul ul a.parent span  {

 

  background:none;

 

}

 

div#menu ul ul a.parent:hover  {

 

  background-color: #3c3c3c;

 

}

 

div#menu ul ul a.parent:hover span  {

 

  background:none;

 

}

 

div#menu ul ul span  {

 

    margin-top: 0;

 

    text-align: right;

 

}

 

div#menu ul ul li  {

 

    width: 100%;

 

}

 

  

 

/* menu::level3 */

 

div#menu ul ul ul  {

 

    padding: 0;

 

    margin: -38px 180px 0 0 !important;

 

    margin-left: 172px;

 

          

 

}

 

div#menu ul ul div li  {

 

    position:relative;

 

    top:-10px;

 

}

 

div#menu li div  {

 

    list-style: none;

 

    float: right;

 

    position: absolute;

 

    z-index: 11;

 

    top: 2px;

 

    left: 0;

 

    visibility: hidden;

 

          height: 10px;

 

    width: 180px;

 

          margin: 0px 0 0 -4px;

 

    padding: 0;

 

}