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 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2010
    Posts
    21
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Drop down menu 'protuding to side' on IE7

    Hello,
    I have a javascript drop down menu that works fine on all browsers apart from IE7 (it works on IE 8.

    Problem in IE7:

    When you click the parent main list item the child sub-menu items in the list protrude to the side of the main list item instead of displaying blocking (pointing horizontally downwards).

    The HTML code is:
    <ul>
    <li class="mainItems">
    <a href="">What's new</a></li>


    <li class="mainItems">
    <a href="#" onclick="showHideSubMenu('sub1'); return false;">clothing</a>
    <ul class="submenu" id="sub1">
    <li><a href="../clothing/clothing_page1.html">clothing</a></li>
    </ul>
    </li>
    <li class="mainItems">
    <a href="#" onclick="showHideSubMenu('sub2'); return false;">Accessories</a>
    <ul class="submenu" id="sub2">
    <li><a class="subbie" href="../bags/bags_page1.html">bags</a></li>
    <li><a class="subbie" href="../jewellery/jewellery_page1.html">jewellery</a></li>
    </ul>
    </li>
    </ul>

    The CSS Code Is:

    ul{margin:0px;padding:0px;z-index:30;}

    li{
    list-style-type: none;
    width: 160px;
    float:left;
    font: 14px arial bold;
    text-transform:uppercase;
    padding:0px;
    margin-left:0px;
    }

    li a{
    display: block;
    padding:10px;
    width: 160px;
    height:35px;
    color: #ffffff;
    background-color:#808000;
    text-align: center;
    text-decoration:none;}



    .submenu{
    display: none;}

    .submenu{position: absolute;
    width:160px;
    margin: 0;
    padding: 0;
    background: #808000;}


    .submenu li a {
    display:block;
    padding:5px;
    width: 160px;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    background: #808000;
    color: #ffffff;
    font: 14px arial;
    text-transform:uppercase;}

    .mainItems:hover .submenu{
    display: block;
    color:#000000;}

    .submenu li a:hover {color:#000000;}

    The Javascript Code Is:

    <script type="text/javascript">
    function showHideSubMenu(elemID){
    var subMenuObj = document.getElementById(elemID);
    subMenuObj.style.display = (subMenuObj.style.display == 'block')? 'none' : 'block';
    }
    </script>

    Please can you help as I need the sub-menu list items to display block (point downwards) not protrude to the side, when the main item is clicked, on IE7.

    *Please note, the above code works fine on IE8, Safari, Opera, Chrome & Firefox

    Thanks,

    Nonye

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Wrong forum. This is strictly an HTML/CSS problem. Has nothing to do with JavaScript.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Feb 2010
    Posts
    21
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Ok thanks.


  •  

    Posting Permissions

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