下拉菜单不工作

当我将光标从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>

来源

2016-09-23 Janit

https：//开头的jsfiddle .net/dwdfc0by/ – Janit

你有什么尝试？你在那里使用什么网格系统？这是最[最小，完整，可验证]（stackoverflow.com/help/mcve）示例吗？最后一个应该可以帮助你找出问题 – henry

我看着codepen，堆栈溢出。 W3schools，但答案不是我所期待的。我正在使用960.gs框架。 – Janit

您可以使用转换。这是一个例子。希望它通过定位下拉立即菜单项下面，并给它一些顶尖的填充分离菜单项的下拉有助于

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>

来源

2016-09-23 16:44:41 Stormhashe

谢谢Stormhashe为你的时间和你的建议，它的作品就像一个魅力。我想问题是显示属性，而不是我应该使用可见性属性？因为我试图使用转换，但它没有工作较早与显示属性 – Janit

酷。转换不适用于显示，但会与可见性^^ – 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>

来源

2016-09-27 16:18:11 henry

下拉菜单不工作

回答

相关问题