The <li> menu is divided into columns and rows that do not work when opening the <ul> submenu

Question

I have a problem that made me bananas all day ...

I have a group of <li> menu items, one of which opens the <ul> submenu. The problem is that I cannot make the surrounding <li> behave and take into account the submenu when repositioning itself.

Demo (click "MISC"): http://jsfiddle.net/6a3eZ/

How it MUST behave (I can only make it work correctly when the dropdown menu item is in the third column): http://jsfiddle.net/6a3eZ/3/

Here is my CSS:

 #menu { position:fixed; width:303px; margin: 62px 10px 0 0; padding:0; z-index:9999; right:0; background:#EFEFEF; display:visible; -moz-box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.55); -webkit-box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.55); box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.55); } .menu-active { display:block !important; } .menu { text-align:center; padding:0; margin:0; } .menu a { height:100px; color:#999; padding: 0; margin: 0 1px 1px 0; display:block; font-family:'Montserrat',arial,tahoma,verdana; font-weight: 700; cursor:pointer; background:#fff; } .menu a:hover, .menu a:active { color:#fff; background:#999; text-decoration:none; } .menu ul { } .menu li { float:left; list-style:none; margin:0; padding:0; z-index:-1; width:100px; } .menu li:first-child { border-top:none !important; } .menu li a { font-size:10px; } ul.sub-menu { list-style: none; margin:0 0 0 0; padding:0; width:300px; } .second ul.sub-menu { margin:0 0 0 -100px; } .sub-menu li { heigh:100px; float:left; list-style: none; margin:0; padding:0; background:red; width:100px; } .sub-menu a { display:block; color:#888; margin:0; padding:0; height:100px; } .menu li.sub a { background: url(images/menu-expandable.png); background-position: right center; background-repeat: no-repeat; } /* Retina display .menu li.sub a */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { .menu li.sub a { background: url(images/ [e-mail] ); background-position: right center; background-repeat: no-repeat; background-size: 18px 7px; } } .menu li.sub a:hover { } .menu li.sub > ul a { background-image: none; font-size:10px; } 

Answer 1

http://jsfiddle.net/cornelas/6a3eZ/8/

Animation is still a problem, but I'm sure you can fix it since you wrote it, but that will fix your css problem.

 #menu { background: none repeat scroll 0 0 #EFEFEF; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.55); display: block; margin: 62px 10px 0 0; padding: 0; right: 0; width: 303px; z-index: 9999; } .menu01 { width: 310px; } .menu { margin: 0; padding: 0; text-align: center; } .menu li { display: inline-block; list-style: none outside none; margin: 0; padding: 0; width: 100px; z-index: -1; } 

Answer 2

I would do it like this:

HTML:

 <style> *{margin:0; padding:0;} ul{list-style:none; width: 408px;} li{float:left; width:100px; height: 100px; font-family:tahoma; text-align:center; line-height:100px; border:1px solid #ccc; margin:1px;} ul ul{display:none;} #item3{background: #eee;} .sub{background: #cee;} </style> <ul id="nav"> <li id="1">One <ul><li>sub a</li><li>sub b</li><li>sub c</li></ul></li> <li id="2">Two <ul><li>sub d</li><li>sub e</li><li>sub f</li></ul></li> <li id="3">Three <ul><li>sub e</li><li>sub f</li><li>sub g</li></ul></li> <li id="4">Four <ul><li>sub h</li><li>sub i</li><li>sub j</li></ul></li> <li id="5">Five <ul><li>sub k</li><li>sub k</li><li>sub l</li></ul></li> <li id="6">Six <ul><li>sub m</li><li>sub n</li><li>sub o</li></ul></li> </ul> 

JS:

 $(function(){ $('#nav > li').on('click', function(){ // console.log('click'); var id = $(this).attr('id'); is_new = true; if($('.sub').length){ is_new = ($('.sub').first().attr('data-parent') !== id); $('.sub').remove(); } if(is_new){ var $sub = $(this).children('ul').clone(); var index = Math.floor($(this).index() / 3) * 3; var after = $('#nav > li').eq(index+2); $sub.children('li').addClass('sub').attr('data-parent', id).insertAfter(after); } }); }); 

Example: http://jsfiddle.net/justincook/6a3eZ/7/

Answer 3

Add .sub-menu to this class.

 element.style { display: block; position: absolute; visibility: visible; } 

This will give you the results you are looking for.