How can I get my drop-down to not open unless the li is hovered?

Tags: html,css,drop-down-menu

Problem :

For a while now I have stayed away from using opacity and height to animate drop-downs with css. My reason for this is due to them being activated without having the li hovered on.

What happens since the drop-down is not using display: none; to display: block; you can activate the drop-down underneath the li where the nested menu would show.

I was sick of using the same animation over and over again so I tried my best to prevent this but, sadly, the menu still does this. (It also seems to display the text in IE and Firefox on some monitors, not all)

Here is my css for the menu,

.subNav {
    width: 200px;
    height: 0;
    overflow: hidden;
    font-size: 16px;
    padding-top: 10px;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    position: relative;
    z-index: 100;
    left: 50%;
    margin-left: -100px;
    border-radius: 0 0 5px 5px;
    padding: 10px;
    top: 0;

ul.nav li:hover .subNav {
    min-height: 100px;
    height: auto;
    overflow: visible;
    background: #c1c1c1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);

Here is a JSFIDDLE, remove show in url to see code, if you hover between the nav and div that is underneath it you will see how it opens. Is there anyway I can prevent this?

Screenshot of the text clipping, (not the problem since it is very random. I have this happen on my mac chrome but at work on my windows chrome seems to be fine. In firefox and IE on my computer at work does it while my coworkers is fine in firefox.)

Text showing behind div

Solution :

The immediate fix to your problem is to use the visibility property.

This is a CSS2 property and therefore should work on all major browsers including full support back to IE8 (the main one you generally need to go back for), but also partial support for IE6+ according to

All you should need to add is:

.subNav { visibility: hidden; }
ul.nav li:hover .subNav { visibility: visible; }

and that should work how I am guessing you want it to work straight away.

Please note however, that there is a difference to visibility and display, and this still technically renders the subNav and allocates its defined space and position, however, in this case it doesn't matter due to the nature of the position of the other elements. Read more about the difference here:

Due to the positioning and render issues outlined above with visibility vs display this may not always be the correct solution and on other pages or in the future may push other elements out of alignment. Just take note of this.

Hope this answers your question.


    CSS Howto..

    How can I make 3 circles with a different radius “stick” together? (with example image)

    jQuery or CSS - How do you make a link in a table row appear underlined even when the cursor is in a neighbouring cell?

    How to create header numbers with CSS

    How to set css to a specific selector using jQuery

    Slideshow using background images with navigation and captions

    How can I expand this tag?

    How do I strip a line of text or amount of words/characters from stored text with CSS/Javascript?

    How to find the relevant stylesheet for a specific CSS code [closed]

    How to run a Javascript function on an iframe before the source (src) is loaded?

    How can I pull Data from an SQL table using PHP inside an HTML

    How to align two anchor tags with text horizontally next to each other?

    How to CSS: select element based on inner HTML

    How to set CSS attributes to default values for a specific element (or prevent inheritance)

    How to set background-color to the length of the test in a jQuery UI accordion?

    How do I get my tabs to line up properly using CSS?

    How to make my first-child in css work properly?

    How to make css jquery autofit navigation?

    How can i make this border to the end?CSS

    Three extra pixels at the bottom of the page unaccounted for and not sure how to get rid of them?

    How to get rid of space and align two objects in one line in css/html?

    how to make background css url dynamic using jquery

    How to make child divs visible in's CSS Radio Checked Tab Method

    What is the purpose of this csslint error and how can I get rid of it?

    How to move a circle down by 15px with CSS HTML

    How to style (increase the height) of select box in CSS?

    How to set a css style to the last item of CListView?

    How to scale down CSS background-image when using various background-positions?

    Show a box on top of an image in an HTML page

    How to stop CSS within a RichText field from overwriting document

    How to make the div's appear inline in the following code?