| | |
|---|
| | | <html lang="en">
|
|---|
| | | <head>
|
|---|
| | | <meta charset="UTF-8">
|
|---|
| | | <title>Box Model</title>
|
|---|
| | | <title>Menu</title>
|
|---|
| | | <style>
|
|---|
| | | div {
|
|---|
| | | html {
|
|---|
| | | color: white;
|
|---|
| | | border: 3px solid red;
|
|---|
| | | padding: 10px;
|
|---|
| | | width: 100px;
|
|---|
| | | margin-bottom: 10px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .border-box {
|
|---|
| | | box-sizing: border-box;
|
|---|
| | | .menu-item {
|
|---|
| | | display: inline-block;
|
|---|
| | |
|
|---|
| | | position: relative;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .content-box {
|
|---|
| | | box-sizing: content-box;
|
|---|
| | | .menu-item .children {
|
|---|
| | | display: none;
|
|---|
| | |
|
|---|
| | | position: absolute;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .menu-item:hover .children {
|
|---|
| | | display: block;
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | | </head>
|
|---|
| | | <body>
|
|---|
| | | <div class="content-box">content-box</div>
|
|---|
| | | <div class="border-box">border-box</div>
|
|---|
| | | <div class="menu">
|
|---|
| | | <div class="menu-item">Eins</div>
|
|---|
| | | <div class="menu-item">
|
|---|
| | | Hover Me!
|
|---|
| | | <div class="children">
|
|---|
| | | <div>Item 1</div>
|
|---|
| | | <div>Item 2</div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <div class="menu-item">Drei</div>
|
|---|
| | | </div>
|
|---|
| | | </body>
|
|---|
| | | </html>
|
|---|
