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>

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

请参阅this article about baseurl。

Answer 2

如果基本网址是您网域的根目录（并且如果您确定这永远不会改变！），您可以在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>

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

2 个答案: