Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Internet Explorer

Css Hover Drop-down Menu In Internet Explorer

Post a Comment
Trying to create a website that looks as good in Internet Explorer as it does in Firefox is an incredibly difficult task. However, there is at least one bug in IE that is particula

Solution 1:

Without seeing some HTML and CSS there isn't a way to give you a specific solution. However, there are some techniques that can be used to help alleviate IE bugs.

  • Float your <li>s, even if they aren't horizontal.
  • Add display: inline to the now floated <li>s.
  • Assign a width to your <li>s or to the <a> tag within.
  • Potentially add position: relative to the <li>s.
  • Add display: block to the <a> tags within the <li>s.
  • Add width: 100% or zoom: 1 (or anything else that triggers hasLayout) to the top level <ul>.

Some of the above techniques will usually put you in a better position. Further tweaks may be necessary but hopefully IE will behave better.

Solution 2:

I love coding everything myself too, but HTML/CSS/JS Navigation is one of those areas where you really don't need to reinvent the wheel. No matter what you want it to look like, there are a ton of ready to go solutions out there that are already tested cross browser. Suckerfish is a popular one for a pure html/css solution, but there are many more that will work just fine and will be easily styled to look however you want. (Just be sure to style the correct elements)

Solution 3: 

<!doctype html><html><head><metacharset="utf-8"><title>Untitled Document</title><style>#topDropDownMenu {
            position: relative;
            background: no-repeat 100%50%;
            width: 50em;
            max-width: 100%;
            float: left;
        }

            #topDropDownMenuliul {
                width: 11em!important; /* leaves room for padding */cursor: default;
                position: absolute;
                height: auto;
                display: none;
                left: -10px;
                padding: 1px10px10px10px;
                background: url(/img/clear.gif);
            }
            /* All LIs */#topDropDownMenuli {
                position: relative;
                width: 8.3em;
                max-width: 16.5%;
                cursor: pointer;
                float: left;
                list-style-type: none;
                font-weight: bold;
                border-style: solid;
                border-width: 1px;
                border-color: #222;
                text-align: center;
                -moz-border-radius: 8px8px0px0px;
            }
                /* sub-menu LIs */#topDropDownMenuliulli {
                    width: 8.3em/*FF*/;
                    padding: 0;
                    border: none;
                    max-width: 100%;
                    border: 1px solid #333;
                    border-top: none;
                    -moz-border-radius: 0px0px0px0px;
                }
                /* All anchors */#topDropDownMenulia {
                    cursor: pointer !important;
                    color: #666;
                    text-decoration: none;
                    display: block;
                    float: left;
                    height: 2em;
                    line-height: 2em;
                    width: 100%;
                    -moz-border-radius: 8px8px0px0px;
                }
                /* sub-menu Anchors */#topDropDownMenuliullia {
                    width: 8.3em/*FF*/;
                    position: relative !important;
                    cursor: pointer !important;
                    white-space: nowrap;
                    line-height: 1.7em;
                    height: 1.7em;
                    font-weight: normal;
                    color: #666;
                    background-position: 050%!important;
                    -moz-border-radius: 0px0px0px0px;
                }
                /*hover*/#topDropDownMenulia:hover, #topDropDownMenulia:focus, #topDropDownMenulia:active {
                    color: #000;
                    background: #fff;
                }
                /* display and z-index for the sub-menus */#topDropDownMenuli:hoverul, #topDropDownMenuli.msieFixul {
                    display: block;
                    z-index: 10;
                    top: 2em!important;
                }

                #topDropDownMenuli#aboutDropDown {
                    z-index: 2;
                }

                #topDropDownMenuli#contactDropDown {
                    z-index: 1;
                }

        .aboutDropDown#topDropDownMenuli#aboutDropDownul, .contactDropDown#topDropDownMenuli#contactDropDownul {
            display: block;
            top: -1000px;
        }

        #aboutDropDowna {
            background-color: #b9e075;
        }

        #contactDropDowna {
            background-color: #f7c472;
        }

        #topDropDownMenuli.msieFixa {
        }

        .aboutDropDown#topDropDownMenuli#aboutDropDownullia:focus, .aboutDropDown#topDropDownMenuli#aboutDropDownullia:active, .contactDropDown#topDropDownMenuli#contactDropDownullia:focus, .contactDropDown#topDropDownMenuli#contactDropDownullia:active, {
            position: absolute !important;
            top: 1028px!important;
        }
    </style><linkrel="stylesheet"type="text/css"href="old_hover_menu.css" /></head><body><ulid="topDropDownMenu"><liid="aboutDropDown"><ahref="#">About</a></li><liid="contactDropDown"><ahref="#">Contact</a><ul><li><ahref="#">Form</a></li><li><ahref="#">Information</a></li></ul></li></ul></body></body></html>

Solution 4:

This barely counts as an answer, but it may help.

Cross browser compatibility can be a bit of a monster for things like this when you are using a completely custom solution. This is an instance where using a library like jquery UI will make things a ton easier on you, as they are usually already cross browser compatible.

If this is not an option, it will be impossible to help without seeing your code. What version of internet explorer are you testing with?

Post a Comment for "Css Hover Drop-down Menu In Internet Explorer"