Question

我想减少菜单名称（即菜单I）和相关菜单项（即传记，出版物）之间的巨大空间。是什么造成了额外的空间，我该如何减少它？这是一个jsfiddle链接：link 非常感谢

<body>
<div id="header"></div>
<div id="logo">My Name</div>
<div id="mainmenu">
  <ul>
    <li>
      <h5>Menu I</h5>
      <ul>
        <li><a title="" href="">Biography</a></li>
        <li><a title="" href="">Publications</a></li>
      </ul>
    <li>
      <h5>Menu 2</h5>
      <ul>
        <li><a title="" href="">Demo</a></li>
        <li><a title="" href="">Features</a></li>
        <li><a title="" href="">Comparison</a></li>
      </ul>
    </li>
  </ul>
</div>
<div id="intro-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</div>
</body>

CSS：

@charset "UTF-8";
/* CSS Document */

#header {
    width: 100%;
    height: 76px;
    background-color: #005EBC;
}

#logo {
    position: absolute;
    left: 20px;
    top: 35px;
    color: white;
    font-size: 20px;
}

#intro-text {
    width: 300px;
    position: absolute;
    top: 90px;
    left: 20px;
    font-size:12px;
}

/* mainmenu */

H5 {
text-transform: uppercase;
}

#mainmenu {
    width: 100%;
    min-height: 140px;
    padding-bottom: 20px;
    margin-top: -40px;
    *padding-top: -40px;
    overflow: hidden;
}

#mainmenu ul {
    list-style: none;
    margin: 0;
    float: right;
    color: #C3C;
}

#mainmenu ul li {
    display: inline-block;
    float: left;
    width: 140px;
    line-height: 20px;
}

#mainmenu>ul>li { margin-left: 20px }

#mainmenu ul li a {
    font-size: 12px;
    display: block;
}

#mainmenu ul li a,
#mainmenu ul ul:hover li a { color: green }


#mainmenu ul ul li a:hover,
#mainmenu ul ul li.current-menu-item a { color: red }

Answer 1

您的问题是，您使用的是<h5>代码，该代码默认带有大量的上下边距。

h5 {
    margin-bottom: 0;
}

jsFiddle

如何减少菜单标题和项目之间的空间？

1 个答案: