Question

当我将光标移离About Me li元素时，下拉菜单消失，我知道如果我调整top属性它会起作用，但我想在导航栏和下拉菜单之间保持一点距离，我不想要js或jquery修复，现在我只想知道是否可以用CSS完成。

HTML＆amp; CSS

＆＃13;

navboy {
  margin-top: 50px;
  height: 25px;
  border-radius: 20px;
  background-image: -webkit-linear-gradient(left, #999999 0.1%, #bfbfbf 50%, #cccccc);
  background-image: -o-linear-gradient(left, #999999 0.1%, #bfbfbf 50%, #cccccc);
  background-image: linear-gradient(left, #999999 0.1%, #bfbfbf 50%, #cccccc);
}
.nav {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
.nav li {
  display: inline-block;
  float: left;
  position: relative;
  margin-right: 40px;
  margin-left: 20px;
}
ul.nav a {
  display: inline-block;
  text-decoration: none;
  font-family: 'Abel', sans-serif;
  font-size: 110%;
  color: #000;
}
.nav li #embed {
  position: absolute;
  display: none;
  float: left;
  padding: 0;
  margin: 0;
  width: 150px;
  left: -20px;
  top: 140%;
  background: -webkit-linear-gradient(top left, #999999 0.1%, #bfbfbf 97%, #cccccc);
  ;
  border-radius: 10px;
}
.nav > li:hover > #embed {
  display: block;
}

＆＃13;

<body>
  <div class="container_12">
    <div class="grid_12">
      <div class="headshot push_5">
      </div>
    </div>
  </div>
  <div class="container_12">
    <div class="grid_12 navboy">
      <ul class="nav">
        <li><a href="#" id="me">About Me</a>
          <ul id="embed">
            <li><a href="#">Contact Me</a>
            </li>
            <li><a href="#">Download</a>
            </li>
          </ul>
        </li>
        <li><a href="#">My Journey</a>
        </li>
      </ul>
    </div>
  </div>
</body>

＆＃13;

Answer 1

您可以使用过渡。这是一个例子。希望它有所帮助

navboy {

    margin-top: 50px;
    height: 25px;
    border-radius: 20px;
    background-image: -webkit-linear-gradient(left, #999999 0.1%, #bfbfbf 50%, #cccccc);
    background-image: -o-linear-gradient(left, #999999 0.1%, #bfbfbf 50%, #cccccc);
    background-image: linear-gradient(left, #999999 0.1%, #bfbfbf 50%, #cccccc);
}


.nav {

    list-style: none;
    padding: 0px;
    margin:0px;
}

.nav li {

    display: inline-block;
    float: left;
    position: relative;
    margin-right: 40px;
    margin-left: 20px;
}

ul.nav a {

    display: inline-block;
    text-decoration: none;
    font-family: 'Abel', sans-serif;
    font-size: 110%;
    color: #000;
}

.nav li #embed {

    position: absolute;
    visibility: hidden;
    float: left;
    padding:0;
    margin:0;
    width:150px;
    left:-20px;
    top:140%;
    background: -webkit-linear-gradient(top left, #999999 0.1%, #bfbfbf 97%, #cccccc);;
    border-radius: 10px;
     transition-property: all;
    transition-duration: 1000ms;
    transition-timing-function: ease-in-out;
}

.nav > li:hover > #embed {
    visibility:visible;
}

<body>

    `<div class="container_12" >
        <div class="grid_12">
            <div class="headshot push_5">
        </div>
    </div>
</div>
    <div class="container_12">
        <div class="grid_12 navboy">
            <ul class="nav">
                <li><a href="#" id="me">About Me</a>
                    <ul id="embed">
                        <li><a href="#">Contact Me</a></li>
                        <li><a href="#">Download</a></li>
                    </ul>
                </li>
                <li><a href="#">My Journey</a></li>
            </ul>
        </div>
    </div>  
</body>

Answer 2

您可以通过在菜单项下方放置下拉菜单，并通过为菜单项添加一些顶部填充来将下拉列表与菜单项分开来实现此目的。

这是一个有效的演示（我已将您的代码修剪为minimal, complete, verifiable example，以使其对遇到同样问题的其他人有用）

＆＃13;

ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
li {
  display: block;
  float: left;
  position: relative;
  margin-right: 40px;
  margin-left: 20px;
}
a {
  display: inline-block;
}
li ul {
  position: absolute;
  display: none;
  float: left;
  padding: 20px 0 0; /* changed this */
  margin: 0;
  width: 150px;
  left: -20px;
  top: 100%; /* changed this */
}
li:hover > ul {
  display: block;
}

＆＃13;

<ul>
  <li><a href="#">About Me</a>
    <ul>
      <li><a href="#">Contact Me</a>
      </li>
      <li><a href="#">Download</a>
      </li>
    </ul>
  </li>
  <li><a href="#">My Journey</a>
  </li>
</ul>

＆＃13;

下拉菜单不起作用

2 个答案: