CSS drop-down menu fails to remain following hover activity

Question

I'm currently working on a couple of drop-down menus on the following page: http://icao.tungsten.hireserve-test.com/home.html

Originally, we only had one of these menus but our client has since changed their template and we now need to implement two drop-down menus. Previously this was done with jQuery hover() events which fired show() and hide() but now I have replaced this with CSS.

li.dynamic-children{
    position: relative
}

li.dynamic-children ul{
    display: none;
    position: absolute;
}

li.dynamic-children:hover ul{
    display: block;
    left: -1px;
    top: 18px;
    position: absolute;
    z-index: 100
}

li.dynamic-children:hover ul span{
    width: 100%
}

The dropdown menu is displayed successfully on hover however because it is done with CSS there does not appear to be any way of ensuring that the drop-down persists when the user moves off of the link which triggers the drop-down. This means that the user cannot select any of the items in the dropdown menu rendering it useless.

Do any of you have any ideas as to how I can force the menu to persist long enough for users to be able to make a selection for the drop-down menus?

EDIT:

Based upon some of the code provided below I have now included the following CSS rules:

.s4-tn .horizontal ul.dynamic {
    background-color: #ECF4FC;
    border-top:4px solid #003D78;
    margin: 0;
    width: 255px;
    z-index: 1000 !important;
}


.menu-horizontal li.static, .menu-horizontal a.static, .menu-horizontal span.static {
    float: left;
    padding-bottom: 5px;
}

These rules cause the menu to persist however in IE7 the drop-down menu now falls behind other elements on the page rendering it still useless in this browser. I have tried numerous z-index fixes to no avail.

Your css is messed up. You either have to increase height of your a tag or decrease margin-top of ul in line 99 of file controlesSharepoint.css. Set `margin: 0px 0 0 0;` and its done. Use chrome inspector for inspecting the same — ankur140290, Nov 08 '13 at 12:21
It's not my CSS. It's provided by our client hence why it's so messed up. Unfortunately we are not supposed to change much of it. — jezzipin, Nov 08 '13 at 12:22
But the css is the only culprit. You have to correct the same to get the functionality work properly. You can also increase `height:34px` in line 2840. — ankur140290, Nov 08 '13 at 12:24
I know. If anything though we are supposed to overwrite their css with the icams-specific.css file. — jezzipin, Nov 08 '13 at 12:37

radha · Accepted Answer · 2013-11-08T13:15:37.050

0

try this one,

.s4-tn .horizontal ul.dynamic {
    background-color: #ECF4FC;
    border: 0 solid #003D78;
    margin: 0;
    width: 255px;
    z-index: 101;
}



 li.dynamic-children:hover ul {
    display: block;
    left: -1px;
    position: absolute;
    top: 22px;
}

edited Nov 08 '13 at 13:15

answered Nov 08 '13 at 12:21

radha

782
4
8

This is a good solution although which property do I add to move the drop-down menu down ever so slightly (so i drops below the dark blue) – jezzipin Nov 08 '13 at 12:31
This causes the menu to drop below the left hand menu. – jezzipin Nov 08 '13 at 13:01
k if u prefer use this border-top:4px solid #003D78; to .s4-tn .horizontal ul.dynamic – radha Nov 08 '13 at 13:07
This does not fix the issue of the left hand employment menu over laying the drop-down menu. Especially in IE7. – jezzipin Nov 08 '13 at 13:13
Same issue. And now the problem is in Firefox also – jezzipin Nov 08 '13 at 13:18
use the same code i gave..its working fine pls see the updated ans – radha Nov 08 '13 at 13:20
I did use the code you gave. It does not work across browsers. Fine in Firefox now based on the code above but breaks in IE7. – jezzipin Nov 08 '13 at 13:23
I would mark this as the correct answer but as it does not work consistently across all browsers I cannot. – jezzipin Nov 08 '13 at 13:34

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Either 1 of the two:

Option 1 (Line 2840)

. .s4-tn li.static > .menu-item {

color: #3b4f65;

white-space: nowrap;

border: 1px solid transparent;

padding: 4px 10px;

display: inline-block;

height: 34px;

vertical-align: middle;

}

Option 2 (Line 99)

.s4-tn .horizontal ul.dynamic {

margin: 0 0 0 0;

border: 0px #003D78 solid;

width: 255px;

background-color: #ecf4fc;

}

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 08 '13 at 12:31

ankur140290

640
9
25

inline-block is not supported in IE7 so wont the first option break in this browser? – jezzipin Nov 08 '13 at 12:34
The code that is shown above is the same of your file. I have just copied the same from your site and changed the value of height. So if your side is working fine on IE7 then it will work fine after this also. Else tell the provider of your client to correct this first, – ankur140290 Nov 08 '13 at 12:38
Almost there. Unfortunately the menu now appears behind the left hand menu on IE7. I've treid adding a z-index value of 100 to this but it doesn't appear to have an effect. – jezzipin Nov 08 '13 at 12:55
Menu of your site is working fine on IE8 and is not working in IE7. I can now only say that you try to search for shiv/shim and add the same. Try if it helps – ankur140290 Nov 09 '13 at 08:27

CSS drop-down menu fails to remain following hover activity

2 Answers2