.content-inner {
background-color: #E2CFAC;
}
.menu-block {
position: relative;
background: #8F0000;
border: 1px solid #666;
padding: 15px 0;
margin: 0 auto;
height: 200px;
width: 100%;
}
.menu-block:after,
.menu-block:before {
position: absolute;
top: 65px;font: normal normal 100px/100px serif;
color: #333;
text-shadow: 1px 1px 10px #E0C2C2;
padding: 0;
margin: 0;
height: 100px;
width: 100px;
}
.menu-block:before {
content: '風';
left: 15%;
}
.menu-block:after {
content: '水';
right: 15%;
}
.fen-shuy {
position: relative;
z-index: 5;
background: url(http://webanfarwol.ru/IMG5/fen-shuy-gradient.png) repeat-x #ccc;
border: 1px solid #000;
border-radius: 100px;
margin: 0 auto;
height: 200px;
width: 200px;
}
.fen-shuy:hover {
width: 800px;
}
.fen-shuy:after,
.fen-shuy:before {
position: absolute;
top: 0;
content: '';
padding: 0;
margin: 0;
height: 200px;
width: 100px;
}
.fen-shuy:before {
left: 0;
background: #000;
border-radius: 100px 0 0 100px;
}
.fen-shuy:after {
right: 0;
background: #fff;
border-radius: 0 100px 100px 0;
}
.fs-menu:before,
.fs-menu:after {
content: '\25CF';
position: absolute;
z-index: 5;
font: normal normal 100px/75px Tahoma;
height: 100px;
width: 50px;
}
.fs-menu:before {
background: #fff;
border-radius: 50px 0 0 50px;
text-indent: 20px;
color: #000;
left: 50px;
top: 0;
}
.fs-menu:after {
background: #000;
border-radius: 0 50px 50px 0;
text-indent: -50px;
color: #fff;
right: 50px;
bottom: 0;
}
.fs-menu {
background: url(http://webanfarwol.ru/IMG5/fen-shuy-bg.png) 0% -2px no-repeat transparent;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
padding: 0 !important;
margin: 0 100px !important;
list-style: none;
overflow: hidden;
height: 196px;
}
.fs-menu li {
position: relative;
border-radius: 100px;
text-align: center;
float: left;
height: 100%;
width: 120px;
}
.fs-menu li a {
display: block;
position: relative;
background: #000000;
border-radius: 120px;
border: 2px solid #ffffff;
color: #ffffff;
font: normal normal 13px/100px Tahoma;
text-decoration: none;
overflow: hidden;
margin: 50px 10px;
height: 100px;
width: 100px;
word-wrap: break-word;
}
.fs-menu li a:hover {
background: #ffffff;
margin: 20px -18px;
font: normal normal 16px/150px Tahoma;
padding: 1px 2px 1px 2px;
color: #000000;
border: 2px solid #000000;
z-index: 2;
height: 150px;
width: 150px;
}
.menu-title {
display: block;
position: absolute;
top: -18px;
right: 100%;
background: #FFF;
border: 1px solid #CCC;
text-align: center;
font: normal normal 16px sans-serif;
opacity: .4;
padding: 10px 0 0 0;
height: 80px;
width: 20px;
word-wrap: break-word;
}
.menu-title:before,
.menu-title:after {
content: '';
position: absolute;
right: 0;
border-radius: 1px;
border-width: 10px 10px;
border-style: solid;
}
.menu-title:after{
top: 90px;
border-color: #FFF transparent transparent transparent;
}
.menu-title:before {
top: 91px;
border-color: #CCC transparent transparent transparent;
}
.fen-shuy:hover .menu-title {
opacity: 0;
}
.close-fs {
display: none;
position: absolute;
top: 10px;
right: 110px;
background: #FFF;
border: 1px solid #666;
border-radius: 2px;
font: normal normal 12px/14px Comic Sans MS;
text-align: center;
color: #666;
cursor:pointer;
height: 14px;
width: 13px;
}
.close-fs:hover {
color:#C00;
}
.fen-shuy:hover .menu-title {
opacity: 0;
}
.fen-shuy {
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
transition: all 1s ease-in;
}
.fs-menu li a,
.menu-title {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

<div class='menu-block'>
<div class='fen-shuy'>
<span class='menu-title'>М<br>Е<br>Н<br>ю</span>
<ul class='fs-menu'>
<li><a href="#">Главная</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Файлы</a></li>
<li><a href="#">Фото</a></li>
<li><a href="#">Форум</a></li>
</ul>
</div>