jquery - Secondary Menu Drop Down Styling -

i have responsive menu setup, when @ desktop size secondary drop list hidden until hover on main nav lists.

i have added onto fiddle here:https://jsfiddle.net/4ewrrbxb/ secondary menu sit right of main menu, outside main white box.

i know simple, cannot seem working.

any great

lee

my html is:

<div class="nav-wrap">  <nav id="nav-main">             <ul>           <li><a href="index.php">home</a></li>           <li><a href="products.php">products</a></li>             <ul>               <li>product one</li>               <li>product two</li>               <li>product three</li>             </ul>           <li><a href="trade-processing.php">trade processing</a></li>             </ul>         </nav>          <div id="nav-trigger">             <span>menu</span>         </div>         <!--close trigger-->          <nav id="nav-mobile"></nav>     <!--close trigger-->    </div> 

my css:

/* menu wrappers */  .nav-wrap {     position:fixed;     top:0px;     left:0px;     width:150px;     padding:25px;     background: #ffffff;     z-index:2;     height: 100%;      -webkit-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.5);     -moz-box-shadow:    0px 0px 4px 0px rgba(50, 50, 50, 0.5);     box-shadow:         0px 0px 4px 0px rgba(50, 50, 50, 0.5); }   /* =nav -------------------------------------------------------------- */ #nav-trigger {   display: none;   text-align: center; }  #nav-trigger span {     display:inline-block;     width:auto;     height:40px;     border:0px;     padding:0px 15px;      font-family: 'montserratregular';     font-size:16px;     line-height:40px;     color:#363940;      background-color:#e8eaec;     cursor:pointer;      position:absolute;     bottom:23px;     right:25px;       transition: .15s ease-in-out;     -moz-transition: .15s ease-in-out;     -webkit-transition: .15s ease-in-out; }  #nav-trigger span:before {     background-image: url('../images/trigger.svg');     content:"";     padding-right: 10px;     padding-left: 12px;     background-position: left center;     background-size: 16px 13px;     background-repeat: no-repeat; }  nav {     height:auto;     width:auto;     display:inline-block;      font-family: 'montserratlight';     font-size:14px;     line-height:45px;     color:#363940; }  nav#nav-main {     padding: 0px;     height:auto; }  nav#nav-main ul {     list-style-type: none;     margin: 0;     padding: 0;     margin-bottom:10px; }  nav#nav-main li {     display: inline-block;     width:100%; }  nav#nav-main li:last-child {     border-right: none;     margin-top:20px; }  nav#nav-main {     display: block;     width:100%;     height:45px;     text-decoration:none;     cursor: pointer;     color:#363940;      display: inline-block;     vertical-align: middle;     -webkit-transform: translatez(0);     transform: translatez(0);     box-shadow: 0 0 1px rgba(0, 0, 0, 0);     -webkit-backface-visibility: hidden;     backface-visibility: hidden;     -moz-osx-font-smoothing: grayscale;     position: relative;     overflow: hidden; }  nav#nav-main a:before {   content: "";   position: absolute;   z-index: -1;   left: 0;   right: 100%;   bottom: 0;   background: #e5502f;   height: 2px;   -webkit-transition-property: right;   transition-property: right;   -webkit-transition-duration: 0.4s;   transition-duration: 0.4s;   -webkit-transition-timing-function: ease-out;   transition-timing-function: ease-out; } nav#nav-main a:hover:before, nav#nav-main a:focus:before, nav#nav-main a:active:before {   right: 0; }  nav#nav-main a:hover {     cursor: pointer;     color:#363940; }  nav#nav-mobile {     position: relative;     display: none; }  nav#nav-mobile ul {     display: none;     list-style-type: none;     position: absolute;     top:155px;     left: 0;     right: 0;     margin-left: auto;     margin-right: auto;     text-align: center;     background-color:#e8eaec;     overflow:hidden;      font-family: 'montserratlight';     font-size:15px;     line-height:45px;     color:#363940; }  nav#nav-mobile li {     display: block;     border-bottom: solid 1px #ffffff;     height:50px;     line-height:50px; }  nav#nav-mobile li:last-child {       border-bottom: none; }  nav#nav-mobile {     display: block;     color:#000000;     height:50px;     text-decoration:none;   }  nav#nav-mobile a:hover {     background-color:#e5502f;     color:#ffffff; }  /* =media queries -------------------------------------------------------------- */ @media screen , (max-width: 768px) {  .nav-wrap {     position:relative;     top:auto;     left:auto;     width:100%;     padding:0%;     height:155px; }  .nav-wrap img {     display:inline-block;     vertical-align:top;     width:150px;     height:auto;     position:absolute;     top:25px;     left:25px;  }  .phone {     display:inline-block;     position:absolute;     top:23px;     right:25px;     margin-bottom:14px;     letter-spacing:1px;     text-align:right;      font-family: 'montserratregular';     font-size:23px;     line-height:30px;     color:#e5502f; }  .nav-wrap input {     height:49px;     border-bottom:0px solid #d5d8db;     padding-left:15%;      background: url(../images/search-icon.svg) no-repeat 15px 15px;     background-position:10px 18px;      transition: .15s ease-in-out;     -moz-transition: .15s ease-in-out;     -webkit-transition: .15s ease-in-out; }  .nav-wrap input:focus {     width:85%;     padding-left:15%;     background-position:10px 18px;     background-color:#ffffff; }   #nav-trigger {     display: inline-block; }  nav#nav-main {     display: none; }  nav#nav-mobile {     display: block; }  .stockist-nav, .supplier-nav {     display:none; }     #search-button {     display:none; }  #mobile-search {     display:inline;     position:absolute;     bottom:0px;     right:0px;      width:35%;     height:50px;     background-color:#c8df55;     outline:none;     border:0px;      font-family: 'montserratlight';     font-size:15px;     color:#363940;     z-index:9999; }   /* =media queries -------------------------------------------------------------- */ @media screen , (max-width: 480px) {  .nav-inner  {   max-width:100%; }   .abovenav-wrapper h3 {   display:none; }  } 

my js:

$(document).ready(function(){     $("#nav-mobile").html($("#nav-main").html());     $("#nav-trigger span").click(function(){         if ($("nav#nav-mobile ul").hasclass("expanded")) {             $("nav#nav-mobile ul.expanded").removeclass("expanded").slideup(400);             $(this).removeclass("open");         } else {             $("nav#nav-mobile ul").addclass("expanded").slidedown(400);             $(this).addclass("open");         }     }); }); 

first of all, second level ul should placed inside first level li. markup should this:

<ul>    <li><a href="#">home</a></li>    <li><a href="#">products</a>       <ul>          <li><a href="#">product one</a></li>          <li><a href="#">product two</a></li>       </ul>    </li>    <li><a href="#">trade processing</a></li> </ul> 

then add following css in order display level 2 on hover:

li > ul {    display: none; }  li:hover > ul {    display: block; } 

to display second level right first, add absolute position it:

li {    position: relative; }  li > ul {    position: absolute;    top: 0;    left: 100%; }