<div id = "temp">
<h1>Hajizade Corporation</h1>
<ul id = "menu">
<li><a href="#">About us</a></li>
<li><a href="#">Products & Services</a>
<ul id = "ul2">
<li><a href="#">Product #1</a></li>
<li><a href="#">Product #2</a></li>
<li><a href="#">Product #3</a></li>
</ul>
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contacts</a></li>
</div>
@import url(https://fonts.googleapis.com/css?family=Lobster);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700);
div#temp {
position: relative;
margin: auto;
width: 1050px;
height: 700px;
background: #4b0082;
}
h1{
position: absolute;
font-family: 'Lobster', cursive;
font-size: 100px;
color: #ffe4e1;
left: 90px;
margin-top: 40px;
}
ul#menu {
display: table;
margin: auto;
}
ul#menu li:nth-child(1){
border-radius:50px 0px 50px 0px;}
ul#menu li:nth-child(2){
border-radius:50px 0px 50px 0px;}
ul#menu li:nth-child(3){
border-radius:50px 0px 50px 0px;}
ul#menu li:nth-child(4){
border-radius:50px 0px 50px 0px;}
ul#menu li ul#ul2 li:nth-child(1){
border-radius: 0px 50px 0px 50px;}
ul#menu li ul#ul2 li:nth-child(2){
border-radius: 50px 0px 50px 0px;}
ul#menu li ul#ul2 li:nth-child(3){
border-radius: 0px 50px 0px 50px;}
ul#menu li{
position: relative;
display: inline-block;
margin-top: 180px;
padding: 8px;
font-family: 'Roboto Slab', serif;
height: 70px;
line-height: 75px;
background: #ba55d3;
width: 210px;
text-align: center;
left: -15px;
}
a {
font-size: 20px;
text-decoration: none;
color: #ffe4e1;
}
ul#menu li:hover {
background: purple;
}
ul#menu li ul#ul2 {
display: none;
position: absolute;
}
ul#menu li:hover ul#ul2{
display: block;
}
ul#menu li ul#ul2 li {
margin-top: 8px;
padding: 6px;
left: -6px;
}