下拉菜单边框答案

【问题标题】：Drop down menu borders下拉菜单边框
【发布时间】：2014-07-11 09:56:07
【问题描述】：

我正在尝试创建一个简单的下拉菜单。我目前拥有的内容如下：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;
}

感谢您的宝贵时间！

【问题讨论】：

嗨，你能做到吗？反应灵敏吗？

标签： css menu border

【解决方案1】：

这里是构建超级菜单的完整教程。希望这可以帮助。

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

将鼠标悬停在“4 列”/这就是您的确切要求/

【讨论】：

【解决方案2】：

你需要做以下事情：

在“#menu li a {}”中添加“border-bottom: 1px solid #FFF”，然后将下拉菜单向上移动 1px。

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

【讨论】：