JSFiddle - React, Tailwind, and code Playground

by Mehmet Alp

HTML

<nav class="main-menu">
<ul>
        <li id="menu-item-253" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-253"><a href="/build">Home</a>
        </li>
        <li id="menu-item-252" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-252"><a href="#">Store</a>
            <ul class="sub-menu" style="overflow: hidden; display: none;">
                <li class="cat-about">
                    <ul>
                        <li>
                            <img src="http://domain.com/build/wp-content/uploads/#">
                        </li>
                    </ul>
                </li>
                <li class="list">
                    <ul>
                        <li id="menu-item-36" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-36"><a href="#">Printers</a>
                            <ul class="sub-menu" style="overflow: hidden; display: none;">
                                <li id="menu-item-274" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-274"><a href="#">Color</a>
                                </li>
                                <li id="menu-item-272" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-272"><a href="#">Black/White</a>
                                </li>
                                <li id="menu-item-273" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-273"><a href="#">Dual</a>
                                </li>
                            </ul>
                        </li>
                        <li id="menu-item-39" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-39"><a href="#">Keyboards</a>
                            <ul class="sub-menu" style="overflow: hidden; display: none;">
                               ...

CSS

.main-menu {
    width: 100%;
}
.main-menu ul {
    float: left;
    position: relative;
    width: 100%;
}
.main-menu ul li {
    display: inline-block;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.main-menu ul li .sub-menu {
    background: none repeat scroll 0 0 #F1F1F2;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    display: none;
    left: 0;
    padding: 20px 10px;
    position: absolute;
    top: 34px;
    width: 100%;
}

JavaScript

$(function(){
$(".check").on('click', function(){
var optionTexts = [];
    
$('.list > ul > li > a').each(function(){
      
	    optionTexts.push($(this).text());
});
alert(optionTexts);
});    
});