Примеры

Данный код, вставленный в CSS заставит Ваш сайт выглядеть вот так:

.art-content-layout .art-sidebar1 {width: 0px;
position: relative !important;
z-index: 999;}
/*кнопка меню фон*/
ul.art-vmenu a .l {
   background-image: url();
 
}
ul.art-vmenu a .r {
    background-image: url();
}
ul.art-vmenu ul a {
       background-image: url();
padding-left: 20px;
}
/*отключаем надпись меню*/
.art-vmenublockheader {
display:none;}
.art-vmenublock-body {
 z-index: 5;
position: absolute !important;
width: 1000px;
height: 45px;
top: -50px;
left: -12px;


background: linear-gradient(89deg, rgba(85, 144, 34, 0.2)0%, rgba(133, 255, 144, 0.8)75%);
background: -moz-linear-gradient(89deg, rgba(85, 144, 34, 0.2)0%, rgba(133, 255, 144, 0.8)75%);
background: -webkit-linear-gradient(89deg, rgba(85, 144, 34, 0.2)0%, rgba(133, 255, 144, 0.8)75%);
background: -o-linear-gradient(89deg, rgba(85, 144, 34, 0.2)0%, rgba(133, 255, 144, 0.8)75%);
}
div.art-header {
       height: 340px;/*300 высота плюс высота меню равно 340*/
}
ul.art-vmenu, ul.art-vmenu li {
        float: left;
}
ul.art-vmenu ul, ul.art-vmenu ul li {
    clear: left;
}
ul.art-vmenu li a { padding: 0px 0px;
     background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#0015FF));
   background: -webkit-linear-gradient(top, #FFFFFF, #0015FF);
   background: -moz-linear-gradient(top, #FFFFFF, #0015FF);
   background: -ms-linear-gradient(top, #FFFFFF, #0015FF);
   background: -o-linear-gradient(top, #FFFFFF, #0015FF);
   background-color: #0015FF;
   box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 3px #009C78;
   -webkit-box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 3px #009C78;
   -moz-box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 3px #009C78;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
   text-shadow: #FF7A7A 1px 1px 0px;
   color: #8F0000;
   font-size: 14px;
   font-family: Arial;
   text-decoration: none;
   font-weight: bold;
   -webkit-transition: 0.7s;
   -moz-transition: 0.7s;
   -o-transition: 0.7s;
   cursor: pointer;}
ul.art-vmenu a .t {
   line-height: 40px;
    width: 100px;
}
ul.art-vmenu li a:hover {
-webkit-transform: translate(0px, 0px) rotate(0deg) skew(6deg, 8deg) scale(1.4, 1.4);
-moz-transform: translate(0px, 0px) rotate(0deg) skew(6deg, 8deg) scale(1.4, 1.4);
-o-transform: translate(0px, 0px) rotate(0deg) skew(6deg, 8deg) scale(1.4, 1.4);
-ms-transform: translate(0px, 0px) rotate(0deg) skew(6deg, 8deg) scale(1.4, 1.4);
transform: translate(0px, 0px) rotate(0deg) skew(6deg, 8deg) scale(1.4, 1.4);

   background: none;
   background-color: #0015FF;
   box-shadow: 0px 0px 5px 0px #AAAAAA;
   -webkit-box-shadow: 0px 0px 5px 0px #AAAAAA;
   -moz-box-shadow: 0px 0px 5px 0px #AAAAAA;
   border: 1px solid #ffffff;
   color: #470000;
   -webkit-transition: 0.7s;
   -moz-transition: 0.7s;
   -o-transition: 0.7s;
   }


ul.art-vmenu a .t {
}
ul.art-vmenu a:hover .t {
 
}
.art-vmenublockcontent {
    position: relative;
    z-index: 0;
    margin: 0px auto;
    min-width: 1px;
    min-height: 1px;
    left: 0px;
    width: 900px;
    height: 40px;
    padding-top: 3px;
}
ul.art-vmenu a {
       height: 40px;
}
 ul.art-vmenu ul a {

}
ul.art-vmenu ul a:hover {

}
/*делаем подменю выпадающим*/
ul.art-vmenu li ul a  {
    display: none;}  /*прячем подменю*/
ul.art-vmenu li:hover ul {
  display: block;
}
/*открываем подменю при наведении*/
ul.art-vmenu li:hover ul a {
  display: block;}
ul.art-vmenu ul a, ul.art-vmenu ul a:link, ul.art-vmenu ul a:visited, ul.art-vmenu ul a:hover, ul.art-vmenu ul a:active, ul.art-vmenu ul span, ul.art-vmenu ul span span {
    line-height: 18px;
    color: rgb(0, 0, 0);
    font-size: 14px;
    margin-left: 0px;
    padding: 5px 20px 10px 15px;
}
ul.art-vmenu ul {  width: 10px;
}

.art-vmenu ul li a:hover {
   background: none;
   background-color: #F8AD03;
   box-shadow: 0px 0px 5px 0px #AAAAAA;
   -webkit-box-shadow: 0px 0px 5px 0px #AAAAAA;
   -moz-box-shadow: 0px 0px 5px 0px #AAAAAA;
   border: 1px solid #ffffff;
   color: #470000; }
.art-vmenu ul li a { background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#FF33F8));
   background: -webkit-linear-gradient(top, #FFFFFF, #FF33F8);
   background: -moz-linear-gradient(top, #FFFFFF, #FF33F8);
   background: -ms-linear-gradient(top, #FFFFFF, #FF33F8);
   background: -o-linear-gradient(top, #FFFFFF, #FF33F8);
   background-color: #FF33F8;
   box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 3px #261E1E;
   -webkit-box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 3px #261E1E;
   -moz-box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 3px #261E1E;
   -webkit-border-radius: 13px;
   -moz-border-radius: 13px;
   border-radius: 13px;
   text-shadow: #050505 1px 1px 0px;
   color: #ffff;
   font-size: 14px;
   font-family: Arial;
   text-decoration: none;
   font-weight: bold;
   -webkit-transition: 1.1s;
   -moz-transition: 1.1s;
   -o-transition: 1.1s;
   cursor: pointer;}