How can i use list tag to create menus on my website? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

How can i use list tag to create menus on my website?

drop down menu

10th Jan 2018, 4:35 PM
OLANIYI Babarinde Isola
OLANIYI Babarinde Isola - avatar
4 Answers
+ 2
with 3d effects: <nav> <ul class="topmenu"> <li><a href="">Home</a></li> <li><a href="">Shop</a></li> <li><a href="" class="down">Blog</a> <ul class="submenu"> <li><a href="">Category</a></li> <li><a href="">Author</a></li> <li><a href="">Archive</a></li> <li><a href="">Tags</a></li> </ul> </li> <li><a href="" class="down">Portfolio</a> <ul class="submenu"> <li><a href="">Category</a></li> <li><a href="">Author</a></li> <li><a href="">Archive</a></li> <li><a href="">Tags</a></li> </ul> </li> <li><a href="">Contact</a></li> </ul> </nav> * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { display: block; text-decoration: none; outline: none; transition: .4s ease-in-out; } .topmenu { backface-visibility: hidden; background: rgba(255,255,255,.8); } .topmenu > li { display: inline-block; position: relative; } .topmenu > li > a { font-family: 'Exo 2', sans-serif; height: 70px; line-height: 70px; padding: 0 30px; font-weight: bold; color: #003559; text-transform: uppercase; } .down:after { content: "\f107"; margin-left: 8px; font-family: FontAwesome; } .topmenu li a:hover { color: #E6855F; } .submenu { background: white; border: 2px solid #003559; position: absolute; left: 0; visibility: hidden; opacity: 0; z-index: 5; width: 150px; transform: perspective(600px) rotateX(-90deg); transform-origin: 0% 0%; transition: .6s ease-in-out; } .topmenu > li:hover .submenu{ visibility: visible; opacity: 1; transform: perspective(600px) rotateX(0deg); } .submenu li a { color: #7f7f7f; font-size: 13px; line-height: 36px; padding: 0 25px; font-family: 'Kurale', serif; }
10th Jan 2018, 5:33 PM
Oleg «0RaKlE19» Kolodka
Oleg «0RaKlE19» Kolodka - avatar
+ 2
understood this code, and you will be know how to create menu what you will be like
10th Jan 2018, 5:36 PM
Oleg «0RaKlE19» Kolodka
Oleg «0RaKlE19» Kolodka - avatar
+ 2
@OLANIY, you are welcome :)
15th Jan 2018, 4:10 AM
Oleg «0RaKlE19» Kolodka
Oleg «0RaKlE19» Kolodka - avatar
+ 1
thanks, I got it
15th Jan 2018, 1:08 AM
OLANIYI Babarinde Isola
OLANIYI Babarinde Isola - avatar