jquery - Drop Down CSS error -

i installed drop down menu buts it's not working. happens on other pages text below. causing , how can correct it?

i've been working om drop down menu thing while , decided i'm not able myself. i've googled many solutions , seen couple of youtube tutorials css drop down menus somehow work person in question not me.

fiddle

    .logo {        float: left;        background: #fff;        padding: 28px 29px 19px 30px;      }      .top-nav ul li {        display: inline-block;        float: left;      }      .top-nav ul li {        background: #fff;        float: none;        display: inline-block;        padding: 40px 47.6px;        letter-spacing: 2px;        text-transform: uppercase;        position: relative;        z-index: 1;        color: #32332e;        font-size: 0.875em;        transition: 0.5s ease;        -o-transition: 0.5s ease;        -webkit-transition: 0.5s ease;        margin: 0 -1px;        border-left: 1px solid #fff;        text-decoration: none;      }      .top-nav li.active> a,      .top-nav li> a:hover {        color: #fff;        background: #404642;      }      .top-nav {        float: right;        background: #fff;      }      .main-header {        margin-top: 16px;        background: #fff;      }

<div class="main-header">    <div class="logo">      <a href="index.html">        <img src="images/logo2.png" title="logo" />      </a>    </div>    <div class="top-nav">        <span class="menu"></span>      <ul>        <li class="active"><a href="index.html">home</a>        </li>        <li><a href="about.html">about</a>        </li>        <li><a href="projects.html">mission</a>        </li>        <li><a href="services.html">services</a>          <ul style="padding: 0;            position: absolute;            top: 48px;            left: 0;            width: 150px;            -webkit-box-shadow: none;            -moz-box-shadow: none;            box-shadow: none;            display: none;opacity: 0;            visibility: hidden;            -webkit-transiton: opacity 0.2s;            -moz-transition: opacity 0.2s;            -ms-transition: opacity 0.2s;            -o-transition: opacity 0.2s; -transition: opacity 0.2s;">            <li style=" background: #555;             display: block;             color: #fff;            text-shadow: 0 -1px 0 #000;"><a href='#'>product 1</a>            </li>            <li class='has-sub'><a href='#'>product 2</a>            </li>          </ul>        </li>        <li><a href="blog.html">blog</a>        </li>        <li><a href="contact.html">contact</a>        </li>        <div class="clearfix"></div>      </ul>    </div>    <div class="clearfix"></div>  </div>

you need remove css code inside child ul , add 2 css class in css file. here fiddle

.top-nav li:hover ul{         display:block ;     }     .top-nav li ul{         padding: 0;              position:absolute;        display:none;       width: 150px;       -webkit-box-shadow: none;       -moz-box-shadow: none;       box-shadow: none;       -webkit-transiton: opacity 0.2s;       -moz-transition: opacity 0.2s;       -ms-transition: opacity 0.2s;       -o-transition: opacity 0.2s; -transition: opacity 0.2s;      }