html - 响应式下拉菜单不起作用

Question

好吧，所以我只花了 24 小时来找出如何修复最小屏幕尺寸为 720px 时的下拉菜单:|....但我无法修复它:(而且它是 rtl，如果有的话其他错误请告诉我

HTML:

<header>


<!-- Navbar -->    
<nav class="nav">
    <ul>
        <li><a href="#"><i class="fa fa-home" aria-hidden="true"></i> menu1</a></li>
        <li><a href="#"><i class="fa fa-film" aria-hidden="true"></i> menu2</a>
            <ul class="sub">
                <li><a href="#">dropdown1</a></li>
                <li><a href="##">drowpdown2</a></li>
            </ul>
        </li>
        <li><a href="#"><i class="fa fa-filter" aria-hidden="true"></i> menu3</a></li>
        <li><a href="#"><i class="fa fa-comment-o" aria-hidden="true"></i> menu4</a></li>
        <li><a href="#"><i class="fa fa-phone" aria-hidden="true"></i> menu5</a></li>
    </ul>
    <!-- Search Box --->    
    <div class="search-div">
        <form method="get" action="/search" id="searchbox5">
            <input class="search" name="q" type="text" size="30" placeholder="Search..." />
        </form>

    </div>
</nav>
    <div class="logo-div">
       <a href="#"> <h1 class="logo-h1">LOGO</h1>
        <img class="logo-img" src="img/logo.png" onmouseover="this.src='img/rlogo.png'" onmouseout="this.src='img/logo.png'"/></a>
    </div>
</header>

CSS:

https://blography.org/main.css

Answer 1

您在li 的:hover 效果上使用了position:absolute;，因此移除position:absolute; :hover 效果 li ".nav li:hover ul"

的属性