下拉菜单边框

Question

我正在尝试为其创建一个简单的下拉菜单。我目前的情况如下：http://jsfiddle.net/Wt9UC/

现在，我想要实现的目标更像是Fiverr所拥有的东西，供参考。

为了澄清，我试图让菜单项周围的边框（顶部，左侧，右侧）以及悬停时出现的整个子项目框周围。如果我的措辞不清楚，下面的图片可能会有所帮助。

我尝试过使用图层（例如将子项目放到前面，希望覆盖边界线），但效果并不理想。

我的HTML：

<ul id="menu">
    <li><a href="#">Test</a>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>
    </li>
</ul>

我的CSS：

#menu a {
    color: black;
}

#menu {
    padding: 0;
    margin: 0;
    list-style-type: none;
    height: 30px;
}

#menu li {
    float: left;
}

#menu li a {
    padding: 9px 20px;
    display: block;
    text-decoration: none;
    font-size: 12px;
}

#menu a:hover {
    color: #c5cbc9;
    border-radius: 3px;
    border-left: 1px solid;
    border-top: 1px solid;
    border-right: 1px solid;
}

/* Submenu */
#menu ul {
    border-radius: 3px;
    border: 1px solid;
    position: absolute;
    left: -9999px;
    top: -9999px;
    list-style-type: none;
}

#menu li:hover { /*had bg*/
    position: relative;
}

#menu li:hover ul { /*had bg*/
    left: 0px;
    top: 30px;
    padding: 0px;
}

#menu li:hover ul li a {
    padding: 5px;
    display: block;
    width: 168px;
    text-indent: 15px; /*had bg*/
}

#menu li:hover ul li a:hover {
    text-decoration: underline;
}

谢谢你的时间！

Answer 1

这是一个用于构建Mega菜单的完整教程。希望这可以帮助。

http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129

演示链接：http://cdn.tutsplus.com/net/uploads/legacy/819_megamenu/demo/index.html

将鼠标悬停在＆＃34; 4列＆＃34; /这是您的确切要求/

Answer 2

你需要做以下事情：

添加＆＃34; border-bottom：1px solid＃FFF＆＃34;你的＆＃34; #menu li a {}＆＃34;然后将你的下拉列表向上移动1px。

link to fiddle http://jsfiddle.net/cL2x7/