HTML5 - Menu con submenu

 Menu con submenu

HTML5

<!-- MENU CON SUBMENU - NAVEGACION -->  

    <div id="navegacion">

        <ul class="nav">

            <li class="has-subplus"><a href="">Pagar Servicios</a>

                        <ul>

                            <li><a href="">CFE</a></li>

                            <li><a href="">A&D</a></li>

                            <li><a href="">GAS</a></li>

                        </ul>

            </li>

            <li class="has-subplus"><a href="">Fútbol Live</a>

                        <ul>

                            <li><a href="">Fútbol Libre</a></li>

                            <li><a href="">Roja Directa</a></li>

                            <li><a href="">Tubi</a></li>

                            <li><a href="">SportsBay</a></li>

                            <li><a href="">Live TV</a></li>

                        </ul>

                    </li>

            <li class="has-subplus"><a href="">Aplicaciones</a>

                <ul>

                    <li><a href="">HBO</a></li>

                    <li><a href="">Netflix</a></li>

                    <li><a href="">Izzi Go</a></li>

                    <li><a href="">Xview</a></li>

                    <li><a href="">Paramount</a></li>

                </ul>

            </li>

            <li class="has-subplus"><a href="">Video Games</a>

                 <ul>

                    <li><a href="">Roblox</a></li>

                    <li><a href="">Brawl Stars</a></li>

                </ul>

            </li>

        </ul>

    </div>

CSS3

/****** MENU CON SUBMENU - NAVEGACION ******/

#navegacion{

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #333333;

}

ul, ol {

    list-style:none;

}      

.nav > li {

    float:left;

}      

.nav li a {

    width: 170px;

    font-size: 14px;

    font-family: "Proxima Nova", -apple-system, Roboto, Arial, sans-serif, sans-serif;

    text-decoration:none;

    display:block;

    color: #fff;

    background: #333333;

    padding: 20px 30px;

   

}

.nav li a:hover{

        background: #3483fa;

}

.nav li.has-subplus > a:before {

  content: '+';

  position: relative;

  top: 50%;

  right: 5px;

  color: rgb(255, 194, 81);

  text-align: center;

}

.nav li.has-sub > a:after {

    content: none;

}

.nav li.has-sub > a:after {

  content: '»';

  position: relative;

  top: 50%;

  left: 10px;

  color: wheat;

  text-align: center;

}

.nav li ul {

    display:none;

    position:absolute;

    width: 170px;

}          

.nav li:hover > ul {

    display:block;

}          

.nav li ul li {

    position:relative;

}      

.nav li ul li a{

    padding: 20px 30px;

        background: #333333;

    margin: 0px;

    border-top-left-radius: 0px;

    border-top-right-radius: 0px;

}

.nav li ul li ul {

                right:-140px;

                top:0px;

}