帶有子菜單的下拉菜單

Question

我正在做一個項目，正在為一件作品苦苦掙扎。 這可能很簡單，但是我顯然在尋找一些東西。 我的目標是將鼠標懸停在特定圖像上，並有一個菜單和子菜單。 當您將鼠標懸停在圖片上時，您會看到“類別”，而在右側則看到該類別的“子菜單”。 我可以使用第一個類別，但是無法使用任何后續類別來將“子菜單”更改為右側。 我已包含以下代碼。 任何幫助將不勝感激-我正在努力使這項工作

菜單示例：

這是我的樣式CSS：

/* Dropdown Button */
.dropbtn {
    border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    z-index: 1;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    float: right;
    position: absolute;
    background-image: url(../images/Framework-and-Navigation_03.png);
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content2{
display: block;
    position: relative;
    z-index: 1;
        color: black;
    padding: 12px 16px;
    text-decoration: none;
}
.dropdown-content3{
display: block;
    position: relative;
    z-index: 1;
        color: black;
    padding: 12px 16px;
    text-decoration: none;

}
/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content-sub1 {
    color: black;
    text-decoration: none;
    display: none;
    z-index: 1;
}

.dropdown-content-sub2 {
    color: black;
    text-decoration: none;
    display: none;
}

.dropdown-content-sub3 {
    color: black;
    text-decoration: none;
    display: none;
}



/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: inline-block;}

/* Change the sub menu */
.dropdown-content1:hover .dropdown-content-sub1 {display: block;}

.dropdown-content2:hover .dropdown-content-sub2 {display: inline-block;}

這是我的菜單/子菜單測試：

<div class="dropdown">
      <center>
        <input type="image" class="dropbtn" src="images/menu_07.png"/>
      </center>
<div class="dropdown-content">
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="158">    
         <div class="dropdown-content1"><a href="">Link 1</a></div>
         <div><a href="#">Link 2</a></div>
         <div><a href="#">Link 3</a></div>   
      </td>
      <td class="dropdown-content-sub1" valign="top"><div>
         <a href="#">Test</a>
         </div>
      </td>
    </tr>
  </tbody>
</table>
</div>
</div>

Answer 1

看看這是否解決了您的問題:)

 /* Dropdown Button */ html, body { font-family: arial; padding: 0; margin: 0; } a { padding: 10px; text-decoration: none; display: block; } .menu-container { width: 615px; height: 200px; background: #eee url("https://images.unsplash.com/photo-1538098269808-2ace9a4d9680?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2a48defb8057de5b3f79b49b85c173bc&auto=format&fit=crop&w=500&q=60") no-repeat 200px 0; display: none; position: absolute; top: 50px; left: 0; box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.3); } ul.menu, ul.menu ul { width: 200px; padding: 0; margin: 0; display: none; flex-direction: column; } ul.menu li, ul.menu ul li { background: rgba(0, 0, 0, 0.5); height: 30px; display: flex; align-items: center; } ul.menu li a, ul.menu ul li a { color: white; margin-bottom: 1px; } ul.menu li:hover ul, ul.menu ul li:hover ul { display: flex; } ul.menu ul { position: absolute; margin: 0 0 0 200px; top: 0; z-index: 2; } /* The container <div> - needed to position the dropdown content */ .nav { background-color: black; display: flex; flex-direction: row; } .nav > .nav-item { height: 30px; padding: 10px; margin-right: 2px; background-color: rgba(255, 255, 255, 0.4); color: white; display: flex; align-items: center; } .nav > .nav-item:hover > .menu-container, .nav > .nav-item:hover > .menu-container > .menu { display: flex; } 

 <div class="nav"> <div class="nav-item" href="">Nav item 1 <div class="menu-container"> <ul class="menu"> <li><a href="">Menu item 1 ></a> <ul> <li><a href="">Sub menu 1 item 1</a></li> <li><a href="">Sub menu 2 item 2</a></li> </ul> </li> <li><a href="">Menu item 2</a></li> <li><a href="">Menu item 3 ></a> <ul> <li><a href="">Sub menu 2 item 1</a></li> <li><a href="">Sub menu 2 item 2</a></li> </ul> </li> </ul> </div> </div> <div class="nav-item" href="">Nav item 2</div> </div>