Html 独立引导标头没有响应

由于我的网站有多个由多人设计的页面，我们决定创建一个独立的标题。这是代码。当它最初工作时，经过一些调整后，它突然不再响应。由于我们使用不同的CSS文件，因此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>&nbsp;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>

---

是否已将视口元标记添加到HTML中？如果没有，请尝试添加此

<meta name="viewport" content="width=device-width, initial-scale=1">

---

希望这有帮助：

谢谢塔拉卡！是主索引页的一部分，因此是响应的，只有标题代码似乎没有折叠到响应菜单中。不确定在上面的代码中包含此内容：@-ms viewport{width:device width；}有什么想法吗？只需在css文件中添加任何软件即可。它就像媒体标签一样工作

@-ms-viewport{
  width: device-width;
}