Создать одно подменю больше других, чтобы включить форму

Question

У меня есть вертикальное навигационное меню, и я пытаюсь использовать в качестве моего последнего варианта, который является логином, выскакивающую большую (более широкую и более высокую) секцию, а не меньшую для других якорей меню. Я не совсем уверен, как это сделать, я бы просто создать еще один класс 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

Я добавил немного стиля CSS, чтобы решить вашу ошибку

пожалуйста, проверьте эту ссылку

jsfiddle.net/5TfpH/5/

Answer 2

Я вижу, что вы используете <a class="login" href="#">Login</a> который вы использовали class,

В CSS при использовании класса вы должны использовать "." использовать этот класс

ех. HTML:<a class="login" href="#">Login</a>

CSS: .login{ some css style here }

вы будете использовать только #, когда вы используете идентификатор

ех. HTML:<a id="login" href="#">Login</a>

CSS: #login{ some css style here }

о вашем вопросе, вот скрипка моего ответа: http://jsfiddle.net/5TfpH/6/

Answer 3

Использовать этот

<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");


    }



    );

});

это вызовет элемент при наведении мыши, но он снова исчезнет при наведении мыши. Если вы хотите, вы можете использовать наведение мыши, чтобы оно отображалось при наведении мыши на него. или вы можете использовать функцию щелчка.