Очень нужно меню в стиле
http://delaisait.ucoz.ru/blog/kruglo...2012-06-09-156
Проблема в том, что в FireFox и Chrom все работает нормально, а в IE подменю не показываются.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Делай сайт | Круглое меню</title>
<style>
a.link {
color: #FFF;
font-weight: bold;
font-size: 14px;
text-decoration:none;
}
.dstormenu {
position: absolute;
background: #000;
color: #FFF;
height: 100px;
width: 180px;
border-radius: 90px;
top: 100px;
left:200px;
text-align: center;
padding-top: 80px;
font-weight: bold;
font-size: 14px;
}
.dstorsubmenu {
display: none;
position: absolute;
background: rgba(0,48,255,0.9);
height: 60px;
width: 100px;
border-radius: 50px;
padding-top: 40px;
font-size: 12px;
}
.dstormenu:hover {
background: rgba(0,48,255,0.9);
-moz-transition: all 1000ms ease;
-webkit-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
transition: all 1000ms ease;
}
.dstormenu:hover > .dstorsubmenu {
display: block;
-moz-animation: appear 500ms normal 1 ease;
-webkit-animation: appear 500ms normal 1 ease;
-o-animation: appear 500ms normal 1 ease;
-ms-animation: appear 500ms normal 1 ease;
animation: appear 500ms normal 1 ease;
}
@-moz-keyframes appear {
from {
-moz-transform: scale(0);
background: rgba(0,0,0,1);
}
to {
-moz-transform: scale(1);
background: rgba(0,48,255,0.9);
}
}
@-webkit-keyframes appear {
from {
-webkit-transform: scale(0);
background: rgba(0,0,0,1);
}
to {
-webkit-transform: scale(1);
background: rgba(0,48,255,0.9);
}
}
@-o-keyframes appear {
from {
-o-transform: scale(0);
background: rgba(0,0,0,1);
}
to {
-o-transform: scale(1);
background: rgba(0,48,255,0.9);
}
}
@-ms-keyframes appear {
from {
-ms-transform: scale(0);
background: rgba(0,0,0,1);
}
to {
-ms-transform: scale(1);
background: rgba(0,48,255,0.9);
}
}
@keyframes appear {
from {
transform: scale(0);
background: rgba(0,0,0,1);
}
to {
transform: scale(1);
background: rgba(0,48,255,0.9);
}
}
.m1 {
margin-left: -20px;
margin-top: -157px;
}
.m2 {
margin-left: 100px;
margin-top: -157px;
}
.m3 {
margin-left: -80px;
margin-top: -53px;
}
.m4 {
margin-left: 100px;
margin-top: 46px;
}
.m5 {
margin-left: -20px;
margin-top: 46px;
}
.m6 {
margin-left: 160px;
margin-top: -53px;
}
</style>
</head>
<body>
<div class="dstormenu">
Делай сайт
<div class="dstorsubmenu m1">
<a class="link" href="#">HTML5</a></div>
<div class="dstorsubmenu m2">
<a class="link" href="#">CSS3</a>
</div>
<div class="dstorsubmenu m3">
<a class="link" href="#">Скрипты</a>
</div>
<div class="dstorsubmenu m4">
<a class="link" href="#">Фоны</a>
</div>
<div class="dstorsubmenu m5">
<a class="link" href="#">Ресурсы</a>
</div>
<div class="dstorsubmenu m6">
<a class="link" href="#">Шаблоны</a>
</div>
</div>
</body>
</html>