Create a sub menu using bootstrap with an indicator

Question

I have a question about creating a menu using the bootstrap framework where I would like to create a menu and a submenu that contains an indicator in case a simple dash as in the attached image.

   <!--  Inicio do Navbar -->
    <nav class="navbar navbar-default"><!-- navbar-fixed-top -->
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>

                <div class="visible-sm visible-xs">

                  <a class="navbar-brand" href="#">
                  <img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="">
                  </a>
                </div>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="page_item page-item-7"><a href="<?php echo get_site_url(); ?>/quem-somos/">Quem Somos</a></li>
                        <li class="page_item page-item-9">
                          <a href="<?php echo get_site_url(); ?>/suites/" class="submenu">Suítes</a>
                          <ul>
                            <li><a href="<?php echo get_site_url(); ?>/2018/01/10/master/">MASTER</a></li>
                            <li><a href="<?php echo get_site_url(); ?>/2018/01/10/premiere/">PREMIERE</a></li>
                            <li><a href="<?php echo get_site_url(); ?>/2018/01/10/deluxe/">DELUXE</a></li>                    
                          </ul>
                        </li>
                        <li class="page_item page-item-11"><a href="<?php echo get_site_url(); ?>/restaurante/">Restaurante</a></li>
                        <li class="page_item page-item-13"><a href="<?php echo get_site_url(); ?>/spa/">spa</a></li>
                        <li class="page_item page-item-15 current_page_item"><a href="<?php echo get_site_url(); ?>/experiencias/">EXPERIÊNCIAS</a></li>
                        <li class="page_item page-item-17"><a href="<?php echo get_site_url(); ?>/galeria/">Galeria</a></li>

                    </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>
<!--  Fim do Navbar -->

Answer 1

Follows a model using pseudo-element ::before

Since you don’t have CSS in the question I just used this template as a reference. Most likely you will need to treat the alignment of it in your CSS. But it serves as an example.

Run the Snippet below to see it working:

* {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.nav {
    list-style: none;
    font-weight: bold;
    margin-bottom: 10px;
    float: left; /* Clear floats */
    width: 100%;
    /* Bring the nav above everything else--uncomment if needed.
    position: relative;
    z-index: 5;
    */
}
.nav li {
    float: left;
    margin-right: 10px;
    position: relative;
}
.nav a {
    display: block;
    padding: 5px;
    color: #fff;
    background-color: #333;
    text-decoration: none;
}
.nav a:hover {
    color: #fff;
    background-color: #6b0c36;
    text-decoration: underline;
}

/*--- DROPDOWN ---*/
.nav ul {
    background-color: #fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background: rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style: none;
    position: absolute;
    left: -9999px; /* Hide off-screen when not needed (this is more accessible than display: none;) */
}
.nav ul li {
    padding-top: 1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float: none;
}
.nav ul a {
    white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
.nav li:hover ul { /* Display the dropdown on hover */
    left: 0; /* Bring back on-screen when needed */
    transform: translateX(-23%);
}
.nav li:hover ul::before { /* Display the dropdown on hover */
    content: "";
    display: block;
    width: 2px;
    height: 20px;
    background-color: aqua;
    top: 0;
    margin: 0 auto;
    margin-left: 46%;
}
.nav li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background-color: #6b0c36;
    text-decoration: underline;
}
.nav li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration: none;
}
.nav li:hover ul li a:hover { /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background-color: #333;
}

<ul class="nav">
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">The product</a></li>

            <li><a href="#">Meet the team</a></li>
        </ul>
    </li>
</ul>