Не удалось добавить границу

Question

У меня возникли проблемы с добавлением границы в мое меню.

Если я попробую пограничный стиль: паз; ничего не происходит, но если я делаю border-top: solid; кажется, но только если я сделаю сторону и у меня сплошная граница?

Его простое липкое меню, которое придерживается при прокрутке.

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/ скрипка с кодом и верхней границей меню.