/* Techonolgy Quest; creating a Circular menu is simple and completely depends on the "border-radius". While creating circular menu always keep same value for height, width and border-radius. Following id will define the dimensions for the menu, margin, padding width, height. */ #menucontainer { margin: 0px; padding: 0px; width: 100%; height: 90px; } /* Following selectors will define the color and the border radius for the menu*/ #menucontainer ul, #menucontainer ul li ul { list-style: none; margin: 0px; padding: 0px; } /* Following selector will define the style for individual menu or li tags. The following style gives them a look when the menus are not selected. note that the position proerty is set to relative and dispaly is inline. */ #menucontainer ul li { list-style: none; margin: 10px; padding: 0px; background-color:#2CDF7B; position: relative; display: inline; text-align: center; /*Setting the height and width for the menu*/ width: 90px; cursor:pointer; height: 90px; /*Setting the border-radius for the menu various prefix are added so it is supported in older version of browsers. For IE supported from IE-9+ IMPORTANT: to keep the border radius height and width same to get circle. */ -moz-border-radius: 90px; -webkit-border-radius: 90px; -khtml-border-radius: 90px; border-radius: 90px; /*Adding the box shadow to the menu*/ box-shadow: 0 0 10px black; -moz-box-shadow: 0 0 10px black; -webkit-box-shadow: 0 0 10px black; float: left; } /* Style for the anchor tag defined in the menu. */ #menucontainer ul li a { margin: 10px; padding: 10px; background-color:transparent; display: block; text-decoration: none; text-align: center; font-family:"Times New Roman", "Arabic"; font-size: 18px; height: 20px; color: #E3E3C0; } /* The hover effect is defined using the below selectors For the opacity is used to create a semi-transperant look as a hover effect */ #menucontainer ul li:hover { list-style: none; margin: 10px; padding: 0px; opacity: 0.7; background-color:#2CDF7B; position: relative; display: block; width: 90px; text-align: center; cursor:pointer; height: 90px; /*Setting the border-radius for the menu various prefix are added so it is supported in older version of browsers. For IE supported from IE-9+ IMPORTANT: to keep the border radius height and width same to get circle. */ -moz-border-radius: 90px; -webkit-border-radius: 90px; -khtml-border-radius: 90px; border-radius: 90px; -moz-box-shadow: inset 0 0 10px black; box-shadow: inset 0 0 10px black; -webkit-box-shadow: inset 0 0 10px black; } #menucontainer ul li:hover a { margin: 10px; padding: 10px; background-color:transparent; display: block; text-decoration: none; text-align: center; font-family:"Times New Roman", "Arabic"; font-size: 18px; width: 65%; height: 65%; color: white; } /*******************************************************/ /*******************************************************/ /*Sub menu*/ /*******************************************************/ #menucontainer ul li > ul { display : none; overflow: hidden; position: relative; border-bottom: solid 1px; border: 0px; height: 0px; width: 100%; } #menucontainer ul li:hover > ul { z-index: 10; float: none; top: -7px; left: -15px; margin: 9px; height: auto; padding: 0px 5px 0px 0px; display:block; width: 100px; } #menucontainer ul li:hover > ul li, #menucontainer ul li a:hover > ul li { list-style: none; margin: 10px; padding: 0px; background-color:#2CDF00; position: relative; display: inline; text-align: center; /*Setting the height and width for the menu*/ width: 90px; cursor:pointer; height: 90px; /*Setting the border-radius for the menu various prefix are added so it is supported in older version of browsers. For IE supported from IE-9+ IMPORTANT: to keep the border radius height and width same to get circle. */ -moz-border-radius: 90px; -webkit-border-radius: 90px; -khtml-border-radius: 90px; border-radius: 90px; /*Adding the box shadow to the menu*/ box-shadow: 0 0 10px black; -moz-box-shadow: 0 0 10px black; -webkit-box-shadow: 0 0 10px black; float: left; } /*******************************************************/ #menucontainer ul li:hover > ul li:after, #menucontainer ul li a:hover > ul li:after { content:" "; border: solid transparent; margin: 0px; padding: 0px; position: absolute; pointer-events: none; border-color: rgba(44, 223, 123, 0); border-top-color: #2CDF00; top: 98%; left: 50%; margin-left: -10px; border-width:10px; } #menucontainer ul li:hover > ul li:before, #menucontainer ul li a:hover > ul li:before { content:" "; border: solid transparent; margin: 0px; padding: 0px; position: absolute; pointer-events: none; border-color: rgba(44, 223, 123, 0); border-bottom-color: #2CDF00; bottom: 98%; left: 50%; margin-left: -10px; border-width:10px; } /*******************************************************/