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

【问题标题】：create one submenu larger than the others to include form创建一个比其他子菜单更大的子菜单以包含表单
【发布时间】：2019-07-07 09:33:59
【问题描述】：

我有一个垂直导航 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/

提前感谢您帮助新手！

【问题讨论】：

标签： html css yui-pure-css

【解决方案1】：

我添加了一些 CSS 样式来解决您的错误：

body {
	background-color: #A3A3A3;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
nav {
	background: #666;
	padding-top: 10em;
	width: 10em;
	position: absolute;
	top: 0;
	bottom: 0;
}
nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
nav ul a:hover, ul a:focus {
	background-color: #333;
}
nav ul li {
	position: relative;
}
nav ul li a {
	text-align: center;
	display: block;
	padding: 1em;
	color: #A3A3A3;
	text-decoration: none;
}
nav ul li ul {
	width: 10em;
	background: #666;
	position: absolute;
	right: -10em;
	top: 0px;
	display: none;
}
nav ul li ul:last-child {
	border-radius: 0 15px 15px 0;
}
nav ul li ul li:first-child a:hover {
	border-radius: 0 15px 0 0;
}
nav ul li ul li:last-child a:hover {
	border-radius: 0 0 15px 0;
}
nav ul li:hover > ul {
	display: block;
}
body h1 {
	vertical-align: central;
}
.pure-form {width: 15em;
	background: #666;
	position: absolute;
	right: -15em;
	top: 0px;
	display: none;}
.login:hover .pure-form {display:block;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="sideMenu.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">
</head>

<body>
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Post Jobs</a>
      <ul>
        <li><a href="#">Type 1</a></li>
        <li><a href="#">Type 2</a></li>
        <li><a href="#">Type 3</a></li>
      </ul>
    </li>
    <li><a href="#">Browse Jobs</a>
      <ul>
        <li><a href="#">Type 1</a></li>
        <li><a href="#">Type 2</a></li>
        <li><a href="#">Type 3</a></li>
        <li><a href="#">Type 4</a></li>
        <li><a href="#">Type 5</a></li>
        <li><a href="#">Type 6</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li class="login"><a href="#">Login</a>
      <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>
    </li>
  </ul>
</nav>
</body>
</html>

【讨论】：

【解决方案2】：

使用这个

<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>

$(document).ready(function() {

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

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

    function(){

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


    }



    );

});

这将在鼠标悬停时触发元素，但它会在鼠标移出时再次消失。如果你愿意，你可以使用鼠标悬停，这样当用户鼠标悬停时它就会显示出来。或者你可以使用点击功能。

【讨论】：

【解决方案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/

【讨论】：