Question

我构建了一个菜单，我在菜单顶部和悬停时做了盒子阴影。但我仍然希望盒子阴影将固定在菜单的地板上。

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

Full code

Answer 1

您可以使用多个阴影并使用line-height调整链接的height大小：

＆＃13;

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

＆＃13;

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

＆＃13;

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

您还可以使用flex和justify-content将每个元素保留在一行中，并让元素之间的间距保持自己。 https://jsfiddle.net/71q10huy/3/

＆＃13;

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

＆＃13;

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

＆＃13;

如何在边框中构建带有底部边框/框阴影的菜单栏？

1 个答案: