html - 带隐藏子菜单的垂直菜单

Question

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

这是我的 codepen 的链接.

[奖金] 我正在尝试使用 wordpress 和自定义主题从头开始创建我自己的网站。如何创建它以便 Logo 图像取自自定义侧边栏中的站点标识选项卡？如果在身份栏中没有选择 Logo ，也只显示文本。它会是一些 wordpress php 函数吗？另外，我希望 Logo 默认与主导航分开。我的 functions.php 文件中有 register_nav_menu() 函数，它为 Main Navigation 分配了一个菜单，还给它一个类 main-navigation。我怎样才能让 Logo 默认显示在此菜单上方？对此的任何提示将不胜感激。 (这里是 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这几乎一步一步地解释了它。我将总结此链接的内容，以防有一天它被删除或页面 url 被移动。

首先，您检查是否有自定义 Logo ，对此您使用has_custom_logo ()。然后使用 the_custom_logo() 输出自定义 Logo 。不过，这是 Wordpress 的一项相对较新的功能，因此为了保持向后兼容性，您应该使用 function_exists( 'the_custom_logo' ) 检查函数是否存在。如果没有自定义 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)