SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    May 2001
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two drop down menus, covering each other

    Hi,

    I have two separate menu bars (using UL, LI tags).

    When I open the upper menu (language menu) it covers the lower menu bar (contact menu). However the lower menu bar can be seen through it.

    How can I avoid the Language menu from being transparent (in order to hide the menu under it when opening).

    See below photo:



    Thank you very much for your help.

    Mac

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Without seeing the code, we can't help you... though if I were to take a wild guess, I'd say you are using absolute positioning without declaring TOP or LEFT... or you omitted position:relative on the parent LI.

    Which would make you like the sixth person attempting to use such a technique I've seen on various forums in as many days. Someone out there propagating this broken method or something?

  3. #3
    SitePoint Zealot
    Join Date
    May 2001
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your comments. Please see the website here. I wish the html and css are readable enough.

    Thanks.

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Well, the invalid valign property on the wrapping TD could be a contributing factor.

    valign=botoom>

    That it's a tables for nothing layout (as in even as a tabular layout it's too many tables) could also be a problem. The pointless DIV, hordes of classes for nothing, etc, etc and I'm actually shocked that even works in ANY browser.

    First thing I would to is pitch HALF, maybe MORE than half of the markup on the floor... Basically there is no good reason for the markup for the menu to be more than:

    Code:
    <ul id="mainMenu">
      <li>
      	<a href="index.php">Home</a>
      </li><li>
      	<a href="company.php">Company<span></span></a>
        <ul>
          <li><a href="about.php">About Us</a></li>
          <li><a href="management.php">Management</a></li>
          <li><a href="locations.php">Locations</a></li>
          <li class="last"><a href="employment.php">Employment</a></li>
        </ul>
      </li><li>
      	<a href="services.php">Services<span></span></a>
        <ul>
          <li><a href="langservices.php">Language Services</a></li>
          <li><a href="software.php">Software Development</a></li>
          <li><a href="subjectareas.php">Subject Areas</a></li>
          <li class="last"><a href="tools.php">Tools and File Types</a></li>
        </ul>
      </li><li>
      	<a href="technology.php">Technology<span></span></a>
        <ul>
          <li><a href="primomanage.php">PrimoManage</a></li>
          <li class="last"><a href="primovoice.php">PrimoVoice</a></li>
        </ul>
      </li><li>
      	<a href="solutions.php">Solutions<span></span></a>
      </li><li>
      	<a href="contact.php">Contact<span></span></a>
        <ul>
          <li><a href="contactinfo.php">Contact Info</a></li>
          <li><a href="quote.php">Free Quote</a></li>
          <li><a href="feedback.php">Feedback</a></li>
          <li class="last"><a href="panel/">Login</a></li>
        </ul>
      </li>
    <!-- #mainMenu --></ul>
    Stripping it down from 2.9k to 1.3k - Of course that will take an all new CSS to make it work.

    Given the train wreck of nested table hell that said page is, I HIGHLY recommend you get a from scratch rewrite using modern coding techniques. Right now what you have is the pinnacle of 1998-2001 style coding... That's not a good thing.

    This is evident in using a 19k HTML file to deliver 2k of CDATA and six content images... Which my normal formula for figuring out how big the HTML for a page should be:

    1.5k header + CDATA * 1.5 + objects (images/object/embed) * 200 bytes + form inputs * 300 bytes

    comes out to 6.3k - I usually round up so there's little reason for that page to be more than 7k of HTML - meaning well over HALF the markup should be left on the cutting room floor - and it's mostly the fault of "tables for nothing" and outdated presentational markup.

    I wouldn't even TRY to fix anything else before getting that straightened out first.

  5. #5
    SitePoint Zealot
    Join Date
    May 2001
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your time. I really appreciate it.

    Removing the VALIGN did not fix the problem.

    The complicated menu code is for the graphical borders, active menu line etc. But you are right about the old coding style. That's because I am an old class designer of that era. After doing my PhD in CS, I did not do much web design.

    Now this friend of mine has forced me into doing this myself and I am not that good in CSS. Besides, he likes to have that evil tabbed table, graphical menus, too much logos etc.

    I wish I can first fix this problem and then try to cleanup the code and substitute CSS code instead of those tables.

    BTW except the problem I mentioned it works well in IE and Firefox.

    Thanks for your time again.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,710
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Hi, on the <li>'s you give a z-index of 998, so just give the language dropdown container a 999 index
    Code:
    #langNav{z-index:999;}
    This is the rule which you set the 998 zindex
    Code:
    ul.navigation li {
    	position: relative;
    	z-index: 998;
    }
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Zealot
    Join Date
    May 2001
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    RyanReese,

    That fixed the problem

    Thank you VERY much for your help my friend.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,710
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Glad it worked . You're welcome (though don't take deathshadow60s comments lightly )
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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