菜单切换CSS问题-将不显示或不起作用
两件事： 到目前为止，菜单隐藏在顶部，顶部边距为：-100px；点击后应该显示在横幅下方，但它不知道我似乎在尝试什么。菜单在代码/css中，但无法显示，我不知道为什么。我试图将其隐藏在上页边距中，并仅在用户请求时显示。我希望这有帮助菜单切换CSS问题-将不显示或不起作用,css,html,Css,Html,两件事： 到目前为止，菜单隐藏在顶部，顶部边距为：-100px；点击后应该显示在横幅下方，但它不知道我似乎在尝试什么。菜单在代码/css中，但无法显示，我不知道为什么。我试图将其隐藏在上页边距中，并仅在用户请求时显示。我希望这有帮助 我的css徽标中的多色类型？必须有一种更干净的方法来实现视觉效果。对我来说似乎不可靠 为什么我的菜单切换不起作用？这些数字看起来不错吧？我整天都在看这个代码，我不知道，我的眼睛很痛 如果我按我的方式想把这个标题拉下来，导航就会简单地放在标题中，并且只会在手机或浏览器
@charset“UTF-8”；
/*CSS文档*/
/*--------PPGD CSS----------*/
身体{
背景：#fff；
保证金：140px 0px 0px 0px；
字体系列：“开放式Sans”，无衬线；
}
/*--------标题开始----------*/
div#topdiv{
位置：固定；
顶部：0px；
左：0px；
宽度：100%；
颜色：#0F0；
背景：#FFF；
不透明度：0.9；
填充：0px 0px 0px 0px；
z指数：99；
高度：58px；
网络工具包盒阴影：0px 0px 5px 0px rgba（138136138,1）；
moz盒阴影：0px 0px 5px 0px rgba（138136138,1）；
盒影：0px 0px 5px 0px rgba（138136138,1）；
z指数：99；
}
分区菜单容器{
高度：58px；
浮动：对；
右边距：10px；
填充：0px；
显示：块；
}
分区#集装箱{
最大宽度：942px；
最小宽度：320px；
对齐：居中；
保证金：0自动；
填充：0px；
位置：相对位置；
高度：0px；
显示：块；
左边距：自动；
右边距：自动；
}
/*--------标志开始----------*/
div#品牌{
浮动：左；
显示：块；
边际上限：0px；
左边距：10px；
字体大小：22px；
字体系列：“开放式Sans”，无衬线；
字号：800；
线高：90%；
颜色：#F60；
z指数：99；
}
布兰德1区{
浮动：左；
显示：块；
左边距：10px；
字体大小：22px；
字体系列：“开放式Sans”，无衬线；
字号：800；
线高：90%；
颜色：#F60；
}
布兰德2区{
浮动：左；
显示：块；
边缘顶部：10px；
字体大小：22px；
字体系列：“开放式Sans”，无衬线；
字号：800；
颜色：#666；
线高：90%；
}
布兰德3区{
浮动：左；
显示：块；
边缘顶部：7px；
左边距：-161px；
字体大小：22px；
字体系列：“开放式Sans”，无衬线；
字号：800；
颜色：#666；
线高：90%；
}
/*--------标志端----------*/
/*--------菜单开始----------*/
*{填充：0；边距：0；}
正文{字体系列：开放式SAN；}
a{文本装饰：无；颜色：#666；}
li{列表样式类型：无；}
导航{
文本对齐：居中；
浮动：对；
填充：15px；
显示：块；
边框底部：1px；
高度：19px；
边缘顶部：20px；
右边距：10px；
字体大小：13px；
字体系列：“开放式Sans”，无衬线；
字体大小：400；
字母间距：0.125em；
颜色：#666；
线高：100%；
}
导航：悬停{
浮动：对；
显示：块；
高度：19px；
边缘顶部：20px；
右边距：10px；
字体大小：13px；
字体系列：“开放式Sans”，无衬线；
字体大小：400；
字母间距：0.125em；
颜色：#f60；
光标：指针；
线高：100%；
边框底部样式：实心；
边框底色：#f60；
}
没有{
位置：绝对位置；
宽度：260px；
身高：100%；
背景：无；
}
div#SAVE{
宽度：0；
身高：0；
左边框：5px实心透明；
右边框：5px实心透明；
边框底部：5px#F60；
-webkit过渡：背景色500ms缓变1s；
-moz过渡：背景色500ms，放松1s；
-o型过渡：背景色500ms缓变1s；
过渡：背景色500ms，缓变1s；
}
}
/*--------菜单端----------*/
/*--------收割台端----------*/
/*--------页脚开始----------*/
div#页脚{
高度：30px；
底部：0px；
宽度：100%；
背景:#666；
字体大小：12px；
字体系列：“开放式Sans”，无衬线；
字体大小：300；
网络工具包盒阴影：0px-1px 5px 0px rgba（138136138,1）；
moz盒阴影：0px-1px 5px 0px rgba（138136138,1）；
盒影：0px-1px 5px 0px rgba（138136138,1）；
颜色：#FFF；
}
/*--------页脚结束-----------*/
*{填充：0；边距：0；}
正文{font-family:'Open Sans'Sans serif；}
a{文本装饰：无；颜色：#666；字体大小：14px；}
li{列表样式类型：无；}
标题{
宽度：100%；
高度：50px；
保证金：自动；
边框底部：1px实心#EEE；
背景：#FFF；
z指数：99；
}
.集装箱{
最大宽度：942px；
最小宽度：320px；
对齐：居中；
保证金：0自动；
填充：0px；
位置：相对位置；
高度：0px；
显示：块；
左边距：自动；
右边距：自动；
}
#布尔纳德{
浮动：左；
线高：50px；
字体大小：30px；
字体系列：“开放式Sans”，无衬线；
字号：800；
颜色：#F60；
}
导航{宽度：100%；文本对齐：居中；}
导航ul{线路高度：50px；}
导航li{显示：内联块；}
导航a{填充：10px；颜色：#FFF；}
导航a:悬停{背景：#F60；颜色：#fcfc；边界半径：5px；}
/*--------------------------------------------------*/
.菜单{
宽度：100%；
高度：35px；
背景:#666；
位置：绝对位置；
顶部：-100px；
z指数：-1；
过渡：所有.3s易于输入输出；
-webkit过渡：所有.3s易于输入输出；
-moz转换：所有.3轻松输入输出；
-ms转换：所有.3s易于输入输出；
-o型转换：所有.3s易于输入输出；
}
M
@charset "UTF-8";
/* CSS Document */
/*--------PPGD CSS----------*/
<style type="text/css">
body{
background: #fff;
margin: 140px 0px 0px 0px;
font-family: 'Open Sans', sans-serif;
}
/*--------HEADER Start----------*/
div#topdiv {
position:fixed;
top:0px;
left:0px;
width:100%;
color:#0F0;
background:#FFF;
opacity:0.9;
padding:0px 0px 0px 0px;
z-index:99;
height:58px;
webkit-box-shadow: 0px 0px 5px 0px rgba(138,136,138,1);
moz-box-shadow: 0px 0px 5px 0px rgba(138,136,138,1);
box-shadow: 0px 0px 5px 0px rgba(138,136,138,1);
z-index:99;
}
div#menucontainer {
height:58px;
float:right;
margin-right: 10px;
padding: 0px;
display:block;
}
div#container {
max-width: 942px;
min-width:320px;
align:center;
margin: 0 auto;
padding: 0px;
position: relative;
height:0px;
display:block;
margin-left: auto;
margin-right: auto;
}
/*--------LOGO Start----------*/
div#brand {
float:left;
display:block;
margin-top:0px;
margin-left:10px;
font-size: 22px;
font-family: 'Open Sans', sans-serif;
font-weight:800;
line-height: 90%;
color:#F60;
z-index:99;
}
div#brand1 {
float:left;
display:block;
margin-left:10px;
font-size: 22px;
font-family: 'Open Sans', sans-serif;
font-weight:800;
line-height: 90%;
color:#F60;
}
div#brand2 {
float:left;
display:block;
margin-top:10px;
font-size: 22px;
font-family: 'Open Sans', sans-serif;
font-weight:800;
color:#666;
line-height: 90%;
}
div#brand3 {
float:left;
display:block;
margin-top:7px;
margin-left:-161px;
font-size: 22px;
font-family: 'Open Sans', sans-serif;
font-weight:800;
color:#666;
line-height: 90%;
}
/*--------LOGO End----------*/
/*--------MENU Start----------*/
* {padding: 0; margin: 0; }
body { font-family: Open Sans; }
a { text-decoration: none; color:#666; }
li { list-style-type: none; }
nav {
text-align: center;
float:right;
padding: 15px;
display:block;
border-bottom: 1px;
height:19px;
margin-top:20px;
margin-right:10px;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
font-weight:400;
letter-spacing: 0.125em;
color:#666;
line-height: 100%;
}
nav:hover {
float:right;
display:block;
height:19px;
margin-top:20px;
margin-right:10px;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
font-weight:400;
letter-spacing: 0.125em;
color:#f60;
cursor:pointer;
line-height: 100%;
border-bottom-style: solid;
border-bottom-color: #f60;
}
nope {
position:absolute;
width: 260px;
height: 100%;
background: none;
}
div#SAVE{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px #F60;
-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s;
}
}
/*--------MENU End----------*/
/*--------HEADER End----------*/
/*--------FOOTER Start----------*/
div#footer {
height: 30px;
bottom:0px;
width: 100%;
background: #666;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
font-weight:300;
webkit-box-shadow: 0px -1px 5px 0px rgba(138,136,138,1);
moz-box-shadow: 0px -1px 5px 0px rgba(138,136,138,1);
box-shadow: 0px -1px 5px 0px rgba(138,136,138,1);
color: #FFF;
}
/*--------FOOTER End----------*/
* { padding: 0; margin: 0; }
body { font-family: 'Open Sans' sans-serif; }
a { text-decoration: none; color: #666; font-size: 14px; }
li { list-style-type: none; }
header {
width: 100%;
height: 50px;
margin: auto;
border-bottom: 1px solid #EEE;
background: #FFF;
z-index: 99;
}
.container {
max-width: 942px;
min-width:320px;
align:center;
margin: 0 auto;
padding: 0px;
position: relative;
height:0px;
display:block;
margin-left: auto;
margin-right: auto;
}
#brnad {
float: left;
line-height: 50px;
font-size: 30px;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
color: #F60;
}
nav { width: 100%; text-align: center; }
nav ul { line-height: 50px; }
nav li { display: inline-block; }
nav a { padding: 10px; color: #FFF; }
nav a:hover { background: #F60; color: #FCFCFC; border-radius: 5px; }
/*--------------------------------------------------*/
.menu {
width: 100%;
height: 35px;
background: #666;
position: absolute;
top: -100px;
z-index: -1;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.menu-icon {
float: right;
padding: 12px 15px;
color: #666;
background: #FFF;
border-radius: 5px;
margin: 5px 5px 0 0;
cursor: pointer;
z-index: 99;
}
.menu-icon:hover { color: #F60; }
#menuToggle { display: none; }
#menuToggle:checked ~ .menu { position: absolute; top: 100px; }
.content {
width: 100%;
margin: auto;
position: absolute;
top: 60px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
/*--------------------------------------------------*/
@media screen and (max-width: 480px){
nav li { display: block; }
nav a { display: block; border-bottom: 1px solid #666; padding: 0; }
nav a:hover { border-radius: 0; }
.menu { height: auto; top: -350px; }
#menuToggle:checked ~ .content { position: absolute; top: 370px; }
}
</style>
<!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" />
<link href="css/PPGD_styles" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/PPGD_styles.css">
<title>Phil Padilla | Portfolio</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="engine1/style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Open+Sans:800' rel='stylesheet' type='text/css'>
</head>
<body>
<td align="left" valign="top" bgcolor="#FF6600">
<div id="topdiv">
<div id="container">
<input type="checkbox" id="menuToggle">
<label for="menuToggle" class="menu-icon">☰</label>
<div id="brand2">GRAPHIC
<div id="brand">PHIL</div>
</div>
<p><br />
</p>
<div id="brand3">DESIGN
<div id="brand1">PADILLA</div>
</div>
<p> </p>
</div>
</div>
<nav class="menu">
<ul>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">RESUME</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<p> </p>
<p> </p>
<table width="942%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>