2

我遇到了一些 CSS 尝试在下拉菜单中的每个元素之后给我的下拉表一些 1 px 实心黑线的问题。这就是我的菜单现在的样子

当前的

这就是我希望它看起来的样子，除了我border: 1px solid black;将这一行放在 .menu li a { } 中，但我不希望它应用于草稿按钮，它在这张图片中有一个双边框。

我怎样才能解决这个问题？

在此处输入图像描述

图片中下拉元素的代码。

.menu .dropdown_1col {
    margin:4px auto;
    left:-999em;

    position:absolute;
    background:#F4F4F4;
     border: 1px solid black;
    text-indent:15px;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
}

   .menu li {
        float:left;
        text-align:center;
        position:relative;
        padding: 4px 10px 4px 10px;
        margin-right:30px;
        margin-top:7px;
        border:none;

    }
    .menu li:hover {
        z-index:2;
        background:#F4F4F4;
        border:1px solid #aaaaaa;
        padding: 4px 9px 4px 9px;


        /* CSS 3 Stylings */

        background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

    }
    .menu li a {
        color: #EEEEEE;
        outline:0;
        text-decoration:none;
        display:block;
        text-shadow: 1px 1px 1px #000;


    }
    .menu li:hover a {
        color:#161616;
        text-shadow: none;
    }
    .menu li .drop {
        padding-right:21px;
        background:url("img/drop.png") no-repeat right 8px;
    }
    .menu li:hover .drop {
        padding-right:21px;
        background:url("img/drop.png") no-repeat right 7px;
    }
    .menu li:hover div a {
        color:#444;
    }
    .menu li:hover div a:hover {
        color:#777;
    }
    .menu li ul li a:hover {
        color:#777;
    }
4

2 回答 2

2

改成：

{
    .........
    border: 1px 0px solid #aaaaaa;
    .........
}

这样，您将分别设置 vert 和 horz 边框的宽度。您还可以通过指定 individualborder-top border-left等来玩转。

于 2012-08-13T02:53:54.367 回答
1

为了避免这个问题，你可以试试这个：

CSS 代码

    .menu li a{
      border:none;
    }

别的

   .menu li{
      border:none;
    }

即你必须阻止其中之一。请申请一个。如果您使用 .menu li 边框，那么您不需要为 .menu li a 使用边框，反之亦然。

于 2012-08-13T05:38:28.433 回答