상위 리전 옆에 수직 드롭 다운 메뉴가 나타나지 않습니다.

Question

세로 드롭 다운 메뉴를 만들려고합니다. li 요소가 마우스 오버되면, 오른쪽 요소 바로 옆에 드롭 다운 메뉴를 표시하십시오.

내가 최고 설정을 시도했다 : 나는 탐색 메뉴의 상단에있는 드롭 다운 메뉴가 표시가 요소 위에 마우스를 할 때마다, 그러나

div.menu div.navigation ul { 
    width: 100%; 
    position: relative; 
    display: inline-table; 
} 

div.menu div.navigation ul:after { 
    content: ""; 
    clear: both; 
    display: block; 
} 

div.menu div.navigation ul ul { 
    display: none; 
    position: absolute; 
    left: 300px; 
    top: 0; 
} 

div.menu div.navigation ul ul li { 
    background: #1b2133; 
} 

div.menu div.navigation ul li:hover > ul { 
    display: block; 
} 

div.menu div.navigation ul li a { 
    color: #e4ebf7; 
    text-decoration: none; 
    font-size: 16px; 
    padding: 18px 30px; 
    display: block; 
} 

div.menu div.navigation ul li a:hover { 
    background: #0c1224; 
} 

div.menu div.navigation ul li a i { 
    margin-right: 5px; 
} 

div.right-container { 
    height: 100%; 
    width: calc(100% - 300px); 
    position: relative; 
    top: 0; 
    left: 300px; 
    display: table; 
} 

:

이 내 현재 CSS 0 ; 그런 다음 드롭 다운 메뉴가 부모 li 아래에 1 리 나타납니다.

건배!

EDIT : 요청에 따라 여기에 HTML 코드가 사용됩니다 (분명히 아직 진행중인 작업 임).

<div class="navigation"> 
      <ul> 
       <li><a href="<?php echo get_admin_url(); ?>"><i class="fa fa-home" aria-hidden="true"></i>Dashboard</a> 
        <ul> 
         <li><a href="<?php echo get_admin_url(); ?>upgrade.php">Updates</a></li> 
        </ul> 
       </li> 
       <li><a href="#"><i class="fa fa-picture-o" aria-hidden="true"></i>Media Library</a> 
        <ul> 
         <li><a href="#">Media Library</a></li> 
         <li><a href="#">Upload</a></li> 
        </ul> 
       </li> 
       <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i>Users</a> 
        <ul> 
         <li><a href="#">All Users</a></li> 
         <li><a href="#">Your Profile</a></li> 
         <li><a href="#">Create New Profile</a></li> 
        </ul> 
       </li> 
       <li><a href="#"><i class="fa fa-paint-brush" aria-hidden="true"></i>Appearance</a> 
        <ul> 
         <li><a href="#">Themes</a></li> 
         <li><a href="#">Widgets</a></li> 
         <li><a href="#">Menus</a></li> 
         <li><a href="#">Theme Editor</a></li> 
        </ul> 
       </li> 
       <li><a href="#"><i class="fa fa-plug" aria-hidden="true"></i>Plugins</a> 
        <ul> 
         <li><a href="#">Installed Plugins</a></li> 
         <li><a href="#">Install A Plugin</a></li> 
        </ul> 
       </li> 
       <li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i>Settings</a> 
        <ul> 
         <li><a href="#">General</a></li> 
         <li><a href="#">Reading</a></li> 
         <li><a href="#">Media</a></li> 
         <li><a href="#">Permalinks</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
     <div class="right-container"> 
      <p>Hi</p> 
     </div> 

Answer 1

HTML을 사용하여 직접 작성한 CSS입니다. 이것이 도움이 될 수 있습니다.

정확히 똑같은 것을 가지고 있습니다.

HTML :

<div class="navigation"> 
     <ul> 
      <li><a href="<?php echo get_admin_url(); ?>"><i class="fa fa-home" aria-hidden="true"></i>Dashboard</a> 
       <ul> 
        <li><a href="<?php echo get_admin_url(); ?>upgrade.php">Updates</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><i class="fa fa-picture-o" aria-hidden="true"></i>Media Library</a> 
       <ul> 
        <li><a href="#">Media Library</a></li> 
        <li><a href="#">Upload</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i>Users</a> 
       <ul> 
        <li><a href="#">All Users</a></li> 
        <li><a href="#">Your Profile</a></li> 
        <li><a href="#">Create New Profile</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><i class="fa fa-paint-brush" aria-hidden="true"></i>Appearance</a> 
       <ul> 
        <li><a href="#">Themes</a></li> 
        <li><a href="#">Widgets</a></li> 
        <li><a href="#">Menus</a></li> 
        <li><a href="#">Theme Editor</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><i class="fa fa-plug" aria-hidden="true"></i>Plugins</a> 
       <ul> 
        <li><a href="#">Installed Plugins</a></li> 
        <li><a href="#">Install A Plugin</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i>Settings</a> 
       <ul> 
        <li><a href="#">General</a></li> 
        <li><a href="#">Reading</a></li> 
        <li><a href="#">Media</a></li> 
        <li><a href="#">Permalinks</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 

CSS :이 코드의 HTML을 게시 할 수있는 경우

가

body { 
      margin: 0; 
      padding: 0; 
     } 
     .navigation ul { 
      list-style: none; 
      margin: 0; 
     } 
     .navigation ul li { 
      position: relative; 
      padding: 15px; 
      background-color: #0c1224; 
      width: 200px; 
     } 
     .navigation ul ul { 
      visibility: hidden; 
      position: absolute; 
      left: 82%; 
      top: -2%; 
     } 
     .navigation ul li:hover > ul { 
      visibility: visible; 
     } 
     .navigation ul li:hover { 
      background-color: #1b2133; 
      cursor: pointer; 
     } 
     .navigation ul li a { 
      text-decoration: none; 
      color: #FFF; 
     }