Question

我正在尝试创建一个基本的下拉菜单。我对齐时遇到问题。如何让子菜单项直接在另一个之下？例如，我正在尝试将Twitter，Instagram和Facebook置于＆＃34; Social＆＃34;之下。感谢。

HTML

<body>
    <ul class="main-nav">
        <li>Home</li>
        <li>Projects</li>
        <li class="dropdown">
            Social
            <ul class="sub">
                <li>Twitter</li>
                <li>Facebook</li>
                <li>Instagram</li>
            </ul>
        </li>
    </ul>
</body>

CSS

body {
    background: #000000;
    color: white;
}

.main-nav {
    float: left;
}

.main-nav li {
    font-size: 10px;
    display: inline;
    padding-right: 10px;
}

.main-nav .sub {
    color: pink;
    float: none;
    z-index: -200;
}

//**  .sub{display: none;

}
.dropdown:hover > .sub {
    display: block;
    position: absolute;
}

Answer 1

以下是它的基础知识。

JSFiddle

var d = transaction["in"][0]["prev_out"]["hash"];

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: black;
}
ul {
  list-style-type: none;
  color: white;
}
.main-nav >li {
  display: inline-block;
  position: relative;
  padding-right: 10px;
}
.sub {
  position: absolute;
  top: 100%;
  left: 0;
  color: pink;
  /* display:none */ /* disabled for demo */
}

.dropdown:hover .sub {
  display:block;
  }

Answer 2

由于块级元素占用了自己的行，因此该规则应该包含：

.sub li {
    display: block;
}

添加到.main-nav .sub：

position: absolute;
padding: 0;

＆＃13;

body {
  background: #000000;
  color: white;
}

.main-nav {
  float: left;
}

.main-nav li {
  font-size: 10px;
  display: inline-block;
  padding-right: 10px;
}

.main-nav .sub {
  position: absolute;
  padding: 0;
  color: pink;
  float: none;
  z-index: -200;
}

.sub li {
    display: block;
}

＆＃13;

<body>
    <ul class="main-nav">
        <li>Home</li>
        <li>Projects</li>
        <li class="dropdown">
            Social
            <ul class="sub">
                <li>Twitter</li>
                <li>Facebook</li>
                <li>Instagram</li>
            </ul>
        </li>
    </ul>
</body>

＆＃13;

导航菜单对齐

2 个答案: