Question

我在菜单上添加边框时遇到了问题。

如果我尝试边框式：凹槽;没有任何反应，但如果我做边界顶部：坚实;它出现但只有我做了一面并且边界稳固？

它是一个简单的粘性菜单，在滚动时会粘住。

HTML

<div class="menu">
        <ul>
                <li><a href="#">About Me</a></li>
                <li><a href="#">My Work</a></li>
                <li><a href="#">Experience</a></li>
                <li><a href="#">Contact Me</a></li>

            </ul>

CSS

* {font-family:arial; margin:0px; padding:0;}
.menu {
border-top:groove;
border-color:#FFF;
background-color:#000;
font-size:30px;
color:#000;
height:50px;
line-height:30px;
width:100%;
text-align:center;
}
.content {margin-top:10px;}
.menu-padding {padding-top:40px;}
.content p {margin-bottom:20px;}
.sticky {position:fixed; top:0;}
ul{border-style:double;}
li{ display:inline-block; }

JQuery的

 $(document).ready(function(){

var menu = document.querySelector('.menu');
var origOffsetY = menu.offsetTop;

function scroll () {
if ($(window).scrollTop() >= origOffsetY) {
$('.menu').addClass('sticky');
$('.content').addClass('menu-padding');
} else {
$('.menu').removeClass('sticky');
$('.content').removeClass('menu-padding');
}  


}

document.onscroll = scroll;

Answer 1

试试这个，使用边框速记

border-top:3px groove #fff;

http://jsfiddle.net/SMxp9/摆弄你的代码，以及菜单上的顶部边框。

无法添加边框

1 个答案: