This CSS Reference section displays example code that shows how to style list tags to create dropdown menus.
<!DOCTYPE html> <html> <head> <title>XoaX.net</title> <style type="text/css"> ul.cHorizMenu { list-style-type: none; overflow: hidden; background-color: #BBCC90; } ul.cHorizMenu > li { float: left; } ul.cHorizMenu > li a { display: block; color: #AA4422; text-align: center; padding: 5px 10px; text-decoration: none; } ul.cHorizMenu > li a:hover { background-color: #CCDDAA; } ul.cDropMenu { display: none; position: absolute; background-color: #eeeeee; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7); padding: 0px; z-index: 1; } .cDrop:hover ul.cDropMenu { display: block; } </style> </head> <body> <ul class="cHorizMenu"> <li class="cDrop"><a href="#h1">H1</a> <ul class="cDropMenu" style="list-style-type: none;"> <li><a href="#h1d1">H1D1</a></li> <li><a href="#h1d2">H1D2</a></li> <li><a href="#h1d3">H1D3</a></li> </ul> </li> <li class="cDrop"><a href="#h2">H2</a> <ul class="cDropMenu" style="list-style-type: none;"> <li><a href="#h2d1">H2D1</a></li> <li><a href="#h2d2">H2D2</a></li> </ul> </li> <li class="cDrop"><a href="#h3">H3</a> <ul class="cDropMenu" style="list-style-type: none;"> <li><a href="#h3d1">H3D1</a></li> </ul> </li> <li class="cDrop"><a href="#h4">H4</a> <ul class="cDropMenu" style="list-style-type: none;"> <li><a href="#h4d1">H4D1</a></li> <li><a href="#h4d2">H4D2</a></li> <li><a href="#h4d3">H4D3</a></li> </ul> </li> </ul> </body> </html>
© 20072024 XoaX.net LLC. All rights reserved.