Html 内联导航栏通过字体按钮压缩为下拉框导航

我正在为我的一位艺术家朋友（kouroshesfandari.com）创建一个网站，但在响应导航方面遇到了问题。在桌面和平板电脑的横向模式下，我需要一个水平（内联）导航，而对于纵向模式（直立）的手机，我需要三行按钮图标在悬停或点击时显示块式导航

我使用icomoon的应用程序为三行图标安装了一个很小的字体文件，并使用“方向：纵向媒体查询”为手机提供了不同的功能。然而，似乎无论我在nav CSS或它的纵向媒体查询中做了什么更改，功能都是不需要的

如果我能让它看起来像我在手机上想要的那样，nav仍然是平板电脑和台式机尺寸的障碍。如果我把导航系统内联起来，在平板电脑和台式机上显示出我想要的样子，那么在手机视图中，它会把一切都抛在脑后。如果能采取更好的办法，我们将不胜感激。现在似乎有很多网站都在使用这种类型的响应式导航，但我找不到描述如何做到这一点的资源

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>

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;
    }
}

---

恐怕这对我不起作用。不过，我很感谢你的反馈。我发现（方向：肖像）是一种更好的定位手机的方法，因为现在很多手机屏幕都非常大。例如，我自己的手机屏幕是1440 x 2560像素。Ibrahim-这与您最初提供的答案相同。正如我所说，不幸的是，这没有起作用。

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)
  {
  }

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