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

Question

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

这是我的Codepen的链接。

[奖励]我正在尝试使用wordpress和自定义主题从头开始创建自己的网站。 如何创建该徽标，以便从自定义侧边栏中的站点标识选项卡中获取徽标图像？ 如果在身份栏中未选择徽标，也仅显示文本。 会是一些WordPress的WordPress功能？ 另外，我希望徽标默认情况下脱离主导航。 我的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

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

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

然后，您可以添加CSS规则，以便将鼠标悬停在li ，它的ul子对象将可见。 即： .main-navigation li:hover {display: block; } .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找到了一个链接 ，几乎可以一步一步地解释它。 我将总结此链接的内容，以防万一有一天它被删除或页面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）