带隐藏子菜单的垂直菜单

Question

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

这是我 codepen 的 link。

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

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 几乎一步步解释它。我将总结此 link 所说的内容，以防有一天它被删除或页面 url 被移动。

首先，您检查是否有您使用 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）

带隐藏子菜单的垂直菜单

Vertical Menu w/ Hidden Sub Menus

html

css

navigation

wordpress

menu