/* Techonolgy Quest; creating a horizontal menu is simple. Following id will define the dimensions for the menu, margin, padding width, height. */ #menucontainer { margin: 0px; padding: 0px; width: 100%; height: 90px; } #menucontainer ul, #menucontainer li, #menucontainer a { margin: 0px; padding: 0px; } /* Following selectors will define the color and the border radius for the menu*/ #menucontainer ul, #menucontainer li { list-style: none; background-color:#2CDF7B; /*Using the border-radius property from css3 to get rounded corners for the menu */ -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; } /* 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: 0px; padding: 0px; background-color:#2CDF7B; position: relative; display: inline; width: auto; height: 70px; } /* Style for the anchor tag defined in the menu. */ #menucontainer ul li a { list-style: none; margin-left: 10px; padding-left: 10px; margin-right: 10px; padding-right: 10px; background-color:transparent; position: relative; display: inline; text-decoration: none; font-family:"Times New Roman", "Arabic"; font-size: 20px; color: #E3E3C0; } /* The hover effect is defined using the below selectors For the background-color the function rgba is used to create a semi-transperant look as a hover effect */ #menucontainer ul li:hover { list-style: none; margin: 0px; padding: 0px; background-color:rgba(195, 190, 95, 0.6); position: relative; display: inline; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; } #menucontainer ul li:hover a { list-style: none; margin-left: 10px; padding-left: 10px; margin-right: 10px; padding-right: 10px; background-color:transparent; position: relative; display: inline; text-decoration: none; font-family:"Times New Roman", "Arabic"; font-size: 20px; color:white; z-index: 20; }