Cleaned up menu navigation

- Bottom border is now a part of the menu div, instead of each item
- Hovering no longer causes items to jump around
- Added nice hover animation using CSS transitions

1 files changed, 5 insertions, 5 deletions

diff --git a/common/main.css b/common/main.css
index d758e64..d51decb 100644
--- a/common/main.css
+++ b/common/main.css
@@ -38,9 +38,9 @@ p a:hover{text-decoration: none; color:gray;}
 .list, .list strong {font-family: Courier New, Verdana, Arial!important; font-size: medium; line-height: 200%;  }
 
 #logo{width:128px; height:128px; float:left; position:relative; background-image:url(img/raylib_logo.png);}
-.menu{width:740px; height:39px; text-align:right; right:0px; left:30px; bottom:7px; position:relative; float:left; margin-left:0px; margin-top:10px;}
-.menu a{padding:5px 20px; color:black; font-size:12pt; float:left; position:relative; border-bottom:1px solid black;}
-.menu a:hover{margin-top:-20px; padding:15px 15px; background: rgb(254,255,255); 
+.menu{width:740px; height:35px; text-align:right; right:0px; left:30px; bottom:7px; position:relative; float:left; margin-left:0px; margin-top:10px; border-bottom:1px solid black; overflow:hidden;}
+.menu a{padding:5px 20px; color:black; font-size:12pt; float:left; position:relative; top:4px; transition:top 0.1s ease-in-out;}
+.menu a:hover{padding:5px 20px; background: rgb(254,255,255); top:0px;
 	background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(224,224,224,1) 100%); 
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,245,245,1)), color-stop(100%,rgba(224,224,224,1))); 
 	background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(224,224,224,1) 100%); 
@@ -50,8 +50,8 @@ p a:hover{text-decoration: none; color:gray;}
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e0e0e0',GradientType=0 ); }
 
 #active{
-	padding:5px 15px; color:#707070; font-size:12pt; float:left; position:relative; border-bottom:1px solid black;
-	margin-top:-20px; padding:15px 15px; background: rgb(254,255,255); 
+	padding:5px 20px; color:#707070; font-size:12pt; float:left; position:relative;
+	margin-top: 0px; background: rgb(254,255,255); 
 	background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(224,224,224,1) 100%); 
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,245,245,1)), color-stop(100%,rgba(224,224,224,1))); 
 	background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(224,224,224,1) 100%);