下拉菜单不工作
问题描述：
当我将光标从About Me li元素移开时，下拉菜单消失了，我知道如果我调整top属性，它会起作用，但我想在导航栏之间保留一点距离和下拉菜单，我不想js或jquery修复，现在我只想知道这是否可以用CSS来完成。下拉菜单不工作
HTML CSS &
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;
}<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>
答
您可以使用转换。这是一个例子。希望它通过定位下拉立即菜单项下面，并给它一些顶尖的填充分离菜单项的下拉有助于
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>+0
谢谢Stormhashe为你的时间和你的建议，它的作品就像一个魅力。我想问题是显示属性，而不是我应该使用可见性属性？因为我试图使用转换，但它没有工作较早与显示属性 – Janit
+0
酷。转换不适用于显示，但会与可见性^^ – Stormhashe
答
你可以做到这一点。
这里的工作演示（我修剪你的代码到一个minimal, complete, verifiable example，使之成为别人谁运行到同样的问题很有用）
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;
}<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>
https：//开头的jsfiddle .net/dwdfc0by/ – Janit
你有什么尝试？你在那里使用什么网格系统？这是最[最小，完整，可验证]（stackoverflow.com/help/mcve）示例吗？最后一个应该可以帮助你找出问题 – henry
我看着codepen，堆栈溢出。 W3schools，但答案不是我所期待的。我正在使用960.gs框架。 – Janit