上部に境界線を配置するにはどうすればよいですか？

Question

それは簡単なはずですが、どうすればよいか分かりません。私が欲しいのは、.currentクラスがナビゲーションメニュー内の現在のリスト項目に境界線を追加していることです。

私は（例を参照してください。http://codepen.io/anon/pen/jARqOr）がすでにこれをやった しかし、私は境界線がこのIMAG（赤枠）のように、ヘッダの先頭に整列したいと思います：

この結果を得るにはどうすればよいですか？

あなたのお返事をお待ちしております。

ありがとうございました。

Answer 1

私はこれが最高ソリューションであるかどうかわからないんだけど、これは働いていた：（ヘッダーのパディングの負の値）を-55pxするマージントップの設定

ul li a.current { 
    padding-top: 50px; 
    margin-top: -55px; 
} 

は、トップにそれを取ります50px（55px - 5pxの境界線）のパディングトップを追加すると、テキストが他のアンカー要素と同じになるようになります。

.currentアンカーの上にあるすべてのスペースは、クリック可能な領域の一部です。

Answer 2

あなたはこのような何かを試みることができる：

ul .current a { 
    padding-top: 42px; 
    background: linear-gradient(to bottom, #005f37 0%,#005f37 100%); 
    background-size: 100% 7px; 
    background-repeat: no-repeat; 
    color: #006038; 
} 

それは

黒が

とにかくこのコードは、単にCSSを使用するPhotoshopの

である私はあなたのコメントを見ていない

Answer 3

私の作品を。

see output you want just using CSS

- CSS -

ul li a.current { 
      border-top: 4px solid #000; 
      /*box-shadow: 0px -5px 0px black;*/ 
      padding :0px 5px 5px 5px; 
      color: red!important; 
    } 

    ul li a.current span { 
      padding:5px 0px ; 
      border-top: 2px solid red; 
      /*box-shadow: 0px -2px 0px red;*/ 

    } 

---同じサイズのダブルボーダーその後、 使用このCSSの代わりに

ul li a.current { 
     box-shadow: 0px -5px 0px black, /* add as many as you want */ 
     inset 0px 2px 0px red; 
     padding:5px; 
     color: red!important; 
    }