边界太宽了

时间:2014-06-05 20:11:04

标签: html css

我的网站上有这个下拉菜单,我想在菜单中添加边框底部,但边框显得过宽。 我已经检查了Border too wide because of margin的每一步,因为它似乎是同样的问题,但没有任何效果。

希望你能帮助我!!

enter image description here

这里的代码:

#dropdownmenu a {
        color:inherit !important;
        text-decoration:none !important}

#dropdownmenu {
        width:1050px;
        background:#137cd7;
        z-index:2;
        position:relative }
#dropdownmenu ul {
    text-align:left;
    display:inline;
    margin:0px;
    padding:10px 4px 25px 0;
    list-style:none }
#dropdownmenu ul li {
        display:inline-block;
        margin-right:10px;
        position:relative;
        padding:15px 15px 14px;
        cursor:pointer;
        -webkit-transition:all 0.2s;
        -moz-transition:all 0.2s;
        -ms-transition:all 0.2s;
        -o-transition:all 0.2s;
        transition:all 0.2s;
        color:#fff }
#dropdownmenu ul li:hover {
        background-color:#ffffff;
        color:#137cd7 }

@media screen and (-webkit-min-device-pixel-ratio:0)

#dropdownmenu ul li ul {
        top:44px !important}


#dropdownmenu ul li ul {
        padding:0px;
        position:absolute;
        top:47px;
        left:0px;
        width:170px;
        display:none;
        opacity:0;
        visibility:hidden;
        -webkit-transiton:opacity 0.2s;
        -moz-transition:opacity 0.2s;
        -ms-transition:opacity 0.2s;
        -o-transition:opacity 0.2s;
        -transition:opacity 0.2s }

#dropdownmenu ul li ul li {
        background-color:#fff;
        display:block;
        color:#222;
        border-left:1px solid #ccc;
        border-right:1px solid #ccc;}

#dropdownmenu ul li ul li:hover {
        color:#137cd7;
        background:#fff;
        text-decoration:none !important }

#dropdownmenu ul li:hover ul {
        display:block;
        opacity:1;
        visibility:visible;
border-bottom:1px solid #ccc; }    

和HTML:

<div id="dropdownmenu">
<ul>
    <li>
        <a href="/">Home</a></li>
    <li>
        <a href="/">Menu 1</a>
        <ul>
            <li>
                <a href="/">Submenu</a></li>
            <li>
                <a href="/">Submenu</a></li>
            <li>
                <a href="/">Submenu</a></li>
            <li>
                <a href="/">Submenu</a></li>
            <li>
                <a href="/">Submenu</a></li>
            <li>
                <a href="/">Submenu</a></li>
            <li>
                <a href="/">Submenu</a></li>
        </ul>
    </li>
    <li>
        <a href="/">Menu 2</a>
        <ul>
            <li>
                <a href="/">Submenu</a></li>
            <li>
                <a href="/">Submenu</a></li>
            <li>
                <a href="/">Submenu</a></li>
            <li>
                <a href="/">Submenu</a></li>
            <li>
                <a href="/">Submenu</a></li>
            <li>
                <a href="/">Submenu</a></li>
            <li>
                <a href="/">Submenu</a></li>
        </ul>
    </li>
    <li>
        <a href="/contact">Contact</a>
        <ul>
            <li>
                <a href="/contact"><img alt="" src="/files/19731/editor/images/support(1).JPG" style="width: 140px; height: 140px; border-width: 0px; border-style: solid;" /></a></li>
            <li>
                &nbsp;</li>
        </ul>
    </li>
</ul>

fiddle here

谢谢大家!

我添加了适合我的代码:     #dropdownmenu ul li ul li {margin-right:0;}

这个也有效: 1)从#dropdownmenu ul li ul li {border-left:0; border-right:0}并为#dropdownmenu ul li添加边框:hover ul {border:1px solid #ccc; border-top:0;}

3 个答案:

答案 0 :(得分:1)

原因是:

#dropdownmenu ul li {
   margin-right:10px;
}

该保证金导致您的下拉菜单扩展到应有的范围。尝试添加:

#dropdownmenu ul li ul li {
   margin-right: 0;
}

Fiddle

答案 1 :(得分:1)

Fiddle

从此处删除 border 样式

#dropdownmenu ul li:hover ul

并在此处添加

#dropdownmenu ul li ul li:last-child {
    border-bottom:1px solid #ccc;
}  

CSS选择器:last-child浏览器支持stat's here

答案 2 :(得分:0)

您可以采取两种解决方案

1)从#dropdownmenu ul li ul li {border-left:0; border-right:0}移除边框   并为#dropdownmenu ul li:hover ul {border:1px solid #ccc; border-top:0;}

添加边框

2)将border-bottom添加到#dropdownmenu ul li ul li的最后一个元素   #dropdownmenu ul li ul li:last {border-bottom: 1px solid #ccc;}如果浏览器支持不是问题