Estoy trabajando con mi propio proyecto para construir una hoja de estilo (CSS) como lo hace bootstrap. Sin embargo, trato de usar soloCSS PURO - sin javascript ni jquery incluso flash Para hacer eso.

Ahora, tengo problemas con el menú desplegable del menú animado cuando se cambia el tamaño de la versión móvil.

Lo que quiero es:

primero, Cuando el navegador cambia de tamaño a menos de 768 y 480 o (55%), aparece el menú de círculo animado, animando y el Menú está oculto. Después de eso, al pasar el mouse (<div class="acn-menu"></div>), el menú del círculo animado se ejecuta nuevamente. Cuando el usuario hace clic o toca el menú del círculo animado, el menú del círculo animado se detiene y aparece el menú desplegable y empuja el contenido debajo de él sin barra de desplazamiento al mismo tiempo que el círculo animado retrocede y se detiene.

Segundo, Cómo ser compatible con todos los navegadores (incluso, en IE).

Esto es lo que he hecho más de una semana: (Perdón por mi mal inglés): acabo de subir la muestra en este sitio a continuación:

ManifestaciónEl menú desplegable

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-->

HOJA DE ESTILO

<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>

¡Cualquier ayuda será genial!