html - 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;
    .........
}

这样您就可以分别设置垂直和水平边框的宽度。您还可以通过指定单独的 border-top border-left 等来进行操作。