Drop Down Navigation Menu That Shows Latest Post per Category

Question

So I'm trying to work on my navigation menu in my wordpress website. I'm trying to copy the navigation menu from hongkiat.com (shown in the image).

In Hongkiat's navigation menu, you'll see the FIVE (5) Parent Categories (Design /dev, Technology, Inspiration, SOcial COmmerce and Deal). Once the user hovered on a Parent Category, it will show the recent posts under the Parent Category.

Anyway, I managed to code the Drop down menu with the Parent Category showing plus it's child category. Now the dilemma lies on how can I display the latest post (at least 3 posts) under the parent category that is hovered by the user.

Anyway, here's my code:

HTML/PHP

<ul>
    <?php 

        global $post;
        $myposts = get_posts('numberposts=3&offset=1');
        foreach($myposts as $post) ;


        $args = array(
        'show_option_all'    => '',
        'hide_empty'         => '0',
        'orderby'            => 'name',
        'order'              => 'ASC',
        'style'              => 'list',
        'use_desc_for_title' => 1,
        'child_of'           => 0,
        'hierarchical'       => 1,
        'title_li'           => (''),
        'show_option_none'   => __( '' ),
        'number'             => null,
        'echo'               => 1,
        'depth'              => 2,
        'current_category'   => 0,
        'pad_counts'         => 0,
        'taxonomy'           => 'category',
        'walker'             => null
        );
        wp_list_categories( $args ); 
    ?>
</ul>

CSS

.navone {
    display:inline-block;
    height:35px;
    vertical-align:middle;
    margin:0px auto;
    font-family: "Raleway",san-serif;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-size: 12px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-synthesis: weight style;
    font-variant: normal;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    text-transform:uppercase;
}

.navone ul {
    margin:0;
    padding:0;
}

.navone ul ul {
    display: none;

}

.navone ul li:hover > ul {
    display: block;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.navone ul {
    list-style: none;
    position: relative;
    display: inline-table;
}

.navone ul:after {
    content: ""; clear: both; display: block;
}

.navone ul li {
    float: left;
    cursor:pointer;
    padding:10px 20px;
}

.navone ul li:hover {
    background:#000;
}

.navone ul li:hover a {
    color: #fff;
}
    
.navone ul li a {
    display: block;
    color: #FFF;
    text-decoration: none;
}

.navone ul li ul {
    width:200px;
    z-index:9;
}

.navone ul ul {
    background: #000;
    padding: 0;
    position: absolute;
    top:100%;
    left:0;
}

.navone ul ul li {
    float: none; 
    position: relative;
    padding:5px 10px;
}

.navone ul ul li a {
    color: #fff;
}

.navone ul ul li a:hover {
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.navone ul ul ul {
    position: absolute; left: 100%; top:0;
}

.navone ul li ul li {
    padding:8px 10px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.navone ul li ul li:hover {
    border-left:5px solid #F52100;
    padding-left:20px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.navtwo {
    display:inline;
}

IF anyone could help me or point out what i'm missing because my code doesn't work. My code doesn't have errors but Im not achieving what I want to accomplish.

Could anyone extend their helping hand.

Answer 1

<ul>
<?php $args = array(
        'type'                     => 'post',
        'child_of'                 => 0,
        'parent'                   => '',
        'orderby'                  => 'name',
        'order'                    => 'ASC',
        'hide_empty'               => 1,
        'hierarchical'             => 1,
        'exclude'                  => '',
        'include'                  => '',
        'number'                   => '',
        'taxonomy'                 => 'category',
        'pad_counts'               => false

);

$categories = get_categories( $args );

foreach($categories as $cat)
{ 
    if ($cat->category_parent == 0) {

?>
    <li>
        <?php echo $cat->name; $cat_id = $cat->term_id;?>
        <?php $post_args = array(
            'post_type'=>'post',
            'posts_per_page' => 3,
            'cat' => $cat_id
        );
        $the_query = new WP_Query($post_args);
        if($the_query->have_posts()): ?>
        <ul>
            <?php while($the_query->have_posts()): $the_query->the_post(); ?>
                    <li>
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </li>
            <?php endwhile; ?>
        </ul>
        <?php endif; wp_reset_query(); ?>
    </li>
<?php } }?>
</ul>