Question

我有一个verticle nav spry菜单，我试着让我的最后一个选项是登录，弹出一个更大（更宽和更高）的部分，而不是其他菜单锚点的较小部分。我不太确定如何做到这一点，我只是创建另一个css类，并给出该类菜单的那一点？我对css很新，如果这很容易就会有些抱歉。我试图插入一个纯css表单登录信息，当我悬停时弹出。这是css即时尝试没有运气

#login {
    width: 20em;
    height: 30em;
    background: #666;
    position: absolute;
    right: -20em;
    top: 0px;
    display: none;
}

但是这里是网站的jsfiddle：http://jsfiddle.net/5TfpH/

提前感谢帮助新手！

Answer 1

使用此

<li><a class="login" href="#">Login</a>
<div class="form" style="display:none">
  <form class="pure-form pure-form-stacked">
    <fieldset>
      <label for="email">Email</label>
      <input id="email" type="email" placeholder="Email">
      <label for="password">Password</label>
      <input id="password" type="password" placeholder="Password">
      <label for="remember" class="pure-checkbox">
        <input id="remember" type="checkbox">
        Remember me </label>
      <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </fieldset>
  </form>
  </div>
</li>

JS

$(document).ready(function() {

$(".login").hover(function() {

    $(".form").css("display", "block")
},

    function(){

    $(".form").css("display", "none");


    }



    );

});

这将在鼠标悬停时触发该元素，但在mouseout上它将再次消失。如果您需要，可以使用鼠标悬停，以便在用户鼠标悬停时显示。或者你可以使用点击功能。

Answer 2

我添加了一些css样式来解决你的错误

请查看此链接

jsfiddle.net/5TfpH/5 /

Answer 3

我发现您使用了<a class="login" href="#">Login</a>使用的class。

在使用CSS时，你必须使用'。'使用该类

离。 HTML： <a class="login" href="#">Login</a>

的CSS： .login{ some css style here }

当你使用id

时，你只会使用＃

离。 HTML： <a id="login" href="#">Login</a>

的CSS： #login{ some css style here }

关于你的问题，这是我答案的一个小提琴：http://jsfiddle.net/5TfpH/6/

创建一个比其他子菜单大的子菜单以包含表单

3 个答案: