숨겨진 하위 메뉴가있는 세로 메뉴

Question

이 숨겨진 하위 메뉴가있는 세로 메뉴를 만들었지 만 사용자가 마우스를 가리면 하위 메뉴가 표시되지 않습니다. 어떻게이 일을 할 수 있습니까? 또한 글 머리 기호가있는 곳으로 텍스트를 가져올 수는 없지만 글 머리 기호를 제거 할 수있는 목록이기 때문에 어떻게 텍스트를 왼쪽으로 서식을 지정할 수 있습니까? 또한, "main-nav"의 너비를 설정하는 것이 가장 좋은 방법인지 궁금합니다. 나는 로고 외에는 아무것도 보이지 않기를 바란다. 사이트 본문은 탐색 옆에 있습니다. 나는 로고의 측면도 텍스트의 왼쪽에 정렬되기를 원한다. 나는 이것을 어떻게하는지 이해할 수 없다. 빨간색 테두리는 테스트 용입니다 (분명히).

여기 내 codepen에 대한 링크입니다.

[BONUS] 저는 처음부터 내 사이트를 워드 프레스 및 사용자 지정 테마로 만들려고합니다. 로고 이미지가 사용자 정의 사이드 바의 사이트 ID 탭에서 가져 오도록 만드는 방법은 무엇입니까? 또한 ID 표시 줄에 로고가 선택되어 있지 않으면 텍스트를 표시하십시오. 그것은 어떤 WordPress의 PHP 기능이 될까요? 또한 기본적으로 로고가 기본 탐색과 분리되어 있어야합니다. 필자는 functions.php 파일에 register_nav_menu() 함수를 가지고 있으며 메인 네비게이션에 메뉴를 할당하고 클래스 메인 네비게이션도 제공합니다. 이 메뉴 위에 로고가 기본적으로 표시되게하려면 어떻게해야합니까? 이것에 대한 조언은 크게 감사하겠습니다.

<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이 원하는 행동이라고 생각

HTML (워드 프레스는/여기 멍청한 놈 코딩)?

이렇게하려면 ul 하위 메뉴 을 안에 넣고 표시된 메뉴 항목에 대해 li을 배치해야합니다. 이것이 HTML에 대한 유일한 변경 사항입니다.

li 위로 마우스를 가져 가면 ul 하위 아이콘이 표시되도록 CSS 규칙을 추가 할 수 있습니다. 예 : .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>

: 나는 워드 프레스에 대한 실수를했을 수 있습니다, 그래서 사람을 오해하지 않도록 내가 대답의 그 부분을 삭제. 그러나 E.시오는 거의 단계적으로 설명하는 link을 발견했다. 이 링크의 내용을 요약하면 언젠가는 삭제되거나 페이지 URL이 옮겨 지기도합니다.

먼저 사용자 정의 로고가 있는지 확인합니다.이 로고는 has_custom_logo()입니다. 그런 다음 사용자 정의 로고를 the_custom_logo()과 함께 출력합니다. 이것은 워드 프레스의 비교적 새로운 기능이기 때문에 이전 버전과의 호환성을 유지하려면 해당 기능이 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)