下拉菜单边框

Posted 2023-02-17

【中文标题】下拉菜单边框

【英文标题】：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;

感谢您的宝贵时间！

【问题讨论】：

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

【参考方案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/