0

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

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

1 回答 1

2

您的问题是您使用的<h5>是默认带有大量顶部和底部边距的标签。

h5 {
    margin-bottom: 0;
}

jsFiddle

于 2013-03-10T14:36:05.940 回答