* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
direction: rtl;
}
#nav ul {
list-style: none;
/* padding: 25px; */
background-color: black;
}
#nav ul li {
display: inline-block;
position: relative;
}
#nav ul li a {
color: white;
text-decoration: none;
font-size: 20px;
/* vertical-align: 5px; */
width: 100px;
display: block;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
padding: 5px 0;
margin: auto;
transition: background-color 2s;
}
#nav ul li a:hover {
background-color: rgb(241, 240, 229);
color: black;
border-bottom: 1px solid rgb(8, 8, 8);
}
#nav ul ul {
/* display: none; */
visibility: hidden;
opacity: 0;
position: absolute;
top: 120%;
right: 0%;
transition: visibility 2s, opacity 2s;
}
#nav ul li:hover>ul {
/* display: block; */
visibility: visible;
opacity: 1;
}
.tri {
display: block;
width: 0;
height: 0;
border-bottom: 25px solid blue;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
position: absolute;
top: 100%;
right: 0;
}
