title: How to build Menu bar with bottom border / box shadow in border?
body: <p>I built a menu and I did box-shadow in the top of the menu and when it hover. But  I still want that the box shadow will be fixed for the floor of the menu.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="head"&gt;
          &lt;ul id="menu"&gt;
              &lt;li&gt;&lt;a class="active" href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt; Buy&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Media&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Support&lt;/a&gt;&lt;/li&gt;
              &lt;li class="border"&gt;&lt;/a&gt;
          &lt;/ul&gt;
          &lt;div id="logo"&gt;TheCsgo&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      direction:rtl;
      margin:0;
      padding:0;
      font-family: 'Open Sans Hebrew', sans-serif;
      background-image:url('http://on-winning.com/wp-content/uploads/2016/01/J3jrEQs.jpg');
  }
  .head {
      background-color:#2980b9;
      width:100%;
      height:100px;
  }
  #menu{
      margin:0;
      padding:0;
      list-style-type;
      none;
  }
  #menu li {
      display:inline;
      float:right;
      padding-right:60px;
  }
  #menu li a {
      display:block;
      padding-top:38px;
      color:#FFFFFF;
      text-decoration:none;
      font-size:16px; transition: 0.3s ease-out;
      box-shadow:inset 0px 4px #2980b9;
  }
  #menu li a:hover {
       box-shadow:inset 0px 4px #FFFFFF;
  }
  #menu li a.active {
       box-shadow:inset 0px 4px #FFFFFF;
  }
  #logo {
       margin-left:30px;
       float:left;color:#FFFFFF;
       font-size:52px;
       margin-top:10px;
  }
  .body2 {
      width:1300px;
      height:800px;
      background-color:#2980b9;
      opacity: 0.8;
      margin:auto;
      display:block;
      margin-top:35px;
      color:#FFFFFF;
      direction:rtl;
   }
  .body2 p {
      font-size:16px;
      padding-right:15px;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/71q10huy/" rel="nofollow noreferrer">Full code</a></p>