是否可以在列表組類class div內實現下拉菜單項？

Question

我有一個這個名單，即時通訊使用作爲一個頁面的導航菜單。我想有一個quick-links和social-media下拉選項，這可能嗎？我喜歡列表的外觀作爲導航菜單。

<div class="headBlock"> 
      <h1>G A L L E R Y</h1> 

      <br> 
      <div class="list-group"> 

       <a href="http://52.8.135.18/~marcusw1/7623/home.html" class="list-group-item">H O M E</a> 
       <a href="#" class="list-group-item">photography</a> 
       <a href="#" class="list-group-item">paint</a> 
       <a href="#" class="list-group-item">quick-links</a> 
       <br> 
       <a href="http://52.8.135.18/~marcusw1/main/contact.html" class="list-group-item">contact</a> 
       <a href="#" class="list-group-item">social-media</a> 

      </div> 
    </div> 

Answer 1

是這樣的？

<div class="headBlock"> 
    <h1>G A L L E R Y</h1> 
    <ul><li>Home</li> 
     <li>Photography</li> 
     <li>paint</li> 
     <li> 
     quick-links 
     <ul> 
      <li>link 1</li> 
      <li>link 2</li> 
      <li>link 3</li> 
     </ul> 
     </li> 
     <li>Contact</li> 
     <li>Social Media 
     <ul> 
      <li>media 1</li> 
      <li>media 2</li> 
      <li>media 3</li> 
     </ul> 
     </li> 
    </ul> 
    </div> 

ul { 
    text-align: left; 
    display: inline; 
    margin: 0; 
    padding: 15px 4px 17px 0; 
    list-style: none; 
} 

ul li { 
    font: bold 12px/18px sans-serif; 
    display: inline-block; 
    margin-right: -4px; 
    position: relative; 
    padding: 15px 20px; 
    background: #fff; 
    cursor: pointer; 
} 

ul li:hover { 
    background: #555; 
    color: #fff; 
} 

ul li ul { 
    padding: 0; 
    position: absolute; 
    top: 48px; 
    left: 0; 
    width: 150px; 
    box-shadow: none; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
} 

ul li ul li { 
    background: #555; 
    display: block; 
    color: #fff; 
    text-shadow: 0 -1px 0 #000; 
} 

ul li ul li:hover { background: #666; } 
ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
} 

https://jsfiddle.net/g56hLr4z/