css/sass“禁用”我的子菜单链接

Question

我尝试不包含不必要的代码，以便您可以立即发现问题。当我注释掉下面的指定代码或更改样式（即不透明度）时，此代码有效。但我希望样式看起来像子菜单从导航栏下来，而不仅仅是出现和隐藏在导航栏下方。起初，我认为这是一个 jekyll 问题，但经过几次尝试和错误后，我发现这更像是一个样式问题。

<div id="navigation">
<nav class="nav-main row">
    <div class="logo">
    <p>Anatomy &amp;<br>
    Physiology</p></div>
    <ul>
        <li>
            <a href="{{site.baseurl}}/index.html" class="nav-item">HOME</a>
        </li>
        <li>
            <a href="#" class="nav-item">SYSTEMS</a>
            <div class="nav-content">
                <div class="nav-sub">
                    <ul>
                        <li><a href="{{site.baseurl}}systems/index.html">SKELETAL SYSTEM</a></li>
                        <li><a href="#">MUSCULAR SYSTEM</a></li>
                        <li><a href="#">CARDIOVASCULAR SYSTEM</a></li>
                        <li><a href="#">DIGESTIVE SYSTEM</a></li>
                        <li><a href="#">ENDOCRINE SYSTEM</a></li>
                        <li><a href="#">NERVOUS SYSTEM</a></li>
                        <li><a href="#">RESPIRATORY SYSTEM</a></li>
                        <li><a href="#">IMMUNE/LYMPHATIC SYSTEM</a></li>
                        <li><a href="#">URINARY SYSTEM</a></li>
                        <li><a href="#">FEMALE REPRODUCTIVE SYSTEM</a></li>
                        <li><a href="#">MALE REPRODUCTIVE SYSTEM</a></li>
                        <li><a href="#">INTEGUMENTARY SYSTEM</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li>
        <a href="{{site.baseurl}}/#" class="nav-item">LESSON GUIDE</a>
        <div class="nav-content">
                <div class="nav-sub">
                    <ul>
                        <li><a href="#">Submenu</a></li>
                        <li><a href="#">Submenu</a></li>
                        <li><a href="#">Submenu</a></li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</nav>

.nav-main {


ul {


    }
}
.nav-item {


    &:hover {

        background-color: $nav-hover-color;
        color: $text-color-hover;
        @include transition(background-color, 0.6s, ease-in-out);

    }

    &:focus{
        background-color: $nav-hover-color;
        color: $text-color-hover;


        ~ .nav-content{
            max-height: 800px;
            @include transition(max-height, 0.7s, ease-in);



        }
    }

}

}

.nav-content {

padding-right: 10px;
position: relative;
top: 5px;
overflow: hidden; <--(when commented out, link works)
max-height: 0;    <--(when commented out, link works)
background-color: $nav-hover-color;
z-index: 50;
border-radius: 4px;

Answer 1

这应该可行。取自默认jekyll网站的代码：

<li><a href="{{ "systems/index.html" | prepend: site.baseurl }}">SKELETAL SYSTEM</a></li>

确保您在_config.yml 中正确设置了baseurl: ""。

见this article about baseurl。

Answer 2

如果基本 URL 是您的域的根（并且如果您确定这永远不会改变！），您可以在不设置 baseurl 的情况下使其工作 _config.yml （如建议the other answer).

只需让链接以/开头：

<li><a href="/systems/index.html">SKELETAL SYSTEM</a></li>

The leading slash indicates your domain's root，所以上例中的链接实际上是http://yourdomain.com/systems/index.html

这就是为什么你的代码中的第一个链接可能在没有在配置文件中设置baseurl 的情况下工作：

<li class="two columns">
    <a href="{{site.baseurl}}/index.html" class="nav-item">HOME</a>
</li>