Hi,

Do you familiar with html and css? Please try follow steps below:

1. Change the menu html to:

<ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="index.html">home</a></li>
    <li><a href="#" id="trigger-dropdown">pages</a></li>
    <li><a href="#">About</a>
        <ul class="submenu">
          <li><a href="index2.html">Home Page Two</a></li>
          <li><a href="index3.html">Home Page Three</a></li>
        </ul>
    </li>
    <li><a href="services2.html">Service</a></li>
    <li><a href="work.html">Work</a></li>
    <li><a href="blog.html">blog</a></li>
    <li><a href="contact.html">contact</a></li>
</ul>

2. Go to main.css in css folder and add custom style for sub menu.

/*Sub Menu*/
ul.submenu {
    opacity: 0;
    visibility: hidden;
    top: 65px;
    background-color: rgba(12,12,13,0.78);
    min-width: 180px;
    text-align: left;
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
         -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
}
ul.submenu > li {
    list-style: none;
    padding: 20px 0 0;
}
ul.submenu > li a {
    color: #fff;
    padding-left: 10px;
}
.overflow.fixed ul.submenu li > a {
    color: #000;
}
ul.submenu > li:last-child {
    padding-bottom: 20px;
}
.overflow.fixed ul.submenu {
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.11);
        -webkit-transition: all 0.3s ease-in;
        -o-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
        -webkit-font-smoothing: antialiased;
}
ul li:hover .submenu {
    visibility: visible;
    opacity: 1;
}
#header .menu-item.current .submenu a {
    color: #fff;
}
#header .menu-item.current .submenu a:hover {
    color: #8DA03C;
}
@media screen and (max-width: 768px){
.navbar > li:hover > .sub-menu {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 5%;
}
.navbar > li > .sub-menu li {
    margin: 10px 0px;
}
ul li:hover .submenu {
    position: relative;
    top: 0;
}
}

Hi,

Then you can change the style to:

@media screen and (max-width: 768px){
.navbar > li:hover > .sub-menu {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 5%;
}
.navbar > li > .sub-menu li {
    margin: 10px 0px;
}
ul li .submenu {
    position: relative;
    top: 0;
    visibility: visible;
    opacity: 1;
}
}

Hi,

Glad it’s working for you now. Do you still need my help?

Hi,

I am currently closing the ticket. Please don’t hesitate to submit a ticket whenever you need help. I will be happy to assist you.

P.S. I would appreciate if you could please rate the Theme and like the assistance under my support, means a lot to me. Thank you.

You can rate it with your themeforest account at your downloads page, precisely at this link: http://themeforest.net/downloads and hover over the 5 stars for our theme.

Also, if you have linkedin account, please endorsements for me at this link: https://www.linkedin.com/in/locrabbirt/.

Thank you so much for all your help!!!