Geek asks and answers

How to center the dropdown menu under parent tab?

I have the following CSS / HTML setup http://jsfiddle.net/UDAUY/

How to align the dropdown menu to center yourself under the parent tab as shown

| MENU 1 | MENU 2 | MENU 3 | MENU 4 |
-------------------------------------
    | Field 1 | Field 2 |
    ---------------------

instead of this,

| MENU 1 | MENU 2 | MENU 3 | MENU 4 |
-------------------------------------
         | Field 1 | Field 2 |
         ---------------------

what it looks like now. Also, is it possible to adjust the width of the ul container submenu for dynamic configuration? Right now I set it to an arbitrarily high value that works for almost all purposes, but I would like to know if this is possible.

EDIT

. CSS ( JS) , . , ( . 2 4 ).

+3
6

css, "" .

http://jsfiddle.net/gNanu/

, : . , . , - .

Edit:

, , , css. http://jsfiddle.net/gNanu/4/

, - .

+4

http://pmob.co.uk/pob/centred-float.htm

( display: inline text-align: center; , )

+1

:

#menu .submenu {
    position: absolute;
    display: none;
    top: 19pt;
    left: -25%;
    width:300%;
    margin: auto;
}

, - . , , ...

0

...

menu {text-align:center}
fieldwrapper {margin:0 auto;}
field {}
0
#menu .submenu {
position: absolute;
display: none;
top: 19pt;
width:300%;
margin: auto;
left: -100%;
text-align:center;
}

.submenu li {
background-color: #000;
margin-right: 1.5%;
padding-right: 3%;
padding-left: 3%;
margin: 0 auto;
display: inline-block;
}

. , , , ... .

0

The parent must be a relative position, an absolute child, then the child must be inside the parent. Cotrolling child top:(the top should contain the parent height) and left:you can control it. If you want to concentrate, you will need to use: top: [parentheight]; left: 0;Hope this helps :)

-1
source

More articles:


All Articles