Question

我现在已经为导航/平板电脑屏幕大小调整了导航功能，现在我已经为桌面创建了一个导航器。我想在顶级列表项中添加一类“下拉列表”，如果它有子项。但我只想在小屏幕上这样做，即平板电脑/手机。导航的桌面视图很好。

我的HTML代码结构如下：

<nav>
    <ul>
        <li class="mobile">
            <a href="#">
                <span>Favourites</span>
            </a>
        </li>
        <li class="dashboard">
            <a href="#">
                <span>Dashboard</span>
            </a>
        </li>
        <li class="fitness">
            <a href="#">
                <span>Fitness</span>
            </a>
            <ul>
                <li>
                    <a href="#">Stuart &amp; Elise</a>
                </li>
                <li>
                    <a href="#">Workouts</a>
                </li>
                <li>
                    <a href="#">Fitness Plans</a>
                </li>
                <li>
                    <a href="#">Build my own plan</a>
                </li>
                <li>
                    <a href="#">Articles &amp; Videos</a>
                </li>
            </ul>
        </li>
        <li class="food">
            <a href="#">
                <span>Food &amp; Nutrition</span>
            </a>
            <ul>
                <li>
                    <a href="#">Faith Toogood</a>
                </li>
                <li>
                    <a href="#">Recipes</a>
                </li>
                <li>
                    <a href="#">Meal Plans</a>
                </li>
                <li>
                    <a href="#">Build my own plan</a>
                </li>
                <li>
                    <a href="#">Articles &amp; Videos</a>
                </li>
            </ul>
        </li>
        <li class="health">
            <a href="#">
                <span>Health &amp; Wellbeing</span>
            </a>
            <ul>
                <li>
                    <a href="#">Dr Hilary Jones</a>
                </li>
                <li>
                    <a href="#">Emma kenny</a>
                </li>
                <li>
                    <a href="#">Journal</a>
                </li>
                <li>
                    <a href="#">Moodtracker</a>
                </li>
                <li>
                    <a href="#">Goal Tracker</a>
                </li>
                <li>
                    <a href="#">Articles &amp; Videos</a>
                </li>
            </ul>
        </li>
        <li class="community">
            <a href="#">
                <span>Community</span>
            </a>
            <ul>
                <li>
                    <a href="#">Groups</a>
                </li>
                <li>
                    <a href="#">Stories</a>
                </li>
                <li>
                    <a href="#">Guests</a>
                </li>
            </ul>
        </li>
        <li class="help">
            <a href="#">
                <span>Help &amp; Info</span>
            </a>
            <ul>
                <li>
                    <a href="#">Quick start guides</a>
                </li>
                <li>
                    <a href="#">FAQ</a>
                </li>
                <li>
                    <a href="#">Contact Us</a>
                </li>
            </ul>
        </li>
        <li class="mobile">
            <a href="#">
                <span>Logout</span>
            </a>
        </li>
    </ul>
</nav>

我正在使用Bootstrap＆amp;很难建立这个。

如何在较小的设备上添加“雪佛龙”或“手风琴”课程。

Answer 1

使用CSS :not(:only-child)选择器;选择不是<a>唯一子项的<li>标记（即<li>有另一个子项即下拉列表），并使用psuedo-element :after来添加箭头符号。

nav li > a:not(:only-child):after {
    content: '\00A0 \2193';
}

nav li:hover > a:not(:only-child):after {
    content: '\00A0 \2191';
}

<nav>
  <ul>
    <li class="mobile">
      <a href="#">
        <span>Favourites</span>
      </a>
    </li>
    <li class="dashboard">
      <a href="#">
        <span>Dashboard</span>
      </a>
    </li>
    <li class="fitness">
      <a href="#">
        <span>Fitness</span>
      </a>
    </li>
    <li class="food">
      <a href="#">
        <span>Food &amp; Nutrition</span>
      </a>
      <ul>
        <li>
          <a href="#">Faith Toogood</a>
        </li>
        <li>
          <a href="#">Recipes</a>
        </li>
        <li>
          <a href="#">Meal Plans</a>
        </li>
        <li>
          <a href="#">Build my own plan</a>
        </li>
        <li>
          <a href="#">Articles &amp; Videos</a>
        </li>
      </ul>
    </li>
    <li class="health">
      <a href="#">
        <span>Health &amp; Wellbeing</span>
      </a>
      <ul>
        <li>
          <a href="#">Dr Hilary Jones</a>
        </li>
        <li>
          <a href="#">Emma kenny</a>
        </li>
        <li>
          <a href="#">Journal</a>
        </li>
        <li>
          <a href="#">Moodtracker</a>
        </li>
        <li>
          <a href="#">Goal Tracker</a>
        </li>
        <li>
          <a href="#">Articles &amp; Videos</a>
        </li>
      </ul>
    </li>
    <li class="community">
      <a href="#">
        <span>Community</span>
      </a>
      <ul>
        <li>
          <a href="#">Groups</a>
        </li>
        <li>
          <a href="#">Stories</a>
        </li>
        <li>
          <a href="#">Guests</a>
        </li>
      </ul>
    </li>
    <li class="help">
      <a href="#">
        <span>Help &amp; Info</span>
      </a>
      <ul>
        <li>
          <a href="#">Quick start guides</a>
        </li>
        <li>
          <a href="#">FAQ</a>
        </li>
        <li>
          <a href="#">Contact Us</a>
        </li>
      </ul>
    </li>
    <li class="mobile">
      <a href="#">
        <span>Logout</span>
      </a>
    </li>
  </ul>
</nav>

自适应导航 - 如果有孩子，则添加课程

1 个答案: