How to create responsive sub menus in CSS3

I'm just new with HTML and CSS, I wanted to create 2 sub menu on my MY WORK which are Digital Arts and Videography. I'm getting confuse in the CSS3 side so I need help. Check the preview below and the expected outcome I wanted. Thanks !

HTML

<!DOCTYPE html>

<html>
<link rel="shortcut icon" href="browserlogo.png">
<title></title>


<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>

<body>
<nav>
<ul>
<li><img src="logoweb.jpg" id="logo"></li>
    <li><a href='#'>PROFILE</a></li>
    <li><a href='#'>MY WORK</a></li>
    <li><a href='#'>RECORDS</a></li>
    <li><a href='#'>PUBLICATION</a></li>
    <li><a href='#'>CONTACT ME</a></li>
</ul>
</nav>




</body>
</html>

CSS

body{background-color:#000000 ;}

#logo{
position:absolute;
top:0.5%; 
left:3%;
width:185px;
height:59px;
overflow:hidden;
}

#header{
position:absolute;
top:7%; 
left:0%;
width:1600px;
height:600px;
overflow:hidden;
}

*{
    padding: 0;
    margin: 0;
}


nav{
background-color: #233647;
text-align: right;
padding: 25px;
}

nav li {
display: inline-block;
margin: 0px 1px;
padding-top: 1px;
}

nav li a{
color: white;
padding: 25px;
text-decoration: none;
font-family: arial;
}





nav li a:hover{
background-color: white;
color: #233647;
 }

Preview

Outcome I wanted

Solution

body{background-color:#000000 ;}
#logo{
position:absolute;
top:0.5%; 
left:3%;
width:185px;
height:59px;
overflow:hidden;
}
#header{
position:absolute;
top:7%; 
left:0%;
width:1600px;
height:600px;
overflow:hidden;
}
*{
padding: 0;
margin: 0;
}
nav{
background-color: #233647;
text-align: right;
padding: 25px;
}
nav li {
position:relative;
}
nav  li, ul li {
display: inline-block;
margin: 0px 1px;
padding-top: 1px;
}
nav  li a {
color: white;
padding: 25px;
text-decoration: none;
font-family: arial;
}
nav  li ul li a {
color: white;
padding: 25px;
text-decoration: none;
font-family: arial;
padding:25px ;
display:block;
background:#233647;
text-align:center;
}
nav  li ul li{
width:100%;
}
nav li ul{
display:none;
position:absolute;
top:42px;
background: #233647;
}
nav  li:hover ul{
display:block;
}
nav li a:hover{
background-color: white;
color: #233647;
}

<!DOCTYPE html>
<html>
   <link rel="shortcut icon" href="browserlogo.png">
   <title></title>
   <head>
      <link rel="stylesheet" type="text/css" href="home.css">
   </head>
   <body>
      <nav>
         <ul>
            <li><img src="logoweb.jpg" id="logo"></li>
            <li><a href='#'>PROFILE</a></li>
            <li>
               <a href='#'>MY WORK</a>
               <ul>
                  <li><a href='#'>Digital Arts</a></li>
                  <li><a href='#'>Videography</a></li>
               </ul>
            </li>
            <li><a href='#'>RECORDS</a></li>
            <li><a href='#'>PUBLICATION</a></li>
            <li><a href='#'>CONTACT ME</a></li>
         </ul>
      </nav>
   </body>
</html>