/* This menu container will decide the dimensions such as height, width and margin for the menu. The width in this will help to create the verical menu. */ #menucontainer { margin: 0px; padding: 0px; width: 120px; height: 160px; display: block; } /* This will set the backgorund and the position for the menu */ #menucontainer ul { list-style: none; position: relative; display: inline-block; background-color:#2CDF7B; padding: 0px; top: -16px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* This will form the single menu its float: left will help to create the menu */ #menucontainer ul li { list-style: none; margin: 0px; padding: 0px; height: 35px; width: 100%; position: relative; display: inline; float: left; } /* This will set the anchor for single menu. background transperant and text-decoration none */ #menucontainer ul li a { list-style: none; top: 5px; 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:grey; font-weight: bold; } /* The following selector will define the way menu should be displayed when mouse is hovering above it. */ #menucontainer ul li:hover { list-style: none; background-color:rgba(44, 223, 123, 0.3); position: relative; display: inline; box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.4); } #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; font-weight: bold; border-radius: 5px; } #menucontainer ul li > a:hover { 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; font-weight: bold; border-radius: 5px; } /* The following selector will create Arrow displayed on the right hand side of the base menu when the mouse is hovering above it. */ #menucontainer ul li:hover:after { content: ""; display: block; border: 15px solid transparent; border-left-color: #2CDF7B; position: absolute; bottom: 2%; left: 100%; }