由于我的网站有多个由多人设计的网页，因此我们决定创建一个独立的标头。这是代码。虽然它最初工作，现在经过一些调整，它突然不再响应。由于我们使用不同的CSS文件，因此必须使用内联编写的CSS，以避免与其他文件发生冲突。
Here is the code, your help in helping me figure out the issue is much appreciated!
Header code (HMTL + Inline CSS):
---------------
<style>
body
{
background-color: #fff;
}
#nav
{
font-family: 'Open Sans', sans-serif;
font-weight: 400;
position: fixed;
top: 0;
right: 1%;
z-index: 1030;
}
#nav > a
{
display: none;
}
#li-bg
{
border: 1px solid #fafafa;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
#nav li
{
position: relative;
list-style:none;
-webkit-border-radius: 6px;
border-color: #333 1px solid;
-moz-border-radius: 6px;
border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
background-color: transparent;
}
#nav li a
{
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #fff;
white-space: nowrap;
background-color: #fcfcfc;
}
#nav li a:active
{
background-color: #3498db!important;
}
#nav span:after
{
width: 0;
height: 0;
border: 0.313em solid transparent; /* 5 */
border-bottom: none;
border-top-color: #fff;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em; /* 5 */
}
/* first level */
#nav > ul
{
height: 2.75em; /* 60 */
}
#nav > ul > li
{
height: 100%;
float: right;
width: 130px;
background-color: #3498db;
}
#nav > ul > li > a
{
height: 100%;
font-size: .95em; /* 24 */
line-height: 2.5em; /* 60 (24) */
text-decoration:none;
text-align: center;
background-color:transparent;
}
#nav > ul > li:not( :last-child ) > a
{
border-right: 1px solid transparent;
}
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a
{
}
/* second level */
#nav li ul
{
display: none;
position: absolute;
top: 100%;
padding-top: 8px;
padding-left:40px;
}
#nav li:hover ul
{
display: block;
left: 0;
right: 0;
}
#nav li:not( :first-child ):hover ul
{
left: -1px;
}
#nav li ul a
{
font-size: 1.25em; /* 20 */
border-top: 1px solid #fcfcfc;
background-color:#3498db;
color: #fff;
font-size:.85em;
width:100px;
text-decoration: none;
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
background-color: #2c81ba;
}
@media only screen and ( max-width: 62.5em ) /* 1000 */
{
#nav
{
width: 100%;
position: static;
margin: 0;
}
}
@media only screen and ( max-width: 40em ) /* 640 */
{
html
{
font-size: 75%; /* 12 */
}
#nav
{
position: relative;
top: auto;
left: auto;
}
#nav > a
{
width: 3.125em; /* 50 */
height: 3.125em; /* 50 */
text-align: left;
text-indent: -9999px;
background-color: #3498db;
position: relative;
}
#nav > a:before,
#nav > a:after
{
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#nav > a:after
{
top: 60%;
}
#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type
{
display: block;
}
/* first level */
#nav > ul
{
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul
{
display: block;
}
#nav > ul > li
{
width: 100%;
float: none;
}
#nav > ul > li > a
{
height: auto;
text-align: left;
padding: 0 0.833em; /* 20 (24) */
}
#nav > ul > li:not( :last-child ) > a
{
border-right: none;
border-bottom: 1px solid #2c81ba;
font-size: 1em;
}
/* second level */
#nav li ul
{
position: static;
padding: 1.25em; /* 20 */
padding-top: 0;
}
}
</style>
<div style="width:100%; position:fixed;background-color:#f8f8f8;top:0;left:0;z-index:1000000; height:47px; font-size:14px!important; font-family: "Open Sans", Helvetica, Arial, sans-serif;">
<div>
<a href="http://www.example.com" style="
padding-left: 100px;
"><img src="http://www.example.com/images/logo.png" border="0"></a>
<nav id="nav" role="navigation" class="mainheader">
<ul class="clearfix">
<li><a href="http://www.example.com/connect.php"><i class="fa fa-home"></i> Connect</a> </li>
[var.loggedin; if [val] == '1'; then '<li> <a href="" aria-haspopup="true"><span><img src=[var.userpic;htmlconv=no;noerr] class=userpicimg style="width: 40px;border: #446db2 solid 1px;border-radius: 10%;"> [var.userdetails.user_firstname;noerr]</span></a> <ul> <li><a href="http://www.example.com/dashboard/index.php">Dashboard</a></li> <li><a href="http://www.example.com/dashboard/user.php">Profile</a></li> <li><a href="http://www.example.com/help.php">Help</a></li> <li><a href="http://www.example.com/logout.php">Logout</a></li></ul></li>'; else '<li> <a href="http://www.example.com/login.php">Log In</a> </li><li><a href="http://www.example.com/login.php">Sign Up</a></li>';noerr]
</ul>
</nav>
</div>
</div>
答案 0 :(得分：0)
您是否在HTML中添加了视口元标记？如果没有尝试添加此
<meta name="viewport" content="width=device-width, initial-scale=1">
如果它不起作用，请尝试将其添加到您的CSS中。
@-ms-viewport{
width: device-width;
}
希望这有助于：）