Vertical Menu w/ Hidden Sub Menus

Question

I have built this Vertical Menu with hidden submenus however I cannot get the submenu to display when the user hovers. How could I go about doing this? Also how can I get the text to be formatted all the way left, since they are lists I can get rid of the bullets, however I cannot get the text to go where the bullets used to be. Also, I am wondering what the best way would be to set the width of the "main-nav". I don't want anything to be over the text except the logo. The body of the site would be next to the navigation. I want the side of the logo to also line up with the left side of the text, and I cannot figure out how to do this. The red border is just for testing purposes (obviously).

Here is the link to my codepen.

[BONUS] I am trying to create my own site from scratch with wordpress and a custom theme. How does one create it so that the logo image is taken from the site identity tab in the customize sidebar? And also just display text if no logo is chosen in the identity bar. Would it be some wordpress php function? Also, I would want the logo to be apart of the main-navigation by default. I have the register_nav_menu() function in my functions.php file and it assigns a menu to Main Navigation, also giving it a class main-navigation. How could I get the logo to by default appear above this menu? Any tips on this would be greatly appreciated. (Wordpress/coding noob here)

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

M. Salman Khan M. Salman Khan · Accepted Answer · 2016-08-03T00:11:15

I believe that this is your desired behaviour?

To do this, you need to place your ul submenu inside the li for the menu item that is displayed. This is the only change I made to the HTML.

You can then add a CSS rule so that when you hover over the li, its ul child becomes visible. i.e: .main-navigation li:hover {display: block; }.

The reason it didn't work when you did .main-navigation .sub-menu:hover is because when it is not being displayed, you cannot hover over it, so the hover state is never triggered. In the rule which I added, it is triggered when you hover over the containing 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>

EDIT: I may have made a mistake regarding WordPress, so I deleted that part of the answer so that I do not mislead anyone. E. Shio, however, found a link which explains it almost step by step. I'll summarise what this link says, just in case it someday gets deleted or the page url gets moved.

First, you check if there is a custom logo, for which you use has_custom_logo (). You then output that custom logo with the_custom_logo(). This is a relatively new feature to Wordpress though, so to maintain backwards compatibility, you should check if the function exists with function_exists( 'the_custom_logo' ). If there was no custom logo, you can output the text to display inside an else statement. Here's an example:

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

If you have any questions about the CSS for the menu, I'm more than happy to help! (I'm no expert in Wordpress though, so I probably can't help with any Wordpress specific things, but I can try! XP)

Vertical Menu w/ Hidden Sub Menus

1 Answers