--- a/mouchak/static/css/main.css
+++ b/mouchak/static/css/main.css
@@ -25,6 +25,7 @@
 body {
     margin: 0;
     padding: 0;
+    font-family:'Roboto', sans-serif;
    
 }
 .container {
@@ -32,7 +33,6 @@
 }
 .navigation-style {
     position: relative;
-    font-family: Arial,Helvetica,sans-serif;
     font-size: 12px;
     margin-top: 25px;
     height: 41px;
@@ -46,7 +46,7 @@
     padding: 0px 30px;
     text-decoration: none;
     display: inline-block;
-    font-family: Helvetica,Arial,Verdana,sans-serif;
+
 }
 
 .navigation-style li a {
@@ -55,8 +55,6 @@
 }
 
 .navigation-style li:hover a{
-  //  color:red;
-    font-family: Helvetica,Arial,Verdana,sans-serif;
     padding: 0px 0px;
     text-decoration: none;
     display: inline-block;

@@ -239,7 +237,56 @@
   }
 }
 /* style map styles end */
+/*dropsown sub menu css */
 
+.dropdown-submenu {
+    position: relative;
+}
+
+.dropdown-submenu>.dropdown-menu {
+    top: 0;
+    left: 100%;
+    margin-top: -6px;
+    margin-left: -1px;
+    -webkit-border-radius: 0 6px 6px 6px;
+    -moz-border-radius: 0 6px 6px;
+    border-radius: 0 6px 6px 6px;
+}
+
+.dropdown-submenu:hover>.dropdown-menu {
+    display: block;
+}
+
+.dropdown-submenu>a:after {
+    display: block;
+    content: " ";
+    float: right;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 5px 0 5px 5px;
+    border-left-color: #ccc;
+    margin-top: 5px;
+    margin-right: -10px;
+}
+
+.dropdown-submenu:hover>a:after {
+    border-left-color: #fff;
+}
+
+.dropdown-submenu.pull-left {
+    float: none;
+}
+
+.dropdown-submenu.pull-left>.dropdown-menu {
+    left: -100%;
+    margin-left: 10px;
+    -webkit-border-radius: 6px 0 6px 6px;
+    -moz-border-radius: 6px 0 6px 6px;
+    border-radius: 6px 0 6px 6px;
+}
+/* drop down menu css ends here */
 
 
 /*