html - 添加垂直分隔线创建具有单独活动和悬停状态的“部分”

Question

我的网站导航在移动视图中看起来像这样。我正在努力实现“菜单项文本”和“ +或- ”图标之间的垂直线/分隔线。

我正在寻找这个部分是可点击的，并且有一个单独的悬停和活动状态到<li>.

使用我拥有的标记和 CSS 实现这一目标的最佳方法是什么？

谢谢 ：）

HTML

<ul>
<li class="submenu">
    <a href="#"><span class="btn-text">Menu item 1</span></a>
    <div class="nav-2">
        <ul>
            <li>
                <a href="#"><span class="btn-text">Child 1</span></a>
            </li>
            <li>
                <a href="#"><span class="btn-text">Child 2</span></a>
            </li>
            <li>
                <a href="#"><span class="btn-text">Child 3</span></a>
            </li>
        </ul>
    </div>
</li> </ul>

+ 和 - 图标是“子菜单”类的 CSS 背景。

    background: url(plus.svg) no-repeat 95% center;
    background-color: #383738;
    background-size: 20px;

标签： htmlcss