Center dynamically drops out of the main menu

Question

I want it to class="children"be centered in the middle of the page container, preferably using only css, but if that is not possible, you can provide a better js answer. This is currently just a normal drop, but I want to use it as a mega menu. If I need to add another div structure that will be fine.

<div class="main-navigation-wrapper">
    <div class="nav pull-left">
        <div class="menu-main-menu-container">
            <ul id="menu" class="menu no-dropdown">
                <li class="menu-item">
                    <a href="#">Blog</a>
                    <div class="children">
                        --- Children items are here
                    </div>
                 </li>
             </ul>
         </div>
    </div>
</div>

I saw several other examples, but tried several, and none of them focused it. I want to find a dynamic approach to where, regardless of the location of the link in the menu, it always centers the menu in the container.

EDIT: Fiddle found here http://jsfiddle.net/YzJ4h/

Answer 1

CSS :

CSS:

#menu li, .second-menu li {
    display:inline-block;
    position:relative;
}
#menu > li.mega_width {
    display:inline-block;
    position:static;
}
#menu > li.mega_width > .children {
    position:absolute;
    left:0;
    right:0;
    top:auto;
    margin:auto;
}

DEMO

Answer 2

:

<div class="main-navigation-wrapper">
    <div class="nav pull-left">
        <div class="menu-main-menu-container">
            <ul id="menu" class="menu no-dropdown" style="margin: auto;">
                <li class="menu-item">
                    <a href="#">Blog</a>
                    <div class="children">
                        --- Children items are here
                    </div>
                 </li>
             </ul>
         </div>
    </div>
</div>

Answer 3

50% div margin: 0 auto;

style="margin:0 auto;"

Answer 4

<div class="main-navigation-wrapper">
<div class="nav pull-left">
    <div class="menu-main-menu-container">
        <ul id="menu" class="menu no-dropdown" style="margin: auto;">
            <li class="menu-item four">
                <a href="#">Blog</a>
                <div class="children">
                    --- Children items are here
                </div>
             </li>
         </ul>
     </div>
</div>

Answer 5

, : http://jsfiddle.net/m8Vj4/

:

• position:absolute;/position:relative;

  position:absolute - position:relative. .children li, .main-navigation-wrapper

• display:inline-block;

  display:block, margin:0 auto, display:inline-block. text-align:center text-align:left , .

, ... HTML/CSS .

Answer 6

CSS . -

.main-navigation-wrapper{width: 1140px; margin: 0 auto; background: #E5F0FF;}
#menu{text-align:center; padding:0px; position:relative;}

#menu li.mega-three.fullwidth{position:static;}
#menu .mega-three div.children{left:0px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box;}

fiddle.

, .: -)

Answer 7

. , div, width: auto . , . .

.menu-main-menu-container ul#menu .children {
    left: 0;
    position: absolute;
    width: auto;
}

.menu-main-menu-container ul#menu .children:hover {
    visibility: visible;
}

.menu.no-dropdown {
    position: relative;
    position:static;
}

Change class

#menu li, .second-menu li{
    position:static;
}

For internal submenus inside child divs,

.menu-main-menu-container ul#menu .children .children {
    position: relative;
}

You can check it on the violin

http://jsfiddle.net/YzJ4h/4/