隠しサブメニュー付き垂直メニュー

Question

私はこの垂直メニューを非表示のサブメニューと共に構築しましたが、ユーザが移動するとサブメニューを表示することはできません。これをどうやってやることができますか？また、どのように私は箇条書きを取り除くことができるリストであるので、私は左に書式設定されたテキストを得ることができますが、弾丸があった場所にテキストを得ることができません。また、私は "メインナビ"の幅を設定するのが最善の方法は何だろうと思っています。私は、ロゴを除いてテキストの上に何かを置くことは望まない。サイトの本体はナビゲーションの横にあります。私は、ロゴの側面もテキストの左側に揃えたいと思っており、これをどうやって行うのか分かりません。赤い枠線はテスト目的のためのものです（明らかに）。

ここに私のcodepenへのリンクがあります。

[BONUS]私は自分のサイトをワードプレスとカスタムテーマで一から作成しようとしています。カスタマイズサイドバーのサイトIDタブからロゴイメージを取得するにはどうすればよいですか？ IDバーにロゴが選択されていない場合は、テキストを表示するだけです。それはいくつかのWordPressのPHP関数ですか？また、私はロゴをデフォルトでメインナビゲーションとは別にしたいと思っています。私はfunctions.phpファイル内にregister_nav_menu（）関数を持っており、メニューにMain Navigationを割り当て、それにクラスのメインナビゲーションも与えます。このメニューの上にデフォルトでロゴを表示するにはどうすればよいですか？これについてのヒントは非常に高く評価されます。 （ワードプレス/ここで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サブメニューを表示する必要があります。これが私が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>

---

EDIT：私はワードプレスに関するミスを犯したかもしれないので、私は誰も誤解しないように私は答えの一部を削除しました。しかし、E. Shioは、それをほぼ段階的に説明する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）