The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
4 posters

    dropdown menu problem

    xiaomah01
    xiaomah01
    Forumember


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

    Solved dropdown menu problem

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

    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>
    <!--[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
    avatar
    Guest
    Guest


    Solved Re: dropdown menu problem

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

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


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

    Solved Re: dropdown menu problem

    Post by xiaomah01 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:
    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)
    avatar
    Guest
    Guest


    Solved Re: dropdown menu problem

    Post by Guest 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;
    }
    xiaomah01
    xiaomah01
    Forumember


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

    Solved Re: dropdown menu problem

    Post by xiaomah01 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:
    dropdown menu problem WpNsi

    ps:they have many sub menu
    avatar
    Guest
    Guest


    Solved Re: dropdown menu problem

    Post by Guest 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;
    }
    xiaomah01
    xiaomah01
    Forumember


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

    Solved Re: dropdown menu problem

    Post by xiaomah01 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

    blindbat1457
    blindbat1457
    Forumember


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

    Solved Re: dropdown menu problem

    Post by blindbat1457 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.
    Nera.
    Nera.
    Energetic


    Female Posts : 7078
    Reputation : 2017
    Language : English
    Location : -

    Solved Re: dropdown menu problem

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

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

    dropdown menu problem CZXu
    xiaomah01
    xiaomah01
    Forumember


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

    Solved Re: dropdown menu problem

    Post by xiaomah01 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
    xiaomah01
    Forumember


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

    Solved Re: dropdown menu problem

    Post by xiaomah01 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
    blindbat1457
    blindbat1457
    Forumember


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

    Solved Re: dropdown menu problem

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

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


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

    Solved Re: dropdown menu problem

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

    Topic Solved & Locked

      Current date/time is September 23rd 2024, 1:17 am