nav
<!DOCTYPE html> <html lang="en"> <title>Test Menu</title> <meta charset="utf-8"> <style> .drop-menu { display: inline-block; min-width: 100px; text-align: left; padding: 10px 10px; cursor: pointer; border: 1px solid #f6f0e4; } .drop-menu:hover .sub-menu { display: block; } .sub-menu { display: none; width: 200px; padding: 10px 10px; margin-left: -11px; margin-top: 10px; border: 1px solid #fff; } .sub-menu li { list-style-type: none; display: block; border-bottom: 1px dotted #eaeaea; } .sub-menu li:hover { border-bottom: 1px dotted #bababa; } </style> <body> <header> <h1>Test Menu</h1> </header> <nav> <ul> <li class="drop-menu"> <div>Parent</div> <ul class="sub-menu"> <li>Child 2</li> <li>Child 1</li> </ul> </li> </ul> </nav> <section> <h2>Content</h2> <article> <h3>Article</h3> <h6>by Author</h6> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </article> </section> <footer> <p>Footer</p> </footer> </body> </html>
.drop-menu:hover
display
/*add these to the css style*/ .drop-menu { position:relative; } .sub-menu { position:absolute; background-color:white; }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)