Question

我在这里撕扯我的头发。我在我正在建设的网站上有水平下拉菜单。菜单由无序列表组成，下拉部分由隐藏的子元素组成，当您翻转父项时弹出这些子元素。在Firefox中，一切看起来都很好，但是，在Chrome和Safari中，每个菜单中的最后一个子元素按预期运行，所有其他子元素都被一个像素分开。因此，在下面的示例中，儿童A3，儿童B4和儿童C2与他们各自的父母完全一致，而其余的则没有。有人可以对这里出了什么问题有所了解吗？下面的代码和屏幕截图...

How it should look...

How it actually looks...

我已经包含了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;  
    }

Answer 1

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

所以你有两个解决方案：将ul对齐而不是将其对齐

.children {text-align:left;}

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

.children > li {display:block;}

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

Answer 2

将.children .page_item更改为display:block而不是display:inline-block似乎已在我的Chrome中修复此问题。这也需要更多余量来重新调整事物。

.children .page_item {
 display:block;
margin-left:10px;
}

css菜单中除了最后一个子元素之外的所有元素都向左移动一个像素

2 个答案: