Modification affichage menu

public/scripts/scripts.js

@@ -1,10 +1,7 @@
-$(document).ready(function(){
+$(document).ready(function()
+{
 	$('#menu ul.navigation li').mouseenter(function(){
 		var objet = $(this).find('ul');
-		var position = $(this).position();
-		var height = $(this).height()
-		objet.css('left', position.left);
-		objet.css('top', position.top+height);
 		objet.css('display','block');
 		objet.mouseleave(function(){
 			$(this).css('display','none');

public/styles/main.css

@@ -12,30 +12,70 @@ ul, ul li {
 	margin-left: auto;
 }
 #header {}
-#header h1 {font-size:18px; margin:10px 5px;}
-
-#menu ul.navigation, #menu ul.navigation li ul { 
-	background-color:#353735;
-} 
-#menu ul.navigation li { 
-		display:inline; 
-		vertical-align: middle;
-		padding:0 10px; 
-		margin:0;
+#header h1 {
+	font-size:18px; 
+	margin:10px 5px;
 }
+
+#menu {
+	float:left;
+	width:100%;
+	background-color:#353735;
+}
+
+#menu ul.navigation li, #menu ul.navigation li ul li { 
+	background-color:#353735;
+	list-style: none;
+}
+#menu ul.navigation li ul li {
+	margin:0;
+	padding:5px;
+	float: left;
+	/*--Bottom right rounded corner--*/
+	-moz-border-radius-bottomright: 5px;
+	-khtml-border-radius-bottomright: 5px;
+	-webkit-border-bottom-right-radius: 5px;
+}
+
+#menu ul.navigation li { 
+		vertical-align: middle;
+		margin:0 5px;
+		padding:5px 0; 
+		float:left;
+		position: relative; /*--Important--*/	
+}
+
 #menu ul.navigation li.active, #menu ul.navigation li ul li.active {
 	background-color:#0098C3; 
-} 
-#menu ul.navigation li ul { margin:0; padding:0; display:none; position:absolute; height:20px; }
+}
+
+#menu ul.navigation li ul { 
+	margin:5px 0; 
+	padding:0; 
+	height:20px;
+	width:200px;
+	position:absolute; 
+	display:none;
+}
+
+#menu ul.navigation li ul li {
+	width:100%;
+}
 
 #menu a { 
+	padding:5px;
 	color:white; 
 	text-decoration:none;
 }
 
+#menu a:hover {
+	text-decoration:underline;
+}
+
 #content {
 	margin:10px 5px;
 }
+
 #content h1 {font-size:16px; text-decoration:underline;}
 #content h2 {font-size:14px;}
 #content h3 {font-size:12px;}
@@ -59,4 +99,4 @@ div.op-list ol li {
 	padding:2px;
 }
 
-#footer {}
+#footer {}