/* 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 { 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; 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; color: white; }