Grow your CSS skills. Land your dream job.

[Solved] ul li:hover > ul – An IE Headache

  • # September 9, 2010 at 2:07 am

    I am facing problems with IE using the css drop down menu. When I open it in IE, it directly shows the sub-menu opened and is all over the page. It doesn’t work as it should (i.e. the sub-menu should show on hover) This is not the case with Firefox or Chrome. I think it is the ul.menu li:hover > ul that is giving the problem in IE. I have pasted the code below that I am using. Any ideas how to solve this thing with IE?

    Here is the code.
    The HTML is as below.


    <!-- Navigation Menu -->
    <ul class="menu">
    <li><a href="#"> Home </a></li>
    <li><a href="#"> About Us </a>
    <ul class="sub-menu">
    <li><a href="#"> News </a></li>
    <li><a href="#"> Media </a></li>
    <li><a href="#"> Events </a></li>
    </ul>
    </li>
    <li><a href="#"> Gallery </a>
    <ul class="sub-menu">
    <li><a href="#"> Wedding </a></li>
    <li><a href="#"> Birthday </a></li>
    <li><a href="#"> Christening </a></li>
    <li><a href="#"> Seasonal </a></li>
    <li><a href="#"> Other </a></li>
    </ul>
    </li>
    <li><a href="#"> Flavours </a>
    <ul class="sub-menu">
    <li><a href="#"> Cake and Cookies </a></li>
    <li><a href="#"> Cup Cakes </a></li>
    </ul>
    </li>
    <li><a href="#"> Portions </a></li>
    <li><a href="#"> Prices & Packaging </a></li>
    <li><a href="#"> Ordering </a></li>
    <li><a href="#"> Contact Us </a></li>
    <li><a href="#"> Testimonials </a></li>
    </ul>
    <!-- End of Navigation Menu .menu -->

    The CSS is as below.



    ul.menu
    {
    background: #2379ab;
    /*width: 980px;*/
    width: auto;
    margin: 0 auto;
    list-style: none;
    color: #FFF;
    font-size: 0.88em;
    }
    ul.menu li
    {
    background:url(../images/menu-bg.gif) repeat-x bottom;
    padding: 25px 10px 25px 10px;
    float: left;
    display: block;
    }
    ul.menu li:hover
    {
    background: #3399ff;
    }
    ul.menu li a
    {
    text-decoration: none;
    color: #FFF;
    }

    ul.menu ul.sub-menu
    {
    visibility: collapse;
    background:url(../images/sub-menu-bg.gif) repeat-x bottom;
    position: absolute;
    /*width: 350px;*/
    width: 150px;
    border-left: 1px solid #b8cdd9;
    border-right: 1px solid #b8cdd9;
    border-bottom: 1px solid #b8cdd9;
    top: 239px;
    padding: 0px;
    margin: 0px;
    font-size: 0.88em;
    margin-left: -10px;
    }
    ul.menu ul.exceptional-sub-menu /* For the last sub menu that will go beyond page */
    {
    visibility: collapse;
    background:url(../images/sub-menu-bg.gif) repeat-x bottom;
    position: absolute;
    width: 350px;
    border-left: 1px solid #b8cdd9;
    border-right: 1px solid #b8cdd9;
    border-bottom: 1px solid #b8cdd9;
    top: 68px;
    padding: 0px;
    margin: 0px;
    font-size: 0.88em;
    margin-left: -270px;
    }
    ul.menu ul li:hover
    {
    background: none;
    }
    ul.menu ul li a:hover
    {
    color: #032136;
    }
    ul.menu ul li
    {
    background: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    width: 150px;
    padding-bottom: 10px;
    padding-top: 10px;
    }
    ul.menu ul li a
    {
    display: inline-block;
    height: inherit;
    color: #2275af;
    }
    ul.menu li:hover > ul
    {
    visibility: visible;
    }

    ul.menu ul.sub-menu ul.desc li
    {
    padding: 0px;
    }
    ul.desc
    {
    padding: 0;
    margin: 0;
    color: #666;
    }
    ul.exceptional-desc
    {
    color: #666;
    margin-left: -10px;
    padding: 0;
    margin-top: 0;
    }
    # September 9, 2010 at 2:42 am

    This tutorial should cover that.

    # September 9, 2010 at 3:21 am

    Thanks Jamy.. Although I was looking for a css/html solution without using jquery. I did find a link. Any of you having the same problem and wanting a html/css solution, have a look at http://www.alistapart.com/articles/horizdropdowns/

    # September 9, 2010 at 3:59 am

    Hey Kaizer, the tutorial has a CSS fallback (It works if javascript is disabled). So if you ignore the jQuery part it should be what you were looking for.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".