4 replies [Last post]
nanacss
nanacss's picture
Offline
Enthusiast
Last seen: 6 years 30 weeks ago
Timezone: GMT+8
Joined: 2007-07-27
Posts: 107
Points: 22

hi there, i am working on a project, and then I need 3 boxes, which has drop down menu.

I used the suckerfish coding to achive it.

But I have some problems that I dunno how to solve.

Problems:

In firefox it looks great now, but in IE I can only see one box has drop down appear. The other two boxes the drop down cant show up. I guess this has to do with the javascripts?

At my ul there I only put one

bcos an id can only use one time in css, but what if I hav 3 boxes there that need the id? (right now I put one id there so only one drop down can show up.)

what should I do to solve this problem so that it works in IE?

Here's the direck link:

html link(the 3 pink boxes are the drop down part) css link(started at line 38)

Thanks in advance who ever help me.
I am totally no idea for javascripts things.

Thank you very much. ^^

真诚清静平等真觉慈悲,看破放下自在随缘念佛。
name: WEN YU
my blog: http://webwhalenews.com
my collection: http://gtoystage.com

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

That snippet of script is

That snippet of script is designed to work on id="nav" as you see, you can't have three separate id navs. Drop the javascript and use instead the csshover.htc approach to effect hover for IE6 and change your #navs to .navs

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

nanacss
nanacss's picture
Offline
Enthusiast
Last seen: 6 years 30 weeks ago
Timezone: GMT+8
Joined: 2007-07-27
Posts: 107
Points: 22

hi HUGO!!!! Thanks for the

hi HUGO!!!!

Thanks for the info!!!

After I removed the scripts and used the csshover.htc , it works nicely in IE!!!

Thanks for that!!!

hmm...but I have a small problem, which is in IE6 the when drop down, the next box
block it, I cant see the drop down, only the last one I can see, cos nothing block it.
previously it happens in Firefox too, but after I added the zindex, it is perfect in firefox, but still nothing change in IE6. (the text is like on top of the drop down but not background.)

I guess I dun have luck. Could you take a look with IE6?

Thank you very much!!!!

真诚清静平等真觉慈悲,看破放下自在随缘念佛。
name: WEN YU
my blog: http://webwhalenews.com
my collection: http://gtoystage.com

nanacss
nanacss's picture
Offline
Enthusiast
Last seen: 6 years 30 weeks ago
Timezone: GMT+8
Joined: 2007-07-27
Posts: 107
Points: 22

hmm.. my drop down is still

hmm..

my drop down is still behind of the second menu next to it..

any idea???

thanks in advance ^^

真诚清静平等真觉慈悲,看破放下自在随缘念佛。
name: WEN YU
my blog: http://webwhalenews.com
my collection: http://gtoystage.com

nanacss
nanacss's picture
Offline
Enthusiast
Last seen: 6 years 30 weeks ago
Timezone: GMT+8
Joined: 2007-07-27
Posts: 107
Points: 22

hi there,

hi there,
hmm..i still cannot fix the overite problems in my drop down..any idea? or guide?

really appreciate it for a reply ^^

thank you very much ^^

(code has deleted so is left only the problem part)
html:

Untitled Document






  • Air Conditioners

  • Refrigerators

    • a

    • b

  • c



  • Home Cinema Projectors

  • Fans






    • Building Solutions

    • Power Solutions

      • a

  • b

  • c



  • Visual Information Solutions

  • Printing Solutions






    • Industrial Automation Systems

      • a

      • b

  • c



  • Industrial Automation Machinery aa Fans Fans Fans




  • css:

    #main_h_box {
    margin: 5px 0 0 0;
    width: 609px;
    }
    .main_h_box_s {
    float: left;
    margin: 0 6px 0 0;
    width: 199px;
    background: pink;
    }

    .main_h_box_s ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    }

    .main_h_box_s li { /* all list items */
    float: left;
    position: relative;
    width: 199px;
    }
    .main_h_box_s li a {
    display: block;
    width: 169px; /* set width so there is a hit area in IE6 */
    padding: 5px 5px 5px 25px;
    background: url(../images/common/icon_small_circle.gif) 10px 10px no-repeat;
    }
    .main_h_box_s li a:hover {
    color: #fff;
    background: #d50000 url(../images/common/icon_small_circle_on.gif) 10px 10px no-repeat;
    }
    .main_h_box_s li ul { /* second-level lists */
    display: none;
    position: absolute;
    top: 0;
    left: 199px;
    width: 197px;
    background: #f0f0f0;
    border:1px solid #ccc;
    z-index: 100;
    }

    .main_h_box_s li ul li a {
    display: block;
    color: #333;
    width: 169px; /* set witdth so there is a hit area in IE6 */
    background: url(../images/common/icon_small_arrow.gif) 10px 10px no-repeat;

    }
    .main_h_box_s li ul li a:hover {
    color: #333;
    background: #ccc url(../images/common/icon_small_arrow.gif) 10px 10px no-repeat;
    }

    .main_h_box_s li>.main_h_box_s ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    top: auto;
    left: auto;
    }

    .main_h_box_s li:hover ul { /* lists nested under hovered list items */
    display: block;
    }

    .main_h_box_s_no_ma {
    margin: 0;
    }

    真诚清静平等真觉慈悲,看破放下自在随缘念佛。
    name: WEN YU
    my blog: http://webwhalenews.com
    my collection: http://gtoystage.com