php - HTML 旁边隐藏了我的 js 导航栏

标签 php javascript html

我正在开发自己的个人网站 here 。如果您将鼠标悬停在任何导航栏元素上,您会注意到有一些闪烁,并且并非所有元素都是可见的。您可以通过F12验证这一点。在我看来 <aside>标签“隐藏”了我正在寻找的信息。

有人可以告诉我如何将导航栏移到某物的前面吗?我不太确定这里发生了什么。

<强> index.php :

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Grown Kidd Creations</title>
        <link rel="stylesheet" href="css/main.css">
        <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
            });
        </script>
    </head>
    <body>
        <header>
            <img alt="Picture of me and Cian" src="img/caindaddysleepin.jpeg" title="Cian and Daddy">
            <?include_once 'nav/nav.php';?>
        </header>
        <aside class="left"><p>No idea what to put here. how about you fill out the form and tell me?</p></aside>

        <aside class="right">
            Recent News/Updates:<br/>
            <span class="undercon">This will be updated soon with links and maybe a blog.</span>
            <ul>
                <li>Cian</li>
                <li>Work</li>
                <li>Family</li>
            </ul>
        </aside>
        <footer>
            Send me some love at <a href="mailto:billythakidd04@gmail.com">BillyThaKidd04@gmail.com</a><br/>
            Or find me at:<br/>
            <div class="g-plus" data-href="https://plus.google.com/109325835178774768962?prsrc=3" data-theme="dark" rel="author"></div>
            <a href="https://twitter.com/ThaKidd04" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @ThaKidd04</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
        </footer>
    </body>
</html>

<强> nav.php

<?//navigation bar?>
<script>
    var el = document.getElementsByTagName("body")[0];
    el.className = "";
</script>
<noscript>
<!--[if IE]>
    <link rel="stylesheet" href="nav/css/ie.css">
<![endif]-->
</noscript>
<link rel="stylesheet" href="nav/css/nav.css">
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <nav id="topNav" class="no-js">
        <ul>
            <li><a href="index.php" title="Home">Home</a></li>
            <li><a href="#" title="Projects">Projects</a>
                <ul>
                    <li><a href="" title="Personal Projects">Personal Projects</a></li>
                    <li><a href="" title="Work Projects">Work Projects</a></li>
                    <li class="last"><a href="pages/sitepage.php" target="new" title="About this site">This Site</a></li>
                </ul>
            </li>
            <li><a href="contactme.php" title="Contact Me">Contact Me</a>
                <ul>
                    <li><a href="http://www.facebook.com/BillyThaKidd" target="new" title="FaceBook">FaceBook</a></li>
                    <li><a href="" target="new" title="Google Plus">Google +</a></li>
                    <li><a href="" target="new" title="LinkedIn">LinkedIn</a></li>
                    <li class="last"><a href="" title="Email Me">Email Me</a></li>
                </ul>
            </li>
            <li><a href="/pages/viewblog.php" title="About Me">About Me</a>
                <ul>
                    <li><a href="/pages/viewblog.php">Blog</a></li>
                    <li><a href="" title="Resume">Resume</a></li>
                    <li class="last"><a target="new" href="https://github.com/billythakidd04" title="GitHub">GitHub</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <script src="nav/js/modernizr.custom.69568.js"></script>
    <script>
        (function($)
        {
            //cache nav
            var nav = $("#topNav");

            //add indicators and hovers to submenu parents
            nav.find("li").each(function()
            {
                if ($(this).find("ul").length > 0)
                {
                    $("<span>").text("").appendTo($(this).children(":first"));

                    //show subnav on hover
                    $(this).mouseenter(function()
                    {
                        $(this).find("ul").stop(true, true).slideDown();
                    });

                    //hide submenus on exit
                    $(this).mouseleave(function()
                    {
                        $(this).find("ul").stop(true, true).slideUp();
                    });
                }
            });
        })(jQuery);
    </script>

最佳答案

您应该发布您的css,因为整个问题似乎都与 z-index 有关,或者至少可以解决。调整:

The z-index CSS property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

关于php - HTML 旁边隐藏了我的 js 导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14675530/

相关文章:

引用外部对象的 Javascript 作用域

javascript - 我可以用自己的图像重新绘制 Canvas 图像吗?

javascript - 点击后激活链接

php - 如何在 Android 中使用 firebase 向 1000 多个用户发送推送通知?

php - 我是否需要清理 Laravel 中 DB::query 调用的用户输入?

php - preg_split : splitting a string according to a very specific pattern

javascript - Angular Material 对话框打不开

php - 使用 Define() 标记访问属性?

javascript - 如何让我的结果在 javascript 中正确相加

javascript - 为什么jquery选择器在If条件中总是返回true?