My CSS seems to be doing strange things to my menu

Discussion in 'CSS' started by Skippy295, May 30, 2010.

0
  1. #1
    I'm having problems with my menu. It seems to work ok in ie8 & Opera but Chrome, Firefox & Safari
    can't "see" the links between the <li></li> tag pairs.

    Here's my HTML:

    <div class="menulink" id="menuposn">
    <ul class="menu" id="menu">
    <li><a href="../index.html" class="menulink">Home</a></li>
    <li><a href="#" class="menulink">Ex. DB Types</a>
    <ul>
    <li><a href="../customerDB.html">Customer DB</a></li>
    <li><a href="../inventoryDB.html">Inventory DB</a></li>
    <li><a href="../staffDB.html">Staff DB</a></li>
    </ul>
    </li>
    <li>
    <a href="#" class="menulink">Database Info</a>
    <ul>
    <li><a href="../advantages.html">Advantages</a></li>
    <li><a href="../considerations.html">Points to Consider</a></li>
    </ul>
    </li>
    <li>
    <a href="../contactUs.html" class="menulink">Contact Us</a> </li>
    </ul>
    </div>
    <!--End of menu code-->

    and the CSS that styles it. For some reason when I comment out the fourth line down with " ...float: left;..." the links are
    then able to be seen but also, as you would expect the menu becomes a vertical one.

    ul.menu {list-style: none; margin: 0; padding: 0;}
    ul.menu * {margin: 0; padding: 0;}
    ul.menu a {display: block; color: #000; text-decoration: none;}
    ul.menu li {position: relative; float: left; margin-right: 2px;}
    ul.menu ul {position: absolute; top: 26px; left: 0; background: #CCCCCC; display: none; opacity: 0; list-style: none;}
    ul.menu ul li {position: relative; border: 1px solid #aaa; border-top: none; width: 119px; margin: 0;}
    ul.menu ul li a {display: block; padding: 3px 7px 5px; background-color: #CCCCCC;}
    ul.menu ul li a:hover {background-color: #999999;}
    ul.menu ul ul {left: 75px; top: -1px;}
    ul.menu .menulink {border: 1px solid #aaa; padding: 5px 7px 7px; font-weight: bold; background:url(images/header.gif); width: 85px; font-size: 75%;}
    ul.menu .menulink:hover, ul.menu .menuhover {background:url(images/header_over.gif); font-size: 75%;}
    ul.menu .sub {background: #CCCCCC url(images/arrow.gif) 136px 8px no-repeat;}
    ul.menu .topline {border-top: 1px solid #aaa;}

    Can someone please point out my error?
     
    Skippy295, May 30, 2010 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    They all work the same to me. You need to better explain what you mean by "can't "see" the links between the <li></li> tag pairs".
     
    drhowarddrfine, May 31, 2010 IP
  3. Skippy295

    Skippy295 Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I'm sorry if I didn't explain myself properly - But I have links to other pages embedded in the content of my home page and these links take me to those pages but the links between the <li> and </li> tags don't even register as links, i.e. the cursor doesn't even change from an arrow to a hand... and that's only in the browsers I mentioned - ie8 and Opera are fine. However, as I said, when I comment out that fourth line of CSS code the cursor does change from an arrow to a hand indicating the presence of a link.
     
    Skippy295, May 31, 2010 IP
  4. wajid_pk

    wajid_pk Peon

    Messages:
    334
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #4
    ul.menu ul {position: absolute; top: 26px; left: 0; background: #CCCCCC; display: none; opacity: 0; list-style: none;}
    look at this
    check again after removing red mentioned
     
    wajid_pk, May 31, 2010 IP