css菜单样式

Question

我遇到一些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;
    }

Answer 1

更改为：

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

这样，您将分别设置vert和horz边框的宽度。您也可以通过指定个人border-top border-left等来开展游戏。

Answer 2

为避免此问题，您可以尝试：

CSS CODE

    .menu li a{
      border:none;
    }

的否则 的

   .menu li{
      border:none;
    }

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