how to force css on elements loaded inside div by js?

    <div id="menu" class="menu">
<ul id="items"  class="items">
    <li class="item" data-load="link to a page has contents >">cars</li>
    <li class="item" data-load="link to a page has contents >">games</li>
    <li class="item" data-load="link to a page has contents >">sport</li>
    <li class="item" data-load="link to a page has contents >">news</li>
    <li class="item" data-load="link to a page has contents >">cats</li>
    <li class="item" data-load="link to a page has contents >">toys</li>
</ul>
    
<div id="load_items" class="load_items_here">
    <!--items will load here by js code-->  
    </div>
</div>


 <script type="text/javascript">    
 //load categories inside the sidebar div          
        $(() => {
  $('.items').on('click','.item',function() {   
       var page = $(this).attr('data-load');
     $('#load_items').load(page);
  });
});  
     </script>

the contents that come from data-load="link to a page has contents >" and loaded in div id="load_items" not get css codes . i dont know why !!

but the div menu and the ul + li get css .

how to fix this problem ?

Solution

Try this one, i have used my own css to check and verify this.

$(document).ready(() => {
    $('.items').on('click', '.item', function() {
        var page = $(this).attr('data-load');
        $('#load_items').load(page, function() {
            // Optional: Force a reflow if necessary
            $(this).hide().show(0);
        });
    });
});

body {
    font-family: Arial, sans-serif;
}

.menu {
    width: 200px;
    float: left;
    background: #f0f0f0;
    padding: 10px;
}

.items {
    list-style-type: none;
    padding: 0;
}

.item {
    padding: 10px;
    cursor: pointer;
}

.item:hover {
    background-color: #ddd;
}

.load_items_here {
    margin-left: 220px; /* Space for the menu */
    padding: 10px;
    border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="menu" class="menu">
    <ul id="items" class="items">
        <li class="item" data-load="content/cars.html">Cars</li>
        <li class="item" data-load="content/games.html">Games</li>
        <li class="item" data-load="content/sport.html">Sport</li>
        <li class="item" data-load="content/news.html">News</li>
        <li class="item" data-load="content/cats.html">Cats</li>
        <li class="item" data-load="content/toys.html">Toys</li>
    </ul>

    <div id="load_items" class="load_items_here">
        <!-- Items will load here by JS code -->
    </div>
</div>