Add scrollbar in dropdown menu

1 files changed, 64 insertions, 52 deletions

diff --git a/usr/local/www/themes/pfsense_ng/all.css b/usr/local/www/themes/pfsense_ng/all.css
index 57cc1bd..b15ffdb 100644
--- a/usr/local/www/themes/pfsense_ng/all.css
+++ b/usr/local/www/themes/pfsense_ng/all.css
@@ -335,9 +335,6 @@ table#marquee div#container div#scroller {
 }
 
 
-
-
-
 #content {
 	position: relative;
 	top: 0px;
@@ -399,9 +396,6 @@ table#marquee div#container div#scroller {
 
 /* Style the List */
 #navigation {
-	/* background: url('images/menu.gif') no-repeat; */
-	/* width: 693px; */
-/*	position: relative; */
 	position: fixed;
 	top: 0px;
 	left: 100px;
@@ -419,6 +413,7 @@ table#marquee div#container div#scroller {
 #navigation ul#menu {
 	padding-top: 3px;
 	padding-left: 5px;
+	margin-left: 10px;
 }
 
 /* Style the List Elements */
@@ -427,11 +422,10 @@ table#marquee div#container div#scroller {
 	position: relative;
 	width: 7.0em;
 	top: 0px;
-	/* top: -1px; */
 }
+
 /* Text mainmenubar */
 #navigation ul li div {
-
 	background-image: url(images/mainmenu-right.gif);
 	background-position: 5% 50%;
 	background-repeat: no-repeat;
@@ -441,36 +435,48 @@ table#marquee div#container div#scroller {
 	color: #ffffff;
 	text-align: center;
 	height: 13px;
-
-
-
-
-/*
-background: url("images/mainmenuitem.gif") top left no-repeat;
-vertical-align: top;
-border: 0px;
-width: 100px;
-height:20px;
-*/	
-	
-	
 }
+
 /* Make the List inside the List Elements */
 /* initially hidden with absolute position */
 #navigation ul li ul {
 	display: none;
 	position: absolute; 
-/*	top: 2em;
-	left: -2px; */
-	width: 120px;
 	font-weight: normal;
-/*	background: transparent bottom left no-repeat; /* This is key to making the menu maintain visibility when not on a link */
-	/* background-color: #202020; */
-	background: url("images/menubgr_footer.png") no-repeat;
-	background-position: bottom;
-/*	padding: 0em 0 0.4em 0; */
+	margin-top: 1px;
 	padding-top: 5px;
-	padding-bottom: 10px;
+	background: #850000;
+	border: 0px;
+	/* transparent */
+	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=95);
+	-moz-opacity: 0.95;
+	-khtml-opacity: 0.95;
+	opacity: 0.95;
+	/* borders */
+	border-bottom-right-radius: 0px;
+	border-bottom-left-radius: 6px;
+	border-top-left-radius: 6px;
+	border-top-right-radius: 6px;
+	/* Mozilla */
+	-moz-border-radius-bottomright: 0px;
+	-moz-border-radius-bottomleft: 6px;
+	-moz-border-radius-topright: 6px
+	-moz-border-radius-topleft: 6px;
+	/* WebKit */
+	-webkit-border-bottom-right-radius: 0px;
+	-webkit-border-bottom-left-radius: 6px;
+	-webkit-border-top-right-radius: 6px;
+	-webkit-border-top-left-radius: 6px;
+	/* Shadow Effect */
+	box-shadow: 5px 5px 10px #000000;
+	-webkit-box-shadow: 5px 5px 10px #000000;
+	-moz-box-shadow: 5px 5px 10px #000000;
+	/* Vertical menu max size */
+	max-height: 259px;
+	/* Horizontal menu max size */
+	max-width: 128px;
+	overflow-x: hidden;
+	overflow-y: auto;
 }
 /* to override top and left in browsers other than IE */
 /* which will position to the top right of the containing */
@@ -488,14 +494,12 @@ height:20px;
 }
 #navigation ul li:hover {
 	cursor: pointer;
-	cursor: pointer;
 }
 #navigation ul li:hover div {
 	text-decoration: none;
 	background-image: url(images/mainmenu-down.gif);
 	background-position: 5% 50%;
 	background-repeat: no-repeat;
-
 }
 
 #navigation ul li {
@@ -505,22 +509,37 @@ height:20px;
 /* dropdownmenu */
 #navigation ul li ul li {
 	border: 0px solid #850000;
-	width: 120px;
+	width: 128px;
 	height: 1.6em;
 	line-height: 1.6em;
-/*	background-color: #850000; */
-	background: url(images/menubgr.png) repeat-y;
-	z-index: 2;
-/*	color: #000000; */
-/*	filter:alpha(opacity=95);
-	-moz-opacity:0.95;
-	-khtml-opacity: 0.95;
-	opacity: 0.95; 	*/
+	background-color: #850000;
+	/* borders */
+	border-bottom-right-radius: 0px;
+	border-bottom-left-radius: 3px;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	/* Mozilla */
+	-moz-border-radius-bottomright: 0px;
+	-moz-border-radius-bottomleft: 3px;
+	-moz-border-radius-topright: 3px
+	-moz-border-radius-topleft: 3px;
+	/* WebKit */
+	-webkit-border-bottom-right-radius: 0px;
+	-webkit-border-bottom-left-radius: 3px;
+	-webkit-border-top-right-radius: 3px;
+	-webkit-border-top-left-radius: 3px;
+}
+/* last element in dropdown menu*/
+#navigation ul li ul li:last-child {
+	margin-bottom: 5px;
 }
 #navigation ul li ul li:hover {
-/*	background-color: #666666; */
-	background-image: url(images/menubgr_highlight.png);
-	background-repeat: repeat-y;
+	margin-left: 5px;
+	background-color: #666666;      
+	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=95);
+	-moz-opacity: 0.95;
+	-khtml-opacity: 0.95;
+	opacity: 0.95;
 }
 
 /* textcolor in dropdownmenu */
@@ -532,11 +551,6 @@ height:20px;
 	font-size: 11px;
 	font-weight: normal;
 	text-align: left;
-/*
-	background-image: url(images/menu-dot.gif);
-	background-position: 0% 50%;
-	background-repeat: no-repeat;
-*/
 }
 
 #navigation ul li ul li a.navlnk:hover {
@@ -549,9 +563,7 @@ height:20px;
 	border-right: 0px;
 }
 #navigation ul li.last {
-
 }
-
 #navigation ul li.dropfirst {
 	border-bottom: 0px;
 }
@@ -1341,4 +1353,4 @@ table.sortable thead {
 	padding-left: 12px;
 	padding-top: 12px;
 	padding-bottom: 12px;
-}
+}
\ No newline at end of file