2

我在这里扯头发。我正在构建的网站上有水平下拉菜单。菜单由一个无序列表组成，下拉部分由隐藏的子元素组成，当您滚动父元素时会弹出这些元素。在 Firefox 中，一切似乎都很好，但在 Chrome 和 Safari 中，虽然每个菜单中的最后一个子元素按预期运行，但所有其他子元素都向左分流了一个像素。因此，在下面的示例中，子 A3、子 B4 和子 C2 与其各自的父级完美对齐，而其余的则不是。有人可以解释一下这里出了什么问题吗？下面的代码和屏幕截图...

应该怎么看...

它实际上看起来如何...

我已经包含了 CSS 的整个导航块，以防我错过了实际父/子部分之外的内容。

HTML

<nav>
    <div id="menu" class="menustrip">
        <ul>
            <li class="page_item">
                <a href="http://www.mysite.com/services">Parent A</a>
                <ul class='children'>
                    <li class="page_item"><a href="http://mysite.com/">Child A1</a></li>
                    <li class="page_item"><a href="http://mysite.com/">Child A2</a></li>
                    <li class="page_item"><a href="http://mysite.com/">Child A3</a></li>
                </ul>
            </li>
            <li class="page_item"><a href="http://www.mysite.com/products">Parent B</a>
                <ul class='children'>
                    <li class="page_item"><a href="http://mysite.com/">Child B1</a></li>
                    <li class="page_item"><a href="http://mysite.com/">Child B2</a></li>
                    <li class="page_item"><a href="http://mysite.com/">Child B3</a></li>
                    <li class="page_item"><a href="http://mysite.com/">Child B4</a></li>
                </ul>
            </li>
            <li class="page_item"><a href="http://www.mysite.com/products">Parent C</a>
                <ul class='children'>
                    <li class="page_item"><a href="http://mysite.com/">Child C1</a></li>
                    <li class="page_item"><a href="http://mysite.com/">Child C2</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

CSS

#menu, #main-nav{
    width: 950px;
    margin:  0 30px 0 0;
    padding-right: 30px;
    border-bottom-style: solid;
    border-bottom-width: 8px;
    border-bottom-color:  #78B2E2;
    text-align: right;  
}

ul#main-nav{
    list-style: none;
    padding-top: 10px;
    margin-right:30px;
}

.page_item, .navlink{
    display: inline-block;
    background-color: #243488;
    height: 34px;
    width: 110px;
    margin-left: 1px;
    text-align: center;
}

.page_item a, .navlink a{
    padding-top: 4px;
    display: block;
    height: 34px;
    width: 110px;
}

.page_item:hover, .navlink:hover{
    background-color: #78B2E2;  
}

.page_item:active, .navlink:active{
    background-color: #78B2E2;  
}

    /* Hide Sub Menus by default */  
       #menu ul li ul.children {  
        display:none; 
        z-index:100; 
    }  

       /* Display Sub Menus on rollover of parent */  
    #menu ul li:hover ul.children {  
        display:block;  
        position:absolute;  
        top:205px; 
        margin: 0 0 0 -11px; /*pull child menus in line with parent */  
        width: 132px;
        list-style: none;  
    }  

       /* Style sub menu items not to float like parent items */  
    #menu ul li ul.children li {  
        float:none;  
        width:110px;  
        height: 34px;
        background-color:#243488;           
        border-top: 3px solid #ffffff; 
        font-size: 11px;
    }

        #menu ul li ul.children li:hover {   
        background-color:#78B2E3;
        color:#243488;   
    }

    /* Sub Menu link color  */
    #menu ul li ul.children li a:hover {  
        color:#243488;  
    }

    #menu ul li ul.children li a {  
        color:#ffffff;  
    }
4

2 回答 2

1

不确定是什么原因导致它，但它与列表项<ul class="children">是内联块并且 ul 本身居中的事实有关。

所以你有两个解决方案：要么将 ul 向左对齐而不是居中

.children {text-align:left;}

或者，使其列表项成为块而不是内联块。

.children > li {display:block;}

这些调整中的任何一个都将消除显示异常。在这两种情况下，您还必须增加左边距，但我相信这不会成为问题。

于 2013-10-27T18:34:35.353 回答
0

更改.children .page_item为display:block而不是display:inline-block似乎在我的 Chrome 中修复它。这也需要更多的margin-left来重新对齐。

.children .page_item {
 display:block;
margin-left:10px;
}
于 2013-10-27T18:35:03.733 回答