0

メニュー名 (つまり、メニュー 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 }
4

1 に答える 1

2

あなたの問題は、<h5>デフォルトで大きな上下マージンを持つタグを使用していることです。

h5 {
    margin-bottom: 0;
}

jsフィドル

于 2013-03-10T14:36:05.940 に答える