Is there a way to create a dropdown menu using CSS to this horizontal menu I have? Im trying to create the dropdown menu on the “Article” section

Question

On the anchor element of Article, I would like to create a dropdown menu style, but when I try to modify my code with W3School's dropdown tutorial, it would not work with my existing HTML and CSS code. I have added the div class into my class to hopefully work with the Article section.
Here is what Im working with in HTML:

 <div class="mainNav">
            <ul>
                <li><a title="Home page" class="current">Home</a></li>

                <div class="dropdown">
                    <button class="dropbtn">
                <li><a href="article.html" title="Read articles">Articles <i class="fa fa-caret-down"></i></a></li>
                    </button>
                    <div class="dropdown-content">
                        <li><a href="#movieReview1">Movie Review 1</a> </li>
                        <li><a href="#movieReview2">Movie Review 2</a> </li>
                    </div>
                </div>
            </ul>
 </div>    

Here is my CSS for the horizontal menu only, not sure how to start to create the dropdown menu.

CSS:

/*Horizontal menu styles*/
.mainNav {
    background: #F2B279;
    height: 2.3em;
}

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;    
    display: inline-block;
}

ul {
    background: #0B8CBF;
    height: 2em;
    width: 100%;
    text-align: center;
}

li a {
    display: block;
    line-height: 2em;
    padding: 0 2em;
    color: white;
    text-decoration: none;       
}

li a:hover {
  background: #F2B279;
  height: 2em;
  position: relative;
  border-radius: .5em .5em 0 0;
}

.current, a:hover.current {
  background: #F2B279;
  color: #eee;
  padding-top: .3em;
  position: relative;
  top: -.3em;
  border-radius: .5em .5em 0 0;
  position: relative;
  top: -.3em;
  border-bottom: .3em solid #F2B279;
  cursor: default;
}

Answer 1

I have made some changes to your html to make it more standard and clear, as div can't be used as direct child of of <ul> tag, also your main <ul> is missing a closing tag, made few changes to css also to make the dropdown show when hovered.

Try this code:

Html

<div class="mainNav">
    <ul>
        <li><a title="Home page" class="current">Home</a></li>
        <li class="dropdown">
            <a href="article.html" title="Read articles">Articles <i class="fa fa-caret-down"></i></a>
            <ul class="dropdown-content">
                <li><a href="#movieReview1">Movie Review 1</a> </li>
                <li><a href="#movieReview2">Movie Review 2</a> </li>
            </ul>
        </li>
    </ul>
</div>    

CSS

.mainNav {
    background: #F2B279;
    height: 2.3em;
}

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;    
    display: inline-block;
}

ul {
    background: #0B8CBF;
    width: 100%;
    text-align: center;
}
li{
  position:relative;
}
.mainNav > ul{
  display:flex;
  height: 2em;
  justify-content:center;
}
.mainNav > ul > li:hover .dropdown-content{
  visibility:visible;
  opacity:1;
}
ul li a {
    display: block;
    line-height: 2em;
    padding: 0 2em;
    color: white;
    text-decoration: none;       
}

li a:hover {
  background: #F2B279;
  height: 2em;
  position: relative;
  border-radius: .5em .5em 0 0;
}

.current, a:hover.current {
  background: #F2B279;
  color: #eee;
  padding-top: .3em; 
  position: relative;
  top: -.3em;
  border-radius: .5em .5em 0 0;
  position: relative;
  top: -.3em;
  border-bottom: .3em solid #F2B279;
  cursor: default;
}
.dropdown-content{
  position:absolute;
  top:100%;
  left:0;
  min-width:200px;
  visibility:hidden;
  opacity:0;
}
.dropdown-content li{
  display:block;
}

Hope it helps.