www.webdeveloper.com
Results 1 to 1 of 1

Thread: ul menu column issue in IE7/8

Hybrid View

  1. #1
    Join Date
    Jul 2009
    Posts
    5

    ul menu column issue in IE7/8

    Hi,

    I have a drop down menu. The drop down section is in 4 columns, each column in a separate ul. It works fine in all modern browsers. But IE7 and 8 are causing problems.

    See attachments. One attachment shows the successful output in ff, the other is the IE issue.

    Any assistance would be greatly appreciated.

    fiefox.jpg

    explorer.jpg



    Here is my CSS

    Code:
    #menu {
    height:50px;
    background:url(../image/menu.gif) no-repeat;
    padding:0 20px;
    margin-bottom:5px;	
    }
    
    #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    
    #menu > ul > li {
    position: relative;
    float: left;
    z-index: 20;				
    }
    
    #menu > ul > li:hover {				
    }
    
    #menu > ul > li > a {
    font-size: 12.5px;
    color: #d9eeff;
    font-weight:bold;
    line-height: 14px;
    text-decoration: none;
    display: block;
    padding: 12px 18px 11px 15px;
    z-index: 6;
    position: relative;
    }
    
    #menu > ul > li > a:hover{
    color:#fff;
    }
    
    #menu > ul > li > div {
    display: none;
    background: #FFFFFF;
    position: absolute;
    top:37px;
    z-index: 5;
    padding: 10px;
    border: 1px solid #1390e3;
    -webkit-border-radius:25px;
    -moz-border-radius: 25px;
    -khtml-border-radius: 25px;
    border-radius: 25px;
    background: url('../image/menu.png');
    }
    
    #menu > ul > li:hover > div {
    display: table;
    }
    
    #menu > ul > li > div > ul {
    display: table-cell;
    }
    
    #menu > ul > li ul + ul {
    padding-left: 20px;
    }
    
    #menu > ul > li ul > li > a {
    text-decoration: none;
    padding: 8px;
    color: #FFFFFF;
    display: block;
    white-space: nowrap;
    min-width: 120px;
    }
    
    #menu > ul > li ul > li > a:hover {
    background: #1272b1;
    -webkit-border-radius:25px;
    -moz-border-radius: 25px;
    -khtml-border-radius: 25px;
    border-radius: 25px;
    }
    
    #menu > ul > li > div > ul > li > a {
    color: #FFFFFF;
    }
    Here is an example of the HTML

    Code:
    <div id="menu">
    
        <ul>
        
        <li><a href="#">Laboratory</a>
        
        <div>
        
        <ul>
            <li><a href="#">Autoclaves</a></li>
            <li><a href="#">Automated analysers</a></li>
            <li><a href="#">Balances</a></li>
        
        </ul>
        
        <ul>
        
            <li><a href="#">Electrophoresis</a></li>
            <li><a href="#">Freeze Dryer</a></li>
                                    
    ...
    Last edited by ryrocks; 01-10-2013 at 06:11 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles