menu dropdown disappears and links are removed

I am creating a custom menu with drop downs however I am having some errors. In my fiddle it works just as it should, however in the website it does not. I dont see whats causing the errors though.

Here is the website: http://94co.com/client3/

Here is the code that I have so far.

HTML:

<div id="nav_menu-12" class="et_pb_widget widget_nav_menu">
<div class="menu-logged-in-container">
    <ul id="menu-logged-in" class="menu">                
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1483">
            <a href="http://94co.com/client3/domaine-de-gourjo/">Domaine de Gourjo</a>
                <ul class="sub-menu">
                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1403"><a href="/client3/about/#the-castle">The Castle</a></li>
                       <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1404"><a href="/client3/about/#the-vineyard">The Vineyard</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1405"><a href="/client3/about/#a-family-history">A Family History</a></li>
                </ul>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1487"><a href="http://94co.com/client3/wines/">Our Wines</a>
            <ul class="sub-menu">
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1498"><a href="/client3/wines/#domaine-gourjo-link">Domaines Wines</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1497"><a href="/client3/wines/#gourjo-link">Gourjo</a></li>
            </ul>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1401"><a href="http://94co.com/client3/store/">eCellar</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1629"><a href="http://94co.com/client3/gorgeous-mag/">Gorgeous Mag</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1402"><a href="http://94co.com/client3/contact-us/">Contact</a></li>
    </ul>
</div>

CSS:

#menu-logged-in li ul { position: absolute; top: 30px; left: -27px; padding: 20px; }
#menu-logged-in li ul { z-index: 9999; width: 100% !important; padding-left: 10px !important; background: none; visibility: hidden; opacity: 0; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
#menu-logged-in li:hover > ul { opacity: 1; visibility: visible; }
#menu-logged-in li li { padding: 0;font-size:14px;margin-left: 20px; width:170px;}
#menu-logged-in li li ul { z-index: 1000; top: -3px; left: 220px; }
#menu-logged-in li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }
.nav li li a, .et_mobile_menu li a { font-size: 14px; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
#menu-logged-in ul li a:hover { color: #ff0000; }
#menu-logged-in li a:hover { color: #ff0000; }
#menu-logged-in li.current-menu-item > a {
color: #b7b7b7 !important;
}

#menu-logged-in .menu-item-has-children > a:first-child:after {
content: ' ';
}

#menu-logged-in li {
display: inline-block;
font-size: 20px;
color:#a0a0a0;
position: relative; 
padding: 0 35px 0 35px; 
text-align: center;
}

Here is the fiddle: http://jsfiddle.net/elitedesignstudios/wR7PN/

As always any help figuring this out would be great.