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, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <link rel="stylesheet" href="css/style.css">
- <title>Menu Styling</title>
- </head>
- <body>
- <ul class="navbar">
- <li><a href="#">Home</a></li>
- <li><a href="#">About</a></li>
- <li><a href="#">Services</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- <br><br>
- <ul class="side-menu">
- <li><a href="#">Home</a></li>
- <li><a href="#">About</a></li>
- <li><a href="#">Services</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- </div>
- </body>
- </html>
- body
- {
- font-family: Arial,Helvetica,sans-serif;
- }
- /* NAVBAR */
- .navbar
- {
- list-style: none;
- margin: 0;
- padding: 0;
- background: #4c6ca0;
- border-radius: 5px;
- overflow: auto;
- }
- .navbar li
- {
- float:left;
- }
- .navbar li a
- {
- color: white;
- text-decoration: none;
- display: block;
- padding: 15px 20px;
- }
- .navbar li a:hover
- {
- background-color: darkolivegreen;
- color: lightgrey;
- }
- /* SIDE MENU */
- .side-menu
- {
- list-style: none;
- border: 1px lightgrey solid;
- border-radius: 10px;
- width: 300px;
- padding: 20px;
- }
- .side-menu li
- {
- font-size: 18px;
- line-height: 2.4em;
- border-bottom: dotted 1px grey;
- }
- .side-menu li:last-child
- {
- border: none;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement