我有一个 Verticle nav spry 菜单，我试图让我的最后一个选项是登录，一个更大(更宽和更高)的部分弹出而不是其他菜单 anchor 的较小部分。我不太确定该怎么做，我会创建另一个 css 类并只给菜单的那个部分吗？我对 css 很陌生，如果这很简单，请原谅我。我试图插入一个纯 css 表单，以便在我悬停时弹出登录信息。这是我尝试的 css，但没有成功
#login {
width: 20em;
height: 30em;
background: #666;
position: absolute;
right: -20em;
top: 0px;
display: none;
}
但这里是网站的 jsfiddle:http://jsfiddle.net/5TfpH/
在此先感谢您帮助新手!
最佳答案
我已经添加了一些 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>关于html - 创建一个比其他子菜单大的子菜单以包含表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21594340/