Question

我已经使用隐藏子菜单构建了此垂直菜单但是当用户悬停时我无法显示子菜单。我怎么能这样做？另外，如何让文本一直保持格式化，因为它们是列表我可以摆脱子弹，但是我无法将文本放到子弹的位置。另外，我想知道设置＆＃34; main-nav＆＃34;的最佳方法是什么。除了徽标之外，我不想要任何文字。该网站的主体将在导航旁边。我希望徽标的一面也与文本的左侧对齐，我无法弄清楚如何做到这一点。红色边框仅用于测试目的（显然）。

以下是指向codepen的链接。

[BONUS]我正在尝试使用wordpress和自定义主题从头开始创建自己的网站。如何创建它以便从自定义侧边栏中的网站标识选项卡中获取徽标图像？如果在标识栏中没有选择徽标，也只显示文本。它会是一些wordpress php功能吗？此外，我希望徽标默认位于主导航的一部分。我在functions.php文件中有register_nav_menu（）函数，它为主导航分配一个菜单，同时给它一个主导航类。如何在默认情况下将徽标显示在此菜单上方？任何有关这方面的提示将不胜感激。（Wordpress /编码noob在这里）

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。

之上时会触发该规则

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

编辑：我可能在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）

垂直菜单带隐藏子菜单

1 个答案: