Я работаю со своим собственным проектом по созданию таблицы стилей (CSS), как это делает загрузчик. Однако я стараюсь использовать толькоЧистый CSS - нет JavaScript или JQuery даже Flash сделать это.

Теперь у меня возникли проблемы с выпадающим меню анимированных меню при небольшом изменении размера, как у мобильной версии.

Что я хочу это:

Первый, Когда размер браузера меньше 768 и 480 или (55%), появляется меню анимированного круга, анимация и меню скрываются. После этого при наведении (<div class="acn-menu"></div>), меню анимированного круга снова запускается. Когда пользователь щелкает или касается меню анимированных кружков, меню анимированных кружков останавливается, и появляется раскрывающееся меню и одновременно нажимает на содержимое под ним без полосы прокрутки, когда анимированный кружок откатывается и останавливается.

второйКак быть совместимым со всеми браузерами (даже в IE).

Вот что я сделал больше недели: (Извините за мой плохой английский): Я только что загрузил образец на этом сайте ниже:

демонстрацияВыпадающее меню

HTML:

<header>
<div id="acn-border"></div><div class="acn-title"><a href="#">
<h1>Appacyber</h1></a></div>
    <div class="menu-container">
        <div class="acn-menu"></div>
            <nav>
                <ul class="main-menu">
                    <li><a href="#" class="home"><span class="fa 
fa-home"></span> Home</a></li>
                    <li><a href="#">Produk <span class="fa fa-caret-
down"></span> </a>
                        <ul class="sub-menu">
                            <li><a href="#">Desain Website</a></li>
                            <li><a href="#">Desain/Edit CMS</a></li>
                            <li><a href="#">Order Template Blogspot</a></li>
                        </ul>
                    </li>
                    <li><a class="dropdown" href="#">Pembayaran <span 
class="fa fa-caret-down"></span> </a>
                        <ul class="sub-menu">
                            <li><a href="#">Via Transfer Bank</a></li>
                            <li><a href="#">Via Pulsa</a></li>
                            <li><a href="#">Via Paypal</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Order</a></li>
                    <li><a href="#">Contact</a></li>
                    <input type="text" class="input-acn-search" 
placeholder="search ..."/><button type="button" class="btn-search">&
gt;</button>
                </ul>
            </nav>

    </div>
</header>

<!--here the content to be pushed when the screen in small rezise-->

STYLESHEET:

<style>
.input-acn-search{
border:1px solid #979797;
padding:7px 34px 7px 7px;
font-size:14px;
font-weight:400;
color:#111;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:7px 0px 0px 10px;
}
.btn-search{
background:#006666;
color:#fff;
border:0px;
font-size:18px;
margin:0px 0px 0px -30px;
-webkit-border-radius:17px;
-moz-border-radius:17px;
border-radius:17px;
border:0px;
min-width:5%;
}
.input-acn-search:hover{
background:#fff;
border:1px solid #979797;
}
.input-acn-search placeholder{
color:#666666;
}
.acn-title{
margin:0px;
height:45px;
padding:0px 25px 0px 25px;
background:#FF9900;
line-height:normal;
vertical-align:middle;
display:table-cell!important;
}
.menu-container{
width:100%;
margin:0px;
height:45px;
padding:0px;
background:#222222;
line-height:normal;
vertical-align:middle;
display:table-cell!important;
}
.acn-title a,.acn-title a h1{
color:#FFFFFF;
font-size:19px;
font-weight:500;
font-style:normal;
font-size-adjust:inherit;
}
.acn-title a:hover,.acn-title a:hover h1{
color:#999;
}
#acn-border{
position:absolute;
width:20px;
height:20px;
border-top:17px solid transparent;
border-left:21px solid #FF9900;
border-bottom:17px solid transparent;
display:table-cell;
margin-top:7px;
margin-left:140px;
z-index:1;
}
ul,li,ul li{
list-style:none;
list-style-image:none;
background:none;
}
/*------menu-------*/
nav ul.main-menu li a{
color:#fff;
}
.home a{
background:#9966CC;
color:#e0e0e0;
-webkit-border-radius:0px 37px 37px 0px;
border-radius:0px 37px 37px 0px;
}
nav ul {
-webkit-font-smoothing:antialiased;
background:#222222;
margin:0;
padding:0;
height:45px;
}
nav li {
float:left;
margin:0;
padding:0;
position:relative;
min-width:110px;
}
nav a {
background:none;
display:block;
font:normal 14px/50px Ubuntu;
padding:0 25px;
text-align:center;
text-decoration: none;
}
li a{
color:#e0e0e0;
background:none;
}
nav li:hover a {
background:#000;
color:#e0e0e0;
}
nav li ul {
float:left;
left:0;
opacity:0.5;
position:absolute;
top:35px;
visibility:hidden;
z-index:1;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
nav li:hover ul {
opacity:1;
top:50px;
visibility:visible;
}
nav li ul li {
float:none;
width:100%;
}
nav li ul a:hover {
background:#666666;
color:#fff;
}
ul.sub-menu{
min-width:180px;
max-width:100%;
}
ul.sub-menu li:hover{
background-color:#000;
color:#fff;
border:0px;
border:none;
}

@media screen and (max-width:55%){/*bila screen maksimum 55% atau sama dengan #bingkai-mini*/}
@media screen and (max-width:768px) and (max-width:480px) {

    .acn-menu{
    display:block;
    visibility:visible;
    width:37px;
    height:37px;
    margin-top:0px;
    margin-right:17px;
    margin-left:17px;
    background:none;
    border:10px inset #428BCA;
    -webkit-transform:rotate(-180deg);
    -moz-transform:rotate(-180deg);
    -o-transform:rotate(-180deg);
    transform:rotate(-180deg);
    -webkit-transition-duration:2s;
    -moz-transition-duration:2s;
    -o-transition-duration:2s;
    transition-duration:2s;
    -webkit-border-radius:50%!important;
    -moz-border-radius:50%!important;
    -o-border-radius:50%!important;
    border-radius:50%!important;
    }
    .menu-container .acn-menu:hover{
    cursor:pointer;
    display:block;
    visibility:visible;
    width:37px;
    height:37px;
    margin-right:17px;
    margin-left:17px;
    background:none;
    border:10px inset #FF00FF;
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
    -webkit-transition-duration:2s;
    -moz-transition-duration:2s;
    -o-transition-duration:2s;
    transition-duration:2s;
    }
    .acn-title{
    width:100%;
    -webkit-border-radius:0px;
    border-radius:0px;
    position:relative;
    }
    .acn-border{
    display:none;
    }

/*---------------MENU------------------*/
    header{
    position:relative;
    }
    nav{
    position:absolute;
    right:0px;
    top:47px;
    width:100%;
    }
    .home a{
    background:#9966CC;
    color:#e0e0e0;
    -webkit-border-radius:0px;
    border-radius:0px;
    width:100%;
    }
    nav ul {
    -webkit-font-smoothing:antialiased;
    background:#222222;
    margin:0;
    padding:0;
    height:45px;
    }
    nav li {
    margin:0;
    padding:0;
    float:none!important;
    position:relative;
    text-align:right;
    background:#666666;
    }
    nav ul.main-menu li a{
    color:#fff;
    }
    nav a {
    background:none;
    display:block;
    font:normal 14px/50px Ubuntu;
    padding:0 25px;
    text-align:center;
    text-decoration: none;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    }
    li a{
    color:#e0e0e0;
    background:none;
    }
    nav li:hover a {
    background:#000;
    color:#e0e0e0;
    }
    nav li ul {
    float:left;
    left:0;
    position:absolute;
    top:35px;
    visibility:hidden;
    z-index:1;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    }
    nav li:hover ul {
    opacity:1;
    top:50px;
    visibility:visible;
    }
    nav li ul li {
    float:none;
    width:100%;
    }
    nav li ul a:hover {
    background:#666666;
    color:#fff;
    }
    ul.sub-menu{
    width:100%;
    min-width:0px;
    }
    ul.sub-menu li:hover{
    position:relative;
    background-color:#000;
    color:#fff;
    border:0px;
    border:none;
    }

}

</style>

Любая помощь будет отличной!