带有隐藏子菜单的垂直菜单

Question

我已经用隐藏的子菜单构建了这个垂直菜单，但是当用户悬停时我无法显示子菜单。我怎么能这样做呢？另外，我怎样才能让文本一直被格式化，因为它们是列表，我可以摆脱项目符号，但是我无法让文本到达项目符号所在的位置。另外，我想知道设置“主导航”宽度的最佳方法是什么。除了徽标之外，我不希望任何内容出现在文本上。网站的主体将在导航旁边。我希望徽标的一侧也与文本的左侧对齐，但我不知道如何做到这一点。红色边框仅用于测试目的（显然）。

这是我的codepen的链接。

[奖励] 我正在尝试使用 wordpress 和自定义主题从头开始创建自己的网站。如何创建它以便从自定义侧边栏中的站点标识选项卡中获取徽标图像？如果标识栏中未选择任何徽标，也只显示文本。会是一些wordpress php函数吗？另外，我希望徽标默认情况下与主导航分开。我的functions.php 文件中有register_nav_menu() 函数，它为Main Navigation 分配了一个菜单，还为它提供了一个main-navigation 类。我怎样才能让徽标默认出现在此菜单上方？对此的任何提示将不胜感激。 （这里是 Wordpress/编码菜鸟）

HTML：

<div id="container">

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" />
<nav id="site-navigation" class="main-navigation">
    <ul>
      <li class="active"><a href="#" class="active">Overview</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Submenu</a></li>
            <ul class="sub-menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
            </ul>
      <li><a href="#">Contact</a></li>
   </ul>
</nav>

CSS：

.main-navigation {
    bottom: 2%;
    margin-left: 4%;
    display: block;
    float: left;
    border: 1px solid red;
    position: fixed;
    overflow: hidden;
    width: 15%;
}

.main-navigation li, .main-navigation a {
    list-style-type: none;
    text-align: left;
    text-decoration: none;
    color: black;
    text-transform: lowercase;
    font: 16pt helvetica, sans serif;
    padding: 1%;
}

.main-navigation a:hover, .main-navigation .active {
    color: tan !important;
    font-weight: bold !important;
}

.main-navigation .sub-menu {
    display: none;
}

.main-navigation .sub-menu:hover {
    display: block;
}

#container {
    height: 10000px;
}

.logo-branding {
    display: block;
    position: fixed;
    margin-top: 8%;
    transform: rotate(90deg);
    width: 15%;
}

JS：

/* No JS */

Answer 1

我相信this 是您想要的行为？

为此，您需要将您的 ul 子菜单放在显示的菜单项的 li 中。这是我对 HTML 所做的唯一更改。

然后您可以添加一个 CSS 规则，以便当您将鼠标悬停在 li 上时，它的 ul 子项变得可见。即：.main-navigation li:hover {display: block; }.

你做.main-navigation .sub-menu:hover时它不起作用的原因是因为当它不显示时，你不能悬停在它上面，所以永远不会触发悬停状态。在我添加的规则中，当您将鼠标悬停在包含的 li 上时会触发它。

.main-navigation {
  bottom: 2%;
  margin-left: 4%;
  display: block;
  float: left;
  border: 1px solid red;
  position: fixed;
  overflow: hidden;
  width: 15%;
}
.main-navigation li,
.main-navigation a {
  list-style-type: none;
  text-align: left;
  text-decoration: none;
  color: black;
  text-transform: lowercase;
  font: 16pt helvetica, sans serif;
  padding: 1%;
}
.main-navigation a:hover,
.main-navigation .active {
  color: tan !important;
  font-weight: bold !important;
}
.main-navigation .sub-menu {
  display: none;
}
.main-navigation li:hover ul {
  display: block;
}
#container {
  height: 10000px;
}
.logo-branding {
  display: block;
  position: fixed;
  margin-top: 8%;
  transform: rotate(90deg);
  width: 15%;
}

<div id="container">

  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" />
  <nav id="site-navigation" class="main-navigation">
    <ul>
      <li class="active"><a href="#" class="active">Overview</a>
      </li>
      <li><a href="#">About</a>
      </li>
      <li><a href="#">Submenu v</a>
        <ul class="sub-menu">
          <li><a href="#">Item 1</a>
          </li>
          <li><a href="#">Item 2</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Contact</a>
      </li>
    </ul>
  </nav>

---

编辑：我可能在 WordPress 上犯了一个错误，所以我删除了答案的那一部分，以免误导任何人。然而，E. Shio 找到了一个link，它几乎是一步一步地解释了它。我会总结一下这个链接的内容，以防万一有一天它被删除或页面网址被移动。

首先，您检查是否有自定义徽标，您使用has_custom_logo ()。然后，您使用the_custom_logo() 输出该自定义徽标。虽然这是 Wordpress 的一个相对较新的功能，所以为了保持向后兼容性，您应该使用function_exists( 'the_custom_logo' ) 检查该功能是否存在。如果没有自定义徽标，您可以输出文本以显示在 else 语句中。这是一个例子：

if( function_exists('the_custom_logo') ) {
    if( has_custom_logo() ) {
        the_custom_logo();
    } else {
        $blogname = get_bloginfo('name');
        echo "<h1>$blogname</h1>";
    }
}

---

如果您对菜单的 CSS 有任何疑问，我非常乐意为您提供帮助！ （虽然我不是 Wordpress 方面的专家，所以我可能无法帮助处理任何关于 Wordpress 的具体问题，但我可以尝试！XP）