Как построить строку меню с нижней границей / тенью коробки в границе?

Я построил меню, и я сделал бокс-тень в верхней части меню и когда он зависает. Но я все равно хочу, чтобы тень коробки была зафиксирована на полу меню.

HTML:

<body>
    <div class="head">
        <ul id="menu">
            <li><a class="active" href="index.html">Home</a></li>
            <li><a href="index.html">About</a></li>
            <li><a href="index.html"> Buy</a></li>
            <li><a href="index.html">Media</a></li>
            <li><a href="index.html">Support</a></li>
            <li class="border"></a>
        </ul>
        <div id="logo">TheCsgo</div>
    </div>
</body>

стиль CSS:

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;
}

Полный код

1 ответ

  1. вы можете использовать несколько теней и использовать line-heightдля размера heightваших ссылок:

    @import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
    
    /* Index page */
    
    html {
      margin: 0;
      direction: rtl;
      font-family: 'Open Sans Hebrew', sans-serif;
    }
    
    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%;
      overflow:hidden;
    }
    
    #menu {
      margin: 0;
      padding: 0;
    }
    
    #menu li {
      display: inline;/* kills the bullet*/
      float: right;
      padding-right: 40px;
    }
    
    #menu li a {
      display: block;
      line-height:100px;
      color: #FFFFFF;
      text-decoration: none;
      font-size: 16px;
      padding:0 1em;
      transition: 0.3s ease-out;
      box-shadow: inset 0px 4px #2980b9, inset 0px -4px #2980b9;
    }
    
    #menu li a:hover,
    #menu li a.active{
      box-shadow: inset 0px 4px #FFFFFF,inset 0px -4px #FFFFFF;
    }
    
    
    #logo {
      margin-left: 30px;
      float: left;
      color: #FFFFFF;
      font-size: 52px;
      margin-top: 10px;
    }
    <div class="head">
      <ul id="menu">
        <li><a class="active" href="index.html">Home</a>
        </li>
        <li><a href="index.html">About</a>
        </li>
        <li><a href="index.html"> Buy</a>
        </li>
        <li><a href="index.html">Media</a>
        </li>
        <li><a href="index.html">Support</a>
        </li>
      </ul>
      <div id="logo">TheCsgo</div>
    </div>

    https://jsfiddle.net/71q10huy/1/



    вы также можете использовать flexи justify-contentдержать все элементы на одной линии и позволить расстоянию между элементами заботиться о себе. https://jsfiddle.net/71q10huy/3/

    @import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
    
    /* Index page */
    
    html {
      margin: 0;
      direction: rtl;
      font-family: 'Open Sans Hebrew', sans-serif;
    }
    
    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%;overflow:hidden;
    }
    
    .head, #menu {
      margin: 0;
      padding: 0;
      display:flex;
      flex:1;
      flex-flow:row reverse;
      justify-content:space-between;
      list-style-type:none;
    }
    
    #menu  {
      margin-left:15%
    }
    
    #menu li a {
      display: block;
      line-height:100px;
      color: #FFFFFF;
      text-decoration: none;
      font-size: 16px;
      padding:0 1em;
      transition: 0.3s ease-out;
      box-shadow: inset 0px 4px #2980b9, inset 0px -4px #2980b9;
    }
    
    #menu li a:hover,
    #menu li a.active{
      box-shadow: inset 0px 4px #FFFFFF,inset 0px -4px #FFFFFF;
    }
    
    
    #logo {
      margin-left: 30px;
      float: left;
      color: #FFFFFF;
      font-size: 52px;
      margin-top: 10px;
    }
    <body>
      <div class="head">
        <ul id="menu">
          <li><a class="active" href="index.html">Home</a></li>
          <li><a href="index.html">About</a></li>
          <li><a href="index.html"> Buy</a></li>
          <li><a href="index.html">Media</a></li>
          <li><a href="index.html">Support</a></li>
        </ul>
        <div id="logo">TheCsgo</div>
      </div>
    
    
    </body>