Этот код ставим где вам нравится. Пример в левой колонке моего сайта.
<style>
.menuHolder2 {position: relative; margin-left:10px; float:left; overflow:hidden; width:160px; height:400px; font:normal 11px/35px verdana, sans-serif;}
.menuHolder2 .shadow {width:10px; height:90%; top:5%; left:-9px; position:absolute; z-index:100; background:#888;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
-o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
}
ul.menu2 {margin:0 0 0 1px; list-style: none; display:block; width: 160px; position:relative; padding:60px 0;}
ul.menu2 li {margin:5px 0 0 0;}
ul.menu2 li a {background:#aaa; color:#ddd; padding:0 15px; width:90px; display:block; text-decoration:none;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
ul.menu2 li a.red {background:#a00;}
ul.menu2 li a.orange {background:#da0;}
ul.menu2 li a.yellow {background:#aa0;}
ul.menu2 li a.green {background:#060;}
ul.menu2 li a.blue {background:#00a;}
ul.menu2 li a.indigo {background:#2b0062;}
ul.menu2 li a.violet {background:#682bc2;}
ul.menu2 li a:hover {background:#aaa; color:#fff; padding:0 15px 0 40px;}
ul.menu2 li a.red:hover {background:#c00;}
ul.menu2 li a.orange:hover {background:#fc0;}
ul.menu2 li a.yellow:hover {background:#cc0;}
ul.menu2 li a.green:hover {background:#080;}
ul.menu2 li a.blue:hover {background:#00c;}
ul.menu2 li a.indigo:hover {background:#5b1092;}
ul.menu2 li a.violet:hover {background:#8a2be2;}
</style>
<div class=”menuHolder2″>
<ul class=”menu2″>
<li><a href=”https://m-primahtarsk.ru/” class=”red”>ГЛАВНАЯ</a></li>
<li><a href=”https://m-primahtarsk.ru/?page_id=84″ class=”orange”>О ГОРОДЕ</a></li>
<li><a href=” https://m-primahtarsk.ru/?page_id=177″ class=”yellow”>РАЗНОЕ</a></li>
<li><a href=”https://m-primahtarsk.ru/?page_id=754″ class=”green”> ФОТО</a></li>
<li><a href=” https://m-primahtarsk.ru/?page_id=173″ class=”blue”>АФИША</a></li>
<li><a href=”https://m-primahtarsk.ru/?page_id=56″ class=”indigo”>ОТДЫХ</a></li>
<li><a href=”https://m-primahtarsk.ru/?page_id=34″ class=”violet”>КОНТАКТ</a></li>
<li><a href=”https://m-primahtarsk.ru/?page_id=324″ class=”violet”>ОБЪЯВЫ</a></li>
</ul>
<div class=”shadow”></div>
</div>
2,300 просмотров всего, 1 просмотров сегодня
