CSS 菜单下拉对齐在 Chrome 中不起作用

Question

有人要求我查看此站点 http://www.edowa.org.au/ 但找不到问题。

二级菜单项在 IE10.0.5 和 FF35.0.1 中正确对齐，但在 Chrome（最新版本）中不正确。在 Chrome 中，二级菜单项被推到右侧。

这是CSS

    /* MAIN NAVIGATION - TABS
----------------------------------------- */
#nav {
        clear:both;
        width: 900px;
        height: 29px;
        margin: 0 auto;
        padding:5px 20px 0 20px;
    }
        #nav ul {
            width: 900px;
            display: inline-table;
            margin: 0;
            padding: 0;
        }
        #nav li {
            list-style: none;
            display: table-cell;
            text-align: center;
            margin: 0;
            padding: 0;
        }
        *:first-child+html #nav li {
            float: left;
        }
        *html #nav li {
            float: left;
        }
        #nav li a {
            border: 0;
            display: block;
            font-weight: bold;
            font-size: 14px;
            line-height: 29px;
            color: #59523f;
            text-decoration: none;
        }
        *:first-child+html #nav li a {
            padding:0 33px;
        }
        #nav li a.current,
        #nav li a:hover {
            color: #FFFFFF;
            background: url(../images/li-bg-hover.jpg) repeat-x;
        }

        /*_________second level menu__________*/
        #nav li ul { 
            position: absolute;
            z-index: 20;
            width: 175px;
            height: auto;
            margin: 0;
            padding: 0;
            left: -999em;
        }
        #nav li ul li {
            margin: 0;
            padding: 0;
            width: 175px;
            min-height: 31px;
            display:block;
        }
        #nav li:hover ul, 
        #nav li li:hover ul, 
        #nav li.sfhover ul, 
        #nav li li.sfhover ul { 
            left: auto;
        }
        *:first-child+html #nav li:hover, 
        *:first-child+html #nav li li:hover, 
        *:first-child+html #nav li.sfhover, 
        *:first-child+html #nav li li.sfhover { 
            left: auto;
            position: static;
        }
        #nav li ul li a {
            padding: 0 10px;
            display: block;
            width: 175px !important;
            line-height: 31px;
            height:auto;
            font-weight: normal;
            font-size: 12px;
            text-align: left;
            color:#d6d4af;
            background: url(../images/li-li-bg.png) repeat-x;
        }
        #nav li ul li a:hover {
            color: #FFFFFF;
            background: url(../images/li-li-bg-hover.png) repeat-x;
        }

这是html

<div id="nav">
            <ul>


    <li><a href="/" class="current" >Home</a></li>



    <li><a href="/meet-the-edo/" class="link" >Who We Are</a></li>



    <li><a href="/services/" class="link" >What We Do</a>
    <ul>

        <li><a href="/services/legal-advice-2/" >Legal Advice</a></li>

    </ul>
    </li>



    <li><a href="/discover/" class="link" >Discover</a>
    <ul>

        <li><a href="/discover/publications/" >Publications</a></li>

        <li><a href="/discover/factsheets/" >Factsheets</a></li>

        <li><a href="/discover/newsletters/" >Newsletters</a></li>

        <li><a href="/discover/archive/" >Archive</a></li>

        <li><a href="/discover/e-bulletins/" >E-Bulletins</a></li>

        <li><a href="/discover/community-legal-education/" >Community Legal Education</a></li>

    </ul>
    </li>



    <li><a href="/participate/" class="link" >Participate</a>
    <ul>

        <li><a href="/participate/join/" >Join</a></li>

        <li><a href="/participate/donate/" >Donate</a></li>

        <li><a href="/participate/volunteer/" >Volunteer</a></li>

        <li><a href="/participate/jobs/" >Jobs</a></li>

    </ul>
    </li>



    <li><a href="/links/" class="link" >Links</a></li>



    <li><a href="/contact/" class="link" >Contact</a></li>

非常感谢任何建议。

Answer 1

#nav{
  float : right;
  /* or float = left */
}

Answer 2

我认为绝对定位和 "auto" 值有点混乱。

请尝试更改以下内容：

#nav li {
    list-style: none;
    display: table-cell;
    text-align: center;
    margin: 0;
    padding: 0;
    position: relative; /* new line */
}
#nav li:hover ul, 
#nav li li:hover ul, 
#nav li.sfhover ul, 
#nav li li.sfhover ul { 
    left: 0; /* changed value */
}

它应该在所有主流浏览器上执行。

Answer 3

尝试将 li left: auto; 更改为 left: 0; 并将 position: relative; 添加到 #nav li。像这样：

#nav li {
            list-style: none;
            display: table-cell;
            text-align: center;
            margin: 0;
            padding: 0;
            position: relative; /*Added*/
        }

#nav li:hover ul, 
        #nav li li:hover ul, 
        #nav li.sfhover ul, 
        #nav li li.sfhover ul { 
            left: 0; /*Added*/
        }

I've created a fiddle here (added colors for testing purposes).

CSS 菜单下拉对齐在 Chrome 中不起作用

CSS menu dropdown alignment not working in Chrome

css

google-chrome

drop-down-menu