Question

我一直在使用模板来建立我的投资组合网站。模板中的导航具有“博客”和“投资组合”，这两个都是下拉菜单。

在HTML中，我注释掉了下拉选项，并使选项卡本身链接到页面。

这是问题所在：导航栏在台式机浏览器中可以很好地工作，但是在移动设备上，“投资组合”和“博客”链接处于活动状态，但是当您点击它们时，什么也没有发生。

HTML：

    <a class="right-area" href="mailto:ates.maximilian@europe.com">ates.maximilian@europe.com</a>

    <a class="menu-nav-icon" data-menu="#main-menu"><i class="ion-navicon"></i></a>

    <ul class="main-menu" id="main-menu">
        <li><a href="index.html">Home</a></li>
        <li class="drop-down"><a href="02_Photos.html">Photos<i class="ion-arrow-down-b"></i></a>
            <ul class="drop-down-menu drop-down-inner">
            <li><a href="02_Street_Photography.html">Street Photography</a></li>
                <li><a href="03_Cities_Nature.html">Cities & Nature</a></li>
            </ul>
        </li>
        <li class="drop-down"><a href="04_Blog.html">Blog<i class="ion-arrow-down-b"></i></a>
            <ul class="drop-down-menu drop-down-inner">
                <li><a href="04_Blog.html">Blog Page</a></li>
                <li><a href="05_Blog_Single.html">Blog Detail</a></li>
            </ul>
        </li>
        <li><a href="06_The_Photographer.html">The Photographer</a></li>
        <li><a href="https://www.instagram.com/this.hombre/">Instagram</a></li>
    </ul>
</header>

CSS：

/* HEADER */

header{ position: absolute; top: 0; left: 0; right: 0; height: 60px; 
text-align: center; z-index: 1000; }

header:after{ content:''; clear: both; }

header .logo{ float: left; height: 40px; margin: 10px 0; }

header .logo img{ height: 100%; width: auto; }


header .main-menu{ float: right; }

header ul.main-menu > li > a{ height: 100%; line-height: 60px; padding: 
0 10px; }


header .right-area{ float: right; height: 100%; line-height: 60px; 
margin-left: 20px; }


/* HAMBURGER ICON */

.menu-nav-icon{ display: inline-block; font-size: 30px; line-height: 
40px; margin: 10px 0; 
display: none; cursor: pointer; }


/* DROPDOWN MENU STYLING */

header .main-menu li.drop-down{ position: relative; text-align: left; }

header .main-menu li.drop-down > ul.drop-down-menu{ display: none; 
position: absolute; top: 60px; 
left: 0; min-width: 180px; box-shadow: 0px 3px 10px rgba(0,0,0,.3); 
background: #fff; }

header .main-menu li.drop-down > ul.drop-down-menu li{ display: block; 
border-top: 1px solid #ddd; }

header .main-menu li.drop-down > ul.drop-down-menu li > a{ display: 
block; padding: 17px 20px; }

header .main-menu li i{margin-left: 10px; }


/* DROPDOWN HOVER */

header .main-menu li.drop-down a.mouseover + ul.drop-down-menu{ 
display: block; 
animation: full-opacity-anim .2s forwards; }


@keyframes full-opacity-anim{
0%{ opacity: 0; }
100%{ opacity: 1; }
}

请帮忙吗？

移动浏览器中的导航出现问题

0 个答案: