Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Location
    Tampa Bay, Florida
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Drop Down Menu Problem in IE

    I have a problem getting the nested links to work and not vanish in a drop down menu in Internet Explorer when hovered over. The nested links display just fine but when I try to hover over them they disappear in IE. I set a z-index and tried having the nested links overlap in their parent links by a pixel but no luck.

    The html code is:

    <div id="left_nav" class="menu">
    <ul>
    <li><span><a href="about/about2.html">About</a></span>
    <ul>
    <li><a href="about/mission.html">Mission Statement</a></li>
    <li><a href="about/about2.html">About AGV Sport</a></li>
    <li><a href="about/history.html">History</a></li>
    <li><a href="about/gallery.html">Historical Gallery</a></li>
    <li><a href="about/racers.html">Pro Racers</a></li>
    <li><a href="about/faq.html">FAQ</a></li>
    </ul></li>

    <li><span><a href="products/products.html">Product Information</a></span></li>
    <li><a href="products/products.html">Products</a>
    <ul>
    <li><a href="products/suits2.html">Suits</a></li>
    <li><a href="products/jackets2.html">Jackets</a></li>
    <li><a href="products/pants2.html">Pants</a></li>
    <li><a href="products/gloves2.html">Gloves</a></li>
    <li><a href="products/boots2.html">Boots</a></li>
    </ul></li>
    <li><a href="products/custom/why_agv.html">Custom Suits</a>
    <ul>
    <li><a href="products/custom/why_agv.html">Why AGV</a></li>
    <li><a href="products/custom/features.html">Features</a></li>
    <li><a href="products/custom/examples.html">Examples</a></li>
    <li><a href="products/custom/level1.html">Level 1</a></li>
    <li><a href="products/custom/level2.html">Level 2</a></li>
    <li><a href="products/custom/level3.html">Level 3</a></li>
    <li><a href="products/custom/sizing.html">Sizing</a></li>
    <li><a href="products/custom/ordering.html">Ordering</a></li>
    <li><a href="products/custom/pricing.html">Pricing</a></li>
    </ul></li>

    <li><a href="products/sizing.html">Sizing Charts</a></li>
    <li><a href="products/associates.html">Associates</a></li>

    <li><span><a href="service/customer_service.html">Customer Service</a></span>
    <ul>
    <li><a href="service/customer_service.html">Customer Service</a></li>
    <li><a href="service/repairs.html">Repairs</a></li>
    <li><a href="service/warranty.html">Warranty</a></li>
    <li><a href="service/racer_faq.html">Racer Support</a></li>
    <li><a href="service/contact.html">Contact</a></li>
    </ul></li>

    <li>
    <span><a href="internships/internships.html">Opportunities</a></span>
    <ul>
    <li><a href="internships/internships.html">Internships (EN)</a>
    <ul>
    <li><a href="internships/sales.html">Sales/Marketing</a></li>
    <li><a href="internships/management.html">Management</a></li>
    <li><a href="internships/fasion.html">Fasion Design</a></li>
    <li><a href="internships/graphic_arts.html">Graphic Arts</a></li>
    <li><a href="internships/web_development.html">Web Development</a></li>
    <li><a href="internships/race_rep.html">Regional Race Rep.</a></li>
    <li><a href="internships/international.html">International Interns</a></li>
    </ul>
    </li>

    <li><a href="internships/it_internships.html">Internships (IT)</a>

    <ul>
    <li><a href="internships/it_sales.html">Marketing</a></li>
    <li><a href="internships/it_management.html">Management</a></li>
    <li><a href="internships/it_fasion.html">Fasion</a></li>
    <li><a href="internships/it_graphic_arts.html">Graphics</a></li>
    <li><a href="internships/it_web_development.html">Web Dev</a></li>
    <li><a href="internships/it_race_rep.html">Race Rep</a></li>
    <li><a href="internships/it_international.html">International Internships</a></li>
    </ul>
    </li>

    </li>

    </ul>
    </div>


    and the css is:


    @charset "utf-8";
    /* CSS Document */

    /* common styling */
    .menu {
    width:202px;
    height:150px;
    position:relative;
    margin:1;
    margin-top: 0px;
    margin-right: 0;
    margin-bottom: 50px;
    margin-left: 1px;
    }
    .menu ul li a, .menu ul li a:visited {
    display:block;
    text-decoration:none;
    color:#CCCCCC;
    width:193px;
    height:20px;
    text-align:left;
    line-height:19px;
    font-size:14px;
    background-color: #000000;
    z-index: 5; /*border-top-width: 1px;
    border-right-width: 0px;
    border-bottom-width: 0;
    border-left-width: 0;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #fff;
    border-right-color: #fff;
    border-bottom-color: #fff;
    border-left-color: #fff;*/
    padding-left: 10px;
    border-right-width: 1px;
    border-right-style: solid;
    border-top-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    /*border-bottom-style: solid;
    border-bottom-width: 1px;*/
    border-left-style: solid;
    }
    .menu ul {
    padding:0;
    list-style-type: none;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 1px;
    }
    .menu ul li {
    float:left;
    margin-right:0px;
    position:relative;
    padding: 0px;
    }
    .menu ul li ul {display: none;}

    /* specific to non IE browsers */
    .menu ul li:hover a {
    color:#000000;
    background-color: #CCCCCC;
    z-index: 8;
    font-weight: bold;
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #CCCCCC;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    }
    .menu ul li:hover ul {
    display:block;
    position:absolute;
    top:0;
    left:202px;
    width:187px;
    z-index: 10;
    }


    .menu ul li:hover ul li a.hide {
    color:#000;
    background-color: #CCCCCC;
    }
    .menu ul li:hover ul li:hover a.hide {
    width:150px;
    }
    .menu ul li:hover ul li ul {display: none;}
    .menu ul li:hover ul li a {
    display:block;
    color:#CCCCCC;
    width:141px;
    background-color: #444444;
    /*border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCCCCC;*/
    }
    .menu ul li:last-child {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
    }
    .menu ul li:hover ul li:last-child {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
    }
    .menu ul li:hover ul li:hover ul li:last-child {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
    border-bottom-color: #CCCCCC;
    }
    .menu ul li:hover ul li a:hover {
    color:#000;
    background-color: #CCCCCC;
    }


    .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:150px; top:0; color:#000;}
    .menu ul li:hover ul li:hover ul li a {
    display:block;
    width:200px;
    color:#FFFFFF;
    background-color: #666;
    }
    .menu ul li:hover ul li:hover ul li a:hover {
    color:#000000;
    background-color: #CCCCCC;
    }


    and suggestions would be appreciated?

    Thanks
    Eric

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Could you post a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Last edited by 5quibo; 07-09-2009 at 12:11 PM.

  • #4
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    0
    Thanked 1 Time in 1 Post

    Cool

    you put many codes there just make it simple with few sub menus.
    i have same menu tested in firefox ie chrome http://www.brightyoursite.com/blog/2...ndly-sub-menu/
    clean code

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Have a try by adding the following code.
    Code:
    menu ul ul{
    background:transparent;
    }
    If that doesn't fix, please post a link to your page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

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