html - 为什么我的菜单乱七八糟？

Question

我的 HTML 和 CSS 有问题，我在食谱中嵌套了沙拉、新鲜和冰沙。但是悬停在最后一个显示并选择点击它们(选择特定的沙拉或新鲜等)，它们一直在逃离我(它们显示，但我无法点击它们)，所以我无法打开超链接他们包含。 这是 HTML 代码:

 <div id="nav">
            <ul class="nav-list">
                <li><a href="home.html">Home</a></li>
                <li>
                    <a href="#">Tips for health</a>
                    <ul class="sub-nav-list">
                        <li><a href="lechebni%20isvoistva.html">The healing properties</a></li>
                        <li><a href="5%20vajni%20podpravki.html"5 important spices that you should include in your diet</a></li>
                        <li><a href="loshi%20navici.html">Bad habits and their removal</a></li>
                        <li><a href="vodata.html">Water as a source of life</a></li>
                    </ul>
                </li>
                <li>
                    <a href="title=">Recipes</a>
                    <ul class="sub-nav-list">
                        <li><a href="#">Salads</a></li>
                    </ul>
                        <ul class="sub-sub-nav-list">   
                            <li><a href="zelena%20salata.html">Lettuce</a></li>
                            <li><a href="frenska%20salata.html">French salad</a></li>
                            <li><a href="salata%20cherveno%20cveklo.html">Red Beet Salad</a></li>
                        </ul>
                    <ul class="sub-nav-list">
                        <li><a href="#">Fresh</a></li>
                    </ul>
                        <ul class="sub-sub-nav-list">
                            <li><a href="sweet%20fresh.html">Sweet fresh</a></li>
                            <li><a href="fresh%20za%20detoksikaciq.html">Fresh detox</a></li>
                            <li><a href="citrusov%20fresh.html">Citruc fresh</a></li>
                        </ul>
                    <ul class="sub-nav-list">
                        <li><a href="#">Smoothies</a></li>
                    </ul>
                        <ul class="sub-sub-nav-list">     
                            <li><a href="smuti%20shokolad.html">Chocolate smoothie</a></li>
                            <li><a href="tropichesko%20smuti.html">Tropical smoothie</a></li>
                            <li><a href="smuti%20banan%20ananas.html">Smoothie with banana and pineapple</a></li>
                        </ul>
                </li>
                <li><a href="contact.html">Contacts</a></li>
            </ul>
        </div>

这是 CSS 代码:

.sub-nav-list {
  display: none;
}
.sub-sub-nav-list {
  display: none;
}
ul.nav-list li:hover > ul.sub-nav-list {
  display: block;
  padding-left: 50px;
}
ul.nav-list li ul.sub-nav-list:hover + ul.sub-sub-nav-list {
  display: block;
  padding-left: 100px;
}

Answer 1

 <li><a href="lechebni%20isvoistva.html">The healing properties</a></li>
  <li><a href="5%20vajni%20podpravki.html"5 important spices that you should include in your diet</a></li>

应该是 像这样

<li><a href="5%20vajni%20podpravki.html">5 important spices that you should include in your diet</a></li> 

对吗？