如何删除导航栏和标题之间的空格或间隙

时间：2017-10-05 15:26:31

标签： html css

Here is the Screenshot

如何删除导航栏和标题之间的空格或间隙？

/* Pure CSS3 Multi Level Drop Down Navigation Menu */
/*             By www.Bloggermint.com            */

#nav {
  float: left;
  font: 13px calibri, Helvetica, Sans-serif;
  border: 1px solid #121314;
  border-top: 1px solid #2b2e30;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: visible;
  line-height: 10px;
  /* change the border height  of the menu*/
}

#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#nav ul li {
  float: left;
}

#nav ul li a {
  float: left;
  color: #d4d4d4;
  padding: 8px 21.5px;
  /* change the width of whole menu*/
  text-decoration: none;
  background: #3C4042;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59, 63, 65)), color-stop(0.55, rgb(72, 76, 77)), color-stop(0.78, rgb(75, 77, 77)));
  background: -moz-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
  background: -o-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

#nav ul li a:hover,
#nav ul li:hover>a {
  color: #FFF;
  /* change tabs font hover color */
  background: #3C4042;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
  background: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
  background: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}

#nav li ul a:hover,
#nav ul li li:hover>a {
  color: #FFF;
  /*  change the drop down font color*/
  background: #5C9ACD;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61, 111, 177)), color-stop(0.51, rgb(80, 136, 199)), color-stop(1, rgb(92, 154, 205)));
  background: -moz-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
  background: -o-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  border-top: 1px solid #7BAED9;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}

#nav li ul {
  overflow: visible;
  background: #3C4042;
  background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
  background-image: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
  background-image: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
  border-radius: 0 0 30px 30px;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  left: -999em;
  margin: 31px 0 0;
  /* change the position of drop down menu, up and down.*/
  position: absolute;
  width: 200px;
  z-index: 9999;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li:hover ul {
  left: auto;
}

#nav li ul a {
  background: none;
  border: 0 none;
  margin-right: 0;
  width: 156px;
  /*  change the border drop down menu border size*/
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
}

#nav li li ul {
  margin: -1px 0 0 200px;
  /*change the parent drop down list position, Right, Left*/
  -webkit-border-radius: 0 10px 10px 10px;
  -moz-border-radius: 0 10px 10px 10px;
  border-radius: 0 10px 10px 10px;
  visibility: hidden;
}

#nav li li:hover>ul {
  visibility: visible;
}

#nav li:hover>ul {
  left: auto;
}

#nav ul ul li:last-child>a {
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}

#nav ul ul ul li:first-child>a {
  -moz-border-radius: 0 10px 0 0;
  -webkit-border-radius: 0 10px 0 0;
  border-radius: 0 10px 0 0;
}
<div id="nav">
  <ul>
    <li><a href="https://lighthouse786.blogspot.com/">Home</a></li>
    <li><a href="#">Books</a>
      <ul>
        <li><a href="https://lighthouse786.blogspot.com/p/islamic-books.html">Islamic Books</a></li>
        <li><a href="https://lighthouse786.blogspot.com/p/poetry-books.html">Poetry Books</a></li>
        <li><a href="#">Knowledge Books</a></li>
        <li><a href="#">Computer Books</a></li>
        <li><a href="#">Programming Books</a></li>

      </ul>
    </li>

    <li><a href="#">Our Portfolio</a></li>
    <li><a href="#">One Dropdown</a>
      <ul>
        <li><a href="#">Level 2.1</a></li>
        <li><a href="#">Level 2.2</a></li>
        <li><a href="#">Level 2.3</a></li>
        <li><a href="#">Level 2.4</a></li>

        <li><a href="#">Level 2.5</a></li>
      </ul>
    </li>
    <li><a href="#">Three Levels</a>
      <ul>
        <li><a href="#">Level 2.1</a></li>
        <li><a href="#">Level 2.2</a></li>
        <li><a href="#">Pir Nasir Ud Din Shah  <font size="1">  &#9658; </font> </a>

          <ul>
            <li><a href="#">Level 2.3.1</a></li>
            <li><a href="#">Level 2.3.2</a></li>
            <li><a href="#">Level 2.3.3 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font size="1"> &#9658;  </font></a>


              <ul>
                <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2A</a></li>
                <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2B</a></li>
              </ul>






            </li>
            <li><a href="#">Level 2.3.4</a></li>
            <li><a href="#">Level 2.3.5</a></li>

            <li><a href="#">Level 2.3.6</a></li>
            <li><a href="#">Level 2.3.7</a></li>
          </ul>
        </li>
        <li><a href="#">Level 2.4</a></li>
        <li><a href="#">Level 2.5</a></li>
      </ul>

    </li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">About Me</a></li>
    <li><a href="#">AlhamduLillah</a></li>


  </ul>








</div>

1 个答案:

答案 0 :(得分：0)

好的，我只是把它放在这里，而不是在评论中，因为我猜Faisal以这种方式解决了这个问题。

将margin-top：样式设置为负数，例如-10px，会将所选元素向上移动该数量。所以补充：

margin-top: -10px;

到你的#nav CSS应该解决问题 - 这只是设置正确值的情况。

但是，如果没有看到header和nav的所有HTML标记，我无法保证这适用于您的情况。

关心分享您的解决方案？

相关问题
最新问题