是否可以在列表组类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/