Question

www.amyyatsuk.com

我通过验证器运行代码，它不喜欢我在无序列表中合并div的方法。我正试图在下拉导航菜单中找到内部边框。

实现同样效果的有效标记是什么？

HTML：

<div id="linksLeft">
    <ul class="menu">
        <li id="about"><a href="#">about</a></li>
        <li id="portfolio"><a href="editorial.html">portfolio</a>
        <ul class="subMenu" id="subNav"> **<div id="subnavborder">**
            <li><a href="editorial.html">editorial</a></li>
            <li><a href="advertising.html">advertising</a></li>
            <li><a href="packaging.html">packaging</a></li>
            <li><a href="photography.html">photography</a></li> **</div>**
        </ul>
        </li>
    </ul>
</div>

CSS：

#subnavborder {
    margin:10px;
    border: 6px solid white;
    border-radius:6px;
}

Answer 1

我会使用:after伪选择器，如下所示：

Fiddle

.subMenu:after {
    content: '';
    display: block;
    border: 6px solid white;
    border-radius:6px;
    position: relative;
    width: figure it out;
    height: figure it out;
    left: figure it out;
    top: figure it out;
}

Answer 2

两种选择

使用常规边框regular fiddle。 和 使用内部边框internal fiddle

常规边框 您可以使用此类

来设置UL元素的边框样式

.subnavborder {
    margin:10px;
    border: 6px solid black;
    border-radius:6px;
}

除非出于其他原因，否则你不需要div 标记如下

<div id="linksLeft">
    <ul class="menu">
        <li id="about"><a href="#">about</a></li>
        <li id="portfolio"><a href="editorial.html">portfolio</a>
        <ul class="subMenu subnavborder" id="subNav"> 
            <li><a href="editorial.html">editorial</a></li>
            <li><a href="advertising.html">advertising</a></li>
            <li><a href="packaging.html">packaging</a></li>
            <li><a href="photography.html">photography</a></li> 
        </ul>
        </li>
    </ul>
</div>

在此regular fiddle中查看。我更改了边框颜色以显示它然后随意调整超出的等级。

内部边框替代

如果要保持半径，则需要使用伪元素选择器，如本例所示

我使用与以前相同的标记。黑色边框只是为了欣赏内部边界需要位置相对，因为我们将定位引用此元素的伪元素

 .subnavborder {
       position:relative;

        border:1px solid black;
    }

由于内部边界可能与列表装饰冲突，我们会按照您的意愿应用一些保证金

    .subnavborder li{
       margin:10px;
    }

现在是伪元素

.subnavborder:after {
    border: 2px solid #ff0000;
    border-radius:6px;
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
}

得到它？我们正在添加一个鬼元素。修改像素，颜色等深度看到它在internal fiddle

工作

不需要半径？ 如果您不想使用伪元素，则使用属性大纲（但不包含半径...）的解决方案如果你想要它，请求它，我把它包括在这里。

Answer 3

如果您正在谈论HTML5，那么您也在谈论CSS3，这意味着box-shadow通常得到支持。

box-shadow支持偏移，这样您就可以看到在边框之外继续背景。

放手一搏：

ul.subMenu {
    background-color: #93b9bb;
    border: 5px solid #fff

    /* Your other styles here */

    -moz-box-shadow: 0px 0px 0px 10px #93b9bb;
    -webkit-box-shadow: 0px 0px 0px 10px #93b9bb;
    -o-box-shadow: 0px 0px 0px 10px #93b9bb;
    box-shadow: 0px 0px 0px 10px #93b9bb;
}

看看at the JSFiddle。

这不会使用:before或:after伪元素黑客，它会为您提供更干净的CSS，以及更容易控制框阴影的事实（不position: absolute和left right等值）。上述box-shadow属性中的第四个像素值定义了阴影偏移。它之前的0px指定0px模糊，即完全清晰的阴影。

在下拉菜单（无序列表）中创建边框的HTML5有效方法是什么？

3 个答案: