Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="navigation">
- <table>
- <tr>
- <td><a href="index.php">home</a></td>
- <td> </td>
- <td><a href="about.php">about</a></td>
- <td> </td>
- <td><a href="music.php">music</a></td>
- <td> </td>
- <td><a href="geeking.php">geeking</a></td>
- <td> </td>
- <td><a href="contact.php">contact</a></td>
- </tr>
- </table>
- </div>
- div.navigation{
- text-align: center;
- color: hsla(200,50%,45%,0.6);
- margin: auto;
- font-family: monospace;
- letter-spacing: 2px;
- position: relative;
- top: -13px;
- margin: 20px auto 20px auto;
- width: 60%;
- }
- .navigation table{
- height: 70px;
- }
- th{
- text-align: center;
- color: hsla(180,50%,45%,0.4);
- font-size: 1.1em;
- }
- table{
- border-collapse: collapse;
- margin: auto;
- margin-top: 0px;
- }
- table,th{
- border: 0px solid black;
- padding: 5px;
- }
- .navigation a{
- text-decoration: none;
- color: hsla(200,50%,45%,0.6);
- background-color: transparent, white;
- text-transform: lowercase;
- font-size: 1.2em;
- -webkit-transition: all 0.4s linear;
- -moz-transition: all 0.4s linear;
- -o-transition: all 0.4s linear;
- -ms-transition: all 0.4s linear;
- transition: all 0.4s linear;
- letter-spacing: 0px;
- width: 50px;
- height: 100px;
- }
- .navigation a:hover{
- color: white;
- -webkit-transition: all 0.2s linear;
- -moz-transition: all 0.2s linear;
- -o-transition: all 0.2s linear;
- -ms-transition: all 0.2s linear;
- transition: all 0.2s linear;
- width: auto;
- height: auto;
- font-size: 2em;
- font-weight: bold;
- letter-spacing: 2px;
- text-shadow: 0 0 20px hsla(180,50%,40%,.6),
- 0 0 40px hsla(200,50%,45%,.8);
- }
- <div class="menu">
- <ul>
- <li><a href="index.php">Home</a></li>
- <li><a href="">About</a></li>
- <li><a href="">Music</a></li>
- <li><a href="">Geeking</a></li>
- <li><a href="">Contact</a></li>
- </ul>
- </div>
- .menu{
- position: fixed;
- left:0;
- right:0;
- top:0;
- margin: auto;
- text-transform: lowercase;
- text-align: center;
- }
- .navigation table{
- height: 70px;
- }
- .menu li{
- list-style: none outside none;
- display: inline;
- }
- .menu a{
- text-decoration: none;
- color: hsla(200,50%,45%,0.6);
- font-size: 1.2em;
- letter-spacing: 0px;
- -webkit-transition: all 0.4s ease;
- -moz-transition: all 0.4s ease;
- -o-transition: all 0.4s ease;
- -ms-transition: all 0.4s ease;
- transition: all 0.4s ease;
- }
- .menu a:hover{
- color: white;
- font-size: 2em;
- font-weight: 600;
- letter-spacing: 2px;
- -webkit-transition: all 0.2s ease;
- -moz-transition: all 0.2s ease;
- -o-transition: all 0.2s ease;
- -ms-transition: all 0.2s ease;
- transition: all 0.2s ease;
- text-shadow: 0 0 20px hsla(180,50%,40%,.6),
- 0 0 40px hsla(200,50%,45%,.8);
- }
- .navigation table{
- height: 70px;
- }
- .menu ul {
- display: table;
- text-align: center;
- height: 70px;
- padding: 0px;
- margin-top: 0px;
- margin-right: auto;
- margin-bottom: 0px;
- margin-left: auto;
- width: auto;
- }
- .menu li {
- display: table-cell;
- list-style-image: none;
- list-style-type: none;
- text-align: center;
- vertical-align: middle;
- padding-right: 6px;
- padding-left: 6px;
- padding-top: 0px;
- padding-bottom: 0px;
- margin: 0px;
- }
- .menu a {
- height: 50px;
- line-height: 50px;
- }
- .menu a {
- vertical-align: middle;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement