Salve!

Ho intenzione di mettere nel mio sito un menu in CSS3 ed HTML5 utilizzando i due diversi linguaggi di codice. Il problema è che il menù non viene visualizzato bene e non so dove può essere l'errore! Lo provo su Dreamweaver e funziona perfettamente, ma se cerco di farlo funziona su Website o mi sballa il footer, o sposta il margine dell'header, e in ogni caso non mi fa cliccare le voci del sottomenù... Chi può aiutarmi?! Vi allego i codici

Premetto che nel mio spazio web ho hostato il file javascript e css che ho scaricato da internet (file .css ovviamente modificato)

CODICE CSS3 - PRIMA DELLA CHIUSURA DEL TAG HEAD

<style media="" data-href="http://www.miosito.it/.../flatnav.css">

* {
margin: 0;
padding: 0;
}

.nav {
background: black;
height: 60px;
width: auto
display: inline-block;
border-bottom: 3px solid #f9ff01;
}

.nav li {
float: left;
list-style-type: none;
position: relative;
}

.nav li a {
font-size: 32px;
color: white;
display: block;
line-height: 60px;
padding: 0 50px;
border-right: 1px solid #2e2e2e;
text-decoration: none;
font-family: "PF Din Text Comp Pro Light";
text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

.nav li a:hover {
font-size:32px;
color: black;
display: block;
line-height: 60px;
padding: 0 50px;
text-decoration: none;
background-color: #f9ff01;
border-right: 1px solid #f9ff01;
font-family: "PF Din Text Comp Pro Light";
text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
-webkit-transition: 0.30s;
-moz-transition: 0.30s;
-o-transition: 0.30s;
transition: 0.30s;
-webkit-backface-visibility: hidden;
}

#home a {
background: black url(http://www.miosito.it/.../file.png) center no-repeat;
padding: 0 35px;
height: 60px;
font-size: 10px;
line-height: 24px;
}

#home a:hover {
background: #f9ff01 url(http://www.miosito.it/.../file2.png) center no-repeat;
padding 0 35px;
height: 60px;
font-size: 10px;
line-height: 24px;
}

#search {
width: 357px;
margin: 4px;
}

#search_text{
width: 250px;
padding: 15px 0 15px 20px;
font-size: 24px;
font-family: "PF Din Text Comp Pro Light";
border: 0 none;
height: 52px;
margin-right: 0;
color: black;
outline: none;
background: #f9ff01;
float: left;
box-sizing: border-box;
-webkit-transition: 0.30s;
-moz-transition: 0.30s;
-o-transition: 0.30s;
transition: 0.30s;
-webkit-backface-visibility: hidden;
}

::-webkit-input-placeholder { /* WebKit browsers */
color: black;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: black;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: black;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: black;
}

#search_text:focus {
background: #fcfe95;
}

#search_button {
border: 0 none;
background: #f9ff01 url(http://www.miosito.it/.../file3.png) center no-repeat;
width: 60px;
float: left;
padding: 0;
text-align: center;
height: 52px;
cursor: pointer;
}

#dropdown a{
border-right: 1px inherit #2e2e2e;
}

#dropdown>a {
background-image: url(http://www.miosito.it/.../file4.png);
background-position: 85% center;
background-repeat: no-repeat;
padding-right: 50px;
}

#dropdown>a:hover {
background-image: url(http://www.miosito.it/.../file5.png);
background-position: 85% center;
background-repeat: no-repeat;
padding-right: 50px;
}

.subnav {
visibility: hidden;
position: static;
top: 110%;
right: 0;
width: auto;
height: auto;
opacity: 0;
transition: all 0.1s;
background: black;
-webkit-transition: 0.30s;
-moz-transition: 0.30s;
-o-transition: 0.30s;
transition: 0.30s;
-webkit-backface-visibility: hidden;
}

.subnav li {
float: none;
}

.subnav li a {
border-top: 1px inherit #2e2e2e;
}

#dropdown:hover .subnav {
visibility: visible;
top: 100%;
opacity: 1;
}

#flatlove a {
background: black url(http://www.miosito.it/.../file6.png) center no-repeat;
padding: 0 100px;
height: 60px;
margin-left: -40px;
border-right:hidden;
-webkit-transition: 0.30s;
-moz-transition: 0.30s;
-o-transition: 0.30s;
transition: 0.30s;
-webkit-backface-visibility: hidden;
}

#flatlove a:hover {
background: black url(http://www.miosito.it/.../file7.png) center no-repeat;
padding 0 100px;
height: 60px;
margin-left: -40px;
border-right:hidden;
-webkit-transition: 0.30s;
-moz-transition: 0.30s;
-o-transition: 0.30s;
transition: 0.30s;
-webkit-backface-visibility: hidden;
}

<meta name="robots" content="noindex,follow">

CODICE HTML5 - PROPRIETA DEL TAG BODY

<ul class="nav">
<li id="home">
<a href="#"></a>
</li>
<li>
<a href="#">PAGINA</a>
</li>
<li id="dropdown">
<a href="#">SUBMENU</a>
<ul class="subnav">
<li><a href="#">PAGINA</a></li>
<li><a href="#">PAGINA</a></li>
<li><a href="#">PAGINA</a></li>
<li><a href="#">PAGINA</a></li>
</ul>
</li><li>
<a href="#">PAGINA</a>
</li>
<li>
<a href="#">PAGINA</a>
</li>
<li>
<a href="#">PAGINA</a>
</li>
<li id="dropdown">
<a href="#">SUBMENU</a>
<ul class="subnav">
<li><a href="#">PAGINA</a></li>
<li><a href="#">PAGINA</a></li>
</ul>
</li><li id="search">
<form action="" method="get">
<input type="text" name="search_text" id="search_text" placeholder="Cerca...">
<input type="button" name="search_button" id="search_button">
</form>
</li>
<li id="flatlove">
<a href=""></a>
</li>

</ul>

<script src="httP://www.miosito.it/.../prefixfree-1.0.7.js" type="text/javascript"></script>

Vi prego aiutatemi, please!

Grazie in anticipo