html - 通过字体按钮将内联导航栏压缩为下拉 block 导航

Question

我正在为我的一位艺术家 friend (kouroshesfandiari.com) 创建网站，但在响应式导航方面遇到了问题。在横向模式的台式机和平板电脑上，我想要水平(内联)导航，对于纵向模式(直立)的手机，我希望三行按钮图标在悬停或点击时显示 block 式导航。

我使用 icomoon 的应用程序为三行图标安装了一个小字体文件，并使用方向:纵向媒体查询允许我为手机提供不同的功能。但是，似乎无论我在导航 CSS 或其纵向媒体查询中更改什么，都不需要该功能。

如果我让它在手机上看起来像我想要的那样，导航仍然是平板电脑和台式机尺寸的障碍。如果我获得内联导航并在平板电脑和台式机上显示我想要的样子，它会在手机 View 中关闭所有内容。更好的方法将不胜感激。现在似乎有很多网站都在使用这种类型的响应式导航，但我找不到描述如何使用的资源。

HTML:

<nav><!-- Responsive Navigation Menu -->
    <ul>
        <li><span class="icon-menu4"></span>


            <ul>
                <li class="hvr-rectangle-out"><a href="#">Pen & Ink Art</a></li>
                <li class="hvr-rectangle-out"><a href="#">3D Printed Art</a></li>
                <li class="hvr-rectangle-out"><a href="#">Merchandise</a></li>
                <li class="hvr-rectangle-out"><a href="#">About</a></li>
                <li class="hvr-rectangle-out"><a href="#">Contact</a></li>
            </ul>
        </li>
    </ul>
</nav>

和 CSS:

header {
    position: fixed;
    top: 75%;
    right: 0%;
    bottom: 5%;
    left: 0%;
    padding: 40px;
}

header h1 {
    font-size: 4em;
    color: #FAF7F7;
    margin-top: 0;
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
}

nav ul ul, nav ul li {
    list-style: none;
    font-size: 1.5em;
    margin-top: 0;
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
}

@media only screen and (orientation:portrait) {


    @font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?hnrm6o');
    src:url('fonts/icomoon.eot?#iefixhnrm6o') format('embedded-opentype'),
        url('fonts/icomoon.woff?hnrm6o') format('woff'),
        url('fonts/icomoon.ttf?hnrm6o') format('truetype'),
        url('fonts/icomoon.svg?hnrm6o#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    [class^="icon-"], [class*=" icon-"] {
        font-family: 'icomoon';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    .icon-menu4:before {
        content: "\e9c0";
        color: white;
        font-size: 1.5em;
        padding: 0.25em;
        border: 2px solid white;
        border-radius: 0.15em;
    }




    nav ul ul {
        display: none;
        width: 11em;
        background: rgba(0,0,0,0.8);
        border-radius: 0.5em;
        position: absolute;
        top: -6.5em;
        right: -2em;
    }

    nav ul li:hover > ul, nav ul li ul:hover > ul, .icon-menu4:hover > ul {
        display: block;
    }
}

Answer 1

Use this to get back inline menu in 

desktop

 @media screen and (mim-width: 750)
 {
    nav ul li
 {
   display: inline-block! important;
  }
  }

  Please don't use hover effect in.     

  mobile Screen
  And write perfect media query for.   

  mobile. View like

  @media screen and (max-width: 749)
  {
  }