Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Menu</title>
- <style>
- #gorne-menu {
- width: 100%;
- height: 50px;
- float: left;
- }
- #lewe-menu {
- width: 200px;
- float: left;
- }
- #zawartosc {
- float: left;
- margin: 20px;
- }
- #gorna-lista {
- list-style-type: none;
- padding-left: 0;
- display: block;
- float: left;
- }
- #gorna-lista li {
- float: left;
- margin-right: 5px;
- }
- #gorna-lista a {
- background-color: aquamarine;
- padding: 3px 10px;
- }
- #gorna-lista a:link,
- #gorna-lista a:visited,
- #gorna-lista a:active {
- color: red;
- text-decoration: none;
- }
- #gorna-lista a:hover {
- background-color: teal;
- color: white;
- }
- /* lewa lista */
- .lewa-lista {
- width: 150px;
- border: 1px solid teal;
- background-color: aquamarine;
- height: 40px;
- overflow: hidden;
- color: red;
- }
- .lewa-lista a {
- color: red;
- text-decoration: none;
- }
- .lewa-lista a:hover {
- background-color: teal;
- color: white;
- }
- .lewa-lista:hover {
- height: auto;
- }
- </style>
- </head>
- <body>
- <div id="strona">
- <div id="gorne-menu">
- <ul id="gorna-lista">
- <li><a href="#">Strona główna</a></li>
- <li><a href="#">Podstrona 1</a></li>
- <li><a href="#">Podstrona 2</a></li>
- <li><a href="#">Podstrona 3</a></li>
- <li><a href="#">Podstrona 4</a></li>
- </ul>
- </div>
- <div id="lewe-menu">
- <div class="lewa-lista">
- <p>Menu 1</p>
- <ul>
- <li><a href="#">Odnośnik 1</a></li>
- <li><a href="#">Odnośnik 2</a></li>
- </ul>
- </div>
- <div class="lewa-lista">
- <p>Menu 2</p>
- <ul>
- <li><a href="#">Odnośnik 3</a></li>
- <li><a href="#">Odnośnik 4</a></li>
- <li><a href="#">Odnośnik 5</a></li>
- </ul>
- </div>
- </div>
- <div id="zawartosc">Zawartość strony</div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement