The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

dropdown menu problem

View previous topic View next topic Go down

Solved dropdown menu problem

Post by xiaomah01 on December 15th 2011, 1:01 pm

my dropdown menu before loading complete,will display not parallel

like this:


after loading complete is ok.
like this:




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>
<!--[if lte IE 6]>
<style type="text/css">
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}
  </style>
<![endif]-->
</head>


Last edited by xiaomah01 on December 15th 2011, 7:43 pm; edited 1 time in total

xiaomah01
Forumember

Male Posts : 206
Reputation : 7
Language : English|Chinese|malay
Location : malaysia

http://johor.forumn.org/

Back to top Go down

Solved Re: dropdown menu problem

Post by Guest on December 15th 2011, 2:10 pm

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

Guest
Guest


Back to top Go down

Solved Re: dropdown menu problem

Post by xiaomah01 on December 15th 2011, 3:22 pm

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


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

just like this:





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)

xiaomah01
Forumember

Male Posts : 206
Reputation : 7
Language : English|Chinese|malay
Location : malaysia

http://johor.forumn.org/

Back to top Go down

Solved Re: dropdown menu problem

Post by Guest on December 15th 2011, 3:29 pm

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

Guest
Guest


Back to top Go down

Solved Re: dropdown menu problem

Post by xiaomah01 on December 15th 2011, 3:35 pm

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:


ps:they have many sub menu

xiaomah01
Forumember

Male Posts : 206
Reputation : 7
Language : English|Chinese|malay
Location : malaysia

http://johor.forumn.org/

Back to top Go down

Solved Re: dropdown menu problem

Post by Guest on December 15th 2011, 3:36 pm

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

Guest
Guest


Back to top Go down

Solved Re: dropdown menu problem

Post by xiaomah01 on December 15th 2011, 3:45 pm

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


xiaomah01
Forumember

Male Posts : 206
Reputation : 7
Language : English|Chinese|malay
Location : malaysia

http://johor.forumn.org/

Back to top Go down

Solved Re: dropdown menu problem

Post by blindbat1457 on December 15th 2011, 5:43 pm

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.

blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Solved Re: dropdown menu problem

Post by Nera. on December 15th 2011, 5:56 pm

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


Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: dropdown menu problem

Post by xiaomah01 on December 15th 2011, 7:38 pm

@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:

scratch

nevermind i find another way to solved it

thanks nera~


xiaomah01
Forumember

Male Posts : 206
Reputation : 7
Language : English|Chinese|malay
Location : malaysia

http://johor.forumn.org/

Back to top Go down

Solved Re: dropdown menu problem

Post by xiaomah01 on December 15th 2011, 7:42 pm

@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

xiaomah01
Forumember

Male Posts : 206
Reputation : 7
Language : English|Chinese|malay
Location : malaysia

http://johor.forumn.org/

Back to top Go down

Solved Re: dropdown menu problem

Post by blindbat1457 on December 15th 2011, 8:05 pm

No worries. There are plenty of ways to fix long navigation Smile

blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Solved Re: dropdown menu problem

Post by Sanket on December 16th 2011, 6:02 am

Topic Solved & Locked

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum