如何导航栏和标题之间移除空间或间隙

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

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

来源

2017-10-05 Faisal

难道你不能在#nav元素上放一个负边距吗？ – nockieboy

是的，但没有工作 – Faisal

它住在什么地方？与您的代码，我们无法看到它在屏幕上 –

好吧，我只是在评论在这里把这个，而不是因为我猜费萨尔已经修复了这个样子。

将margin-top：style设置为负数（例如-10px）会将选定元素向上移动该数量。因此，补充说：

margin-top: -10px;

您#nav CSS应该可以解决这个问题 - 它只是设置正确的值的情况。

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

小心分享您的解决方案？

来源

2017-10-06 16:23:49 nockieboy

如何导航栏和标题之间移除空间或间隙

回答

相关问题