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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Google Chrome Menu Drop down aligns to left

    Hi,

    I am working on a webpage www.datamach.com and all my dropdown menus align to the left on Google Chrome. They work fine on IE.

    my navigatio css file as follows.
    [CODE]
    #nav
    {

    margin: 0px auto;
    padding: 0px;
    list-style-type: none;
    list-style-image: none;
    }

    #nav li
    {

    margin: 0px auto;
    padding: 0px;
    float: left;
    }

    #navTab01,
    #navTab02,
    #navTab03,
    #navTab04,
    #navTab05,
    #navTab06,
    #navTab07,
    /*#navTab08*/
    {
    position: relative;
    float: left;
    }

    a.mainNavItem,
    a.mainNavItem:active,
    a.mainNavItem:visited
    {
    float: left;
    padding: 0;
    height: 49px;
    background-image: url(../images/structure/mainNav.jpg);
    text-indent: -9999px;
    font-size: 1%;
    overflow: hidden;
    }

    #navTab01 a.mainNavItem { width: 112px; background-position: 0px 0px; }
    #navTab02 a.mainNavItem { width: 125px; background-position: -112px 0px; }
    #navTab03 a.mainNavItem { width: 120px; background-position: -237px 0px; }
    #navTab04 a.mainNavItem { width: 131px; background-position: -357px 0px; }
    #navTab05 a.mainNavItem { width: 120px; background-position: -488px 0px; }
    #navTab06 a.mainNavItem { width: 111px; background-position: -608px 0px; }
    #navTab07 a.mainNavItem { width: 154px; background-position: -719px 0px; }
    /*#navTab08 a.mainNavItem { width: 107px; background-position: -873px 0px; }*/

    #navTab01 a.mainNavItem:hover { background-position: 0px -49px; }
    #navTab02 a.mainNavItem:hover { background-position: -112px -49px; }
    #navTab03 a.mainNavItem:hover { background-position: -237px -49px; }
    #navTab04 a.mainNavItem:hover { background-position: -357px -49px; }
    #navTab05 a.mainNavItem:hover { background-position: -488px -49px; }
    #navTab06 a.mainNavItem:hover { background-position: -608px -49px; }
    #navTab07 a.mainNavItem:hover { background-position: -719px -49px; }
    /*#navTab08 a.mainNavItem:hover { background-position: -873px -49px; }*/

    #navTab01 a.current { background-position: 0px -49px; }
    #navTab02 a.current { background-position: -112px -49px; }
    #navTab03 a.current { background-position: -237px -49px; }
    #navTab04 a.current { background-position: -357px -49px; }
    #navTab05 a.current { background-position: -488px -49px; }
    #navTab06 a.current { background-position: -608px -49px; }
    #navTab07 a.current { background-position: -719px -49px; }
    /*#navTab08 a.current { background-position: -873px -49px; }*/


    /* ========== Drop-down (Level 2) Navigation ========== */

    #mainNav ul.dropdown
    {
    display: none;
    position: absolute;
    margin: 0;
    padding: 0;
    width: 196px;
    left: 0px;
    top: 49px; /* Height of main navigation item */
    list-style-image: none;
    list-style-type: none;
    border-left: solid 1px #A1A1A1;
    border-right: solid 1px #A1A1A1;
    z-index: 1000;
    }

    #mainNav ul.lastMainNavDropdown
    {
    left: auto; /* Required for 'right' to work */
    right: 0px;
    border-left: solid 1px #A1A1A1;
    border-right: solid 1px #A1A1A1;
    }

    #mainNav ul.dropdown li
    {
    position: relative;
    background-color: #FFF;
    border-bottom: solid 1px #5E5E5E;
    }

    #mainNav ul.dropdown li a,
    #mainNav ul.dropdown li a:active,
    #mainNav ul.dropdown li a:visited
    {
    display: block;
    padding: 10px 8px 10px 8px;
    width: 180px;
    background-color: #434343;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: none;
    color: #FFF;
    cursor: pointer;
    }

    #mainNav ul.dropdown li a:hover
    {
    background-color: #626262;
    background-color: #545454;
    color: #FFF;
    }
    [CODE]

    my HTML code as follows
    [CODE]
    <ul id="mainNav">
    <ul id="nav"><li id="navTab01"><a title="Company" href="Company_overview.html" class="mainNavItem">Company</a><ul class="dropdown"><li style="z-index: -1;"><a title="Company Overview" href="Company_overview.html" class="">Company Overview</a></li></ul></li>
    <li id="navTab02"><a title="Expertise" href="Expertise_storage.html" class="mainNavItem">Expertise</a><ul class="dropdown"><li style="z-index: -1;"><a title="Cloud Computing " href="Expertise_cloudcomputing.html" class="">Cloud Computing </a></li><li style="z-index: -2;"><a title="Database" href="Expertise_database.html" class="">Database</a></li><li style="z-index: -3;"><a title="Storage" href="Expertise_storage.html" class="">Storage</a></li><li style="z-index: -4;"><a title="Virtualization" href="Expertise_virtualization.html" class="">Virtualization</a></li><li style="z-index: -5;" class="last"><a title="Application Integration" href="Expertise_appsintegration.html" class="">Application Integration</a></li></ul></li>
    <li id="navTab03"><a title="Consulting" href="Consulting_techoptimz.html" class="mainNavItem">Consulting</a><ul class="dropdown"><li style="z-index: -1;"><a title="Technology Optimization" href="Consulting_techoptimz.html" class="">Technology Optimization</a><li style="z-index: -2;"><a title="Strategic Sourcing" href="Consulting_sourcing.html" class="">Strategic Sourcing</a></li><li style="z-index: -3;"><a title="Education &amp; Development" href="Consulting_edutrain.html" class="">Education &amp; Development</a></li></ul></li>
    <li id="navTab04"><a title="Resources" href="dm_Resources.html" class="mainNavItem">Resources</a><ul class="dropdown"><li style="z-index: -1;"><a title="Resources Overview" href="dm_Resources.html" class="">Resources Overview</a></li></ul></li>
    <li id="navTab05"><a title="Partners" href="dm_partners.html" class="mainNavItem">Partners</a><ul class="dropdown"><li style="z-index: -1;"><a title="Partners" href="dm_partners.html" class="">Partners Overview</a></li></ul></li>
    <li id="navTab06"><a title="Careers" href="dm_careers.html" class="mainNavItem">Careers</a><ul class="dropdown"><li style="z-index: -1;"><a title="Join the Datamach Team" href="dm_careers.html" class="last">Join the Datamach Team</a></li></ul></li>
    <li id="navTab07"><a title="Contact Us" href="dm_contacts.html" class="mainNavItem">Contact Us</a><ul class="dropdown"><li style="z-index: -1;"><a title="Contact Us" href="dm_contacts.html" class="">Contact Us</a></ul></li></li></ul>

    </ul>
    </div>

    [CODE]

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    You don't have doctype over your code? Not even an <html> tag? It starts with <head>? I would suggest to correct that first.

    Next, you should give the #nav li a position: relative.

    And mind that there is no hovering on touchscreens, so your drop-down sub menus won't appear on those. Here is a tutorial, or the live example of it, on how to turn a menu into a hover and onclick menu that also works on touchscreens.
    Last edited by Frankie; 02-03-2013 at 10:40 AM.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.


  •  

    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
    •