dropdown menu problem

by xiaomah01 Thu 15 Dec 2011 - 13:01

my dropdown menu before loading complete,will display not parallel

like this:
dropdown menu problem 3qxbI

after loading complete is ok.
like this:
dropdown menu problem L6BL0

i want to ask how can set tie
log in direct show menu like picture 2 ?

my css:

Code:: <head> <style type="text/css"> /* common styling */ .menu {position:relative; margin:0; font-size:15px; margin:30px 0;display:} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000000;width:102px; height:20px; text-align:center; color:#000000; border:1px solid #000000; background:#CEE9F0; line-height:20px; font-size:14px; overflow:hidden; border-radius:2px;} .menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; margin-right:1px; position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#36f;} .menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} .menu ul li:hover ul li a.hide {background:#CEE9F0; color:#000;} .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:#ddd; color:#000;} .menu ul li:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} .menu ul li:hover ul li:hover ul.left {left:-105px;} </style>  </head>

by Guest Thu 15 Dec 2011 - 14:10

What do you mean by "before loading complete"? Which loading? Smile

by xiaomah01 Thu 15 Dec 2011 - 15:22

Gassy wrote:What do you mean by "before loading complete"? Which loading?

"loading" i can't find anyway to explain... scratch

just like this:
dropdown menu problem LtuEN

my problem appears in loading mode~
menu bal is no fix...

then loading is complete,the bal will be fix,ok

or u can go my site see,u will understand
can refresh to see problem(menu bal)

by Guest Thu 15 Dec 2011 - 15:29

Try to add in your CSS Stylesheet:

Code:: div.menu, div.menu ul, div.menu ul li{ display: inline !important; }

by xiaomah01 Thu 15 Dec 2011 - 15:35

Gassy wrote:Try to add in your CSS Stylesheet:
Code:
div.menu, div.menu ul, div.menu ul li{ display: inline !important; }

become like this:
dropdown menu problem WpNsi

ps:they have many sub menu

by Guest Thu 15 Dec 2011 - 15:36

Okay. Delete that and add this:

Code:: div.menu, div.menu ul{ display: inline !important; }

or:

Code:: div.menu{ display: inline !important; }

by xiaomah01 Thu 15 Dec 2011 - 15:45

Okay. Delete that and add this:
Code:
div.menu, div.menu ul{ display: inline !important; }

this is same problem

Spoiler:

or:
Code:
div.menu{ display: inline !important; }

this nothing to display... scratch

by blindbat1457 Thu 15 Dec 2011 - 17:43

Well the only way to solve the problem is to make less buttons or make them smaller.

The problem you are having is your buttons width's exceed that of which the page with is, also take into account padding/borders.

You can either go and make your buttons smaller by changing the width's/padding or getting rid of some. An alternative method is combining the similar ones into a drop down navbar.

by Nera. Thu 15 Dec 2011 - 17:56

Code:: .menu ul li a, .menu ul li a:visited { width: 70px !important; }

by xiaomah01 Thu 15 Dec 2011 - 19:38

Nera. wrote:
Code:
.menu ul li a, .menu ul li a:visited { width: 70px !important; }

i adjust width: 102px
it's is same problem~
before loading complete,will display not parallel

Spoiler:

after loading complete is ok

Spoiler:

nevermind i find another way to solved it

thanks nera~

by xiaomah01 Thu 15 Dec 2011 - 19:42

blindbat1457 wrote:Well the only way to solve the problem is to make less buttons or make them smaller.

The problem you are having is your buttons width's exceed that of which the page with is, also take into account padding/borders.

You can either go and make your buttons smaller by changing the width's/padding or getting rid of some. An alternative method is combining the similar ones into a drop down navbar.

ok thanks~maybe i will make less button to solved it~thanks for suggestion Hello