#header{ background: url("../images/naviback.jpg"); width: 100%; } a{ display: block; } .ic{ color: #1b7edb; text-align: center; display: inline-block; font-size: 4vm; }<div id="header"> <ul class="list-group"> <li> <a class="list-group-item" href=""> <i class="fa fa-home fa-4x fa-fw ic"></i> </a> </li> <li> <a class="list-group-item" href=""> <i class="fa fa-list-ul fa-4x fa-fw ic"></i> </a> </li> <li> <a class="list-group-item" href=""> <i class="fa fa-user fa-4x fa-fw ic"></i> </a> </li> <li> <a class="list-group-item" href=""> <i class="fa fa-question fa-4x fa-fw ic"></i> </a> </li> </ul> </div>for project use fontawesome icons. need "fa-list-ul" dropdown menu submenu . tried use lot of css frameworks , can't enough result . hope can me solve problem . thank you
please use below code same , can make other menu well...
.dropbtn { background-color: #4caf50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; }<h2>dropdown menu</h2> <p>move mouse on button open dropdown menu.</p> <div class="dropdown"> <button class="dropbtn">dropdown</button> <div class="dropdown-content"> <a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> </div> </div> <p><strong>note:</strong> please use href="#" test links. in real web site urls.</p>
Comments
Post a Comment