Html Css导航子菜单移动don'；行不通

我正在构建一个nav菜单，其中包含子菜单，仅包含CSS（媒体查询）和html

它在视觉上运行良好，但问题是： 在移动浏览器上，当我点击任何子菜单时，它都不会工作，有时它只是重定向到第一个菜单地址，有时甚至不会重定向。在电脑浏览器上，它也可以正常工作

这是我的密码：

#nav{
    position: relative;
    height: 100%;
}

#nav ul{
    margin: 0px;
    padding: 0px;
    height: 100%;
}


#nav ul li{
    list-style: none;
    float: left;
    height: 100%;
    border-right: black solid 2px;
    text-align: center;
    padding: 0px 15px 0px 15px;
}

#nav ul li:hover{
    background: #47350e;
}

#nav ul li a{
    position: relative;
    font-family: 'Oswald';
    font-size: 18px;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    top: 15px;
}

#nav ul li a:hover{

}

#nav ul li .children li{
    border: 0px;
}

#nav ul li .children li a{
    font-size: 13px;
    top: 5px;
    font-weight: normal;
}


#nav ul li .children li a:hover{
    text-decoration: underline;
}

#nav ul li .children{
    display: none;
    position: absolute;
    left: 0px;
    top: 46px;
    height: 30px;
    width: 100%;
    background: #47350e;
    padding-left: 120px;
    z-index: 5;
}

#nav ul li:hover .children{
    display: block;
}

和HTML

<div id="nav">
            <ul id="nav-items">

                <li>
                    <a href=#>option 1</a>
                </li>
                <li>
                    <a href=#>option 2</a>
                    <ul class="children">
                        <li>
                            <a href=#>option 3</a>
                        </li>
                        <li>
                            <a href=#>option 4</a>
                        </li>

                    </ul>
                </li>

            </ul>
        </div>

可能是你的
#nav ul li{
规则造成了混乱

position: relative;
top: 15px;

适用于两个级别，即选项1和选项3

检查这是否是问题所在。如果无法解决，请共享指向代码的链接。
可能是您的
#nav ul li{
规则造成了混乱

position: relative;
top: 15px;

适用于两个级别，即选项1和选项3

检查这是否是问题所在。如果无法解决，请共享指向代码的链接。
对于移动版，您可以使用选择菜单

   <div id="mobile_menu">
    <select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
    </div>

移动电话

    @media only screen and (min-width: 320px) and (max-width: 479px) {
    #mobile_menu{display:block;}
#nav{display:none;}
}

对于移动版，您可以使用选择菜单

   <div id="mobile_menu">
    <select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
    </div>

移动电话

    @media only screen and (min-width: 320px) and (max-width: 479px) {
    #mobile_menu{display:block;}
#nav{display:none;}
}

我想问题是
：hover
伪类。在移动（触摸）设备上，您不能真正“悬停”元素。您需要检测此类设备，并使用一些JS在单击时显示子菜单。我想问题是
：hover
伪类。在移动（触摸）设备上，您不能真正“悬停”一个元素。你需要检测这样的设备，并使用一些JS在点击时显示子菜单。谢谢，但我真的不想使用它。我的客户有点焦虑：）他想要设计师做的样式。谢谢，但我真的不想使用它。我的客户有点焦虑：）他想要设计师做的样式。谢谢你的回答，但我没有明白了。好吧，也许是搞砸了，但我能做什么呢？这是链接：谢谢你的回答，但我没有明白。好吧，也许是搞砸了，但我能做什么呢？这是链接：