Ghost currently does not support officially Dropdown Menu or Mega menu. But in Newsfeed Ghost Premium Theme We made a custom dropdown menu along with a mega menu feature.

Here following the steps, How you can change the navigation items :

For Dropdown Menu

01) Open the /_partials/navigations.hbs file, there the menu structure like that,

<ul class="navbar-nav me-auto">  
    <li class="nav-item"><a class="nav-link" href="#"> Menu Label</a> </li>
    <li class="nav-item"><a class="nav-link" href="#"> Menu Label</a> </li>
</ul>

But when you wants to add dropdown, you should add extra class dropdown with nav-item class. And for the toggle icon you should add dropdown-toggle with the parent anchor link.
Here is an example of the dropdown Menu

<ul class="navbar-nav me-auto">  
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#"> Menu Label </a>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"> Dropdown Label </a></li>
            <li><a class="dropdown-item" href="#"> Dropdown Label </a></li>
        </ul>
    </li>
</ul>

02) Now edit the navigation file as your need and make your own dropdown menu items.

Please note that you will need the code <ul class="navbar-nav me-auto"> </ul> only one time. That is the warpper element of that main navbar.

For Mega Menu

We used the following code for the mega menu. You can change the code as your need from there.

<ul class="navbar-nav me-auto">  
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#"> Menu Label </a>
    <li class="nav-item dropdown"> 
        <a class="nav-link  dropdown-toggle" href="/">Home </a>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item"  href="/">Home One</a></li>
            <li><a class="dropdown-item" href="/home-02">Home Two</a></li>
            <li><a class="dropdown-item" href="/home-03">Home Three</a></li>
            <li><a class="dropdown-item" href="/home-04">Home Four</a></li>
            <li><a class="dropdown-item" href="/home-05">Home Five</a></li>
            <li><a class="dropdown-item" href="/home-06">Home Six</a></li>
        </ul>
    </li>
    
    <li class="nav-item dropdown has-megamenu">
        <a class="nav-link dropdown-toggle" href="#"> {{t "Explore"}} </a>
        <div class="dropdown-menu megamenu">
            <div class="row">
                <div class="col-md-3">
                    <h6 class="text-danger">{{t "Home Variations"}}</h6>
                    <ul class="list-inline">
                        <li><a href="/home-02">Home Two</a></li>
                        <li><a href="/home-03">Home Three</a></li>
                        <li><a href="/home-04">Home Four</a></li>
                        <li><a href="/home-05">Home Five</a></li>
                        <li><a href="/home-06">Home Six</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h6 class="text-danger">{{t "Tags"}}</h6>
                    <ul class="list-inline">
                        <li><a href="/tag/sports">Sports</a></li>
                        <li><a href="/tag/fashion">Fashion</a></li>
                        <li><a href="/tag/national">National</a></li>
                        <li><a href="/tag/recipe">Recipe</a></li>
                        <li><a href="/tag/nature">Nature</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h6 class="text-danger">{{t "Pages"}}</h6>
                    <ul class="list-inline">
                        <li><a href="/about">{{t "About Us"}}</a></li>
                        <li><a href="#/portal/signin">{{t "Login"}}</a></li>
                        <li><a href="#/portal/signup">{{t "Register"}}</a></li>
                        <li><a href="/faq">{{t "FAQ"}}</a></li>
                        <li><a href="/privacy">{{t "Privacy Policy"}}</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h6 class="text-danger">{{t "Blog Pages"}}</h6>
                    <ul class="list-inline">
                        <li><a href="/design/">Post with Right Sidebar</a></li>
                        <li><a href="/violent-protests-erupt-in-colombia-anew-over-egregious-abuses/">Post with LR Sidebar</a></li>
                        <li><a href="/write">Post with Full Width</a></li>
                        <li><a href="/blog-01">Blog Layout 1</a></li>
                        <li><a href="/blog-02">Blog Layout 2</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
</ul>

There we used 4 columns inside the menu. If you want to make it 2 columns just use the code <div class="col-md-3"> to <div class="col-md-6"> . We used the bootstrap grid system there. To know more about the bootstrap grid follow the link.

It looks very confusing to you as you are not a web developer?

Please create a support ticket and explain your needs, we will set up the navigation menu free for you.