MyBB Community Forums

Hi,
I am trying to modify my theme with limited coding knowledge, basiacally just by seeing how the code has done it else where and try to replicate.
I am using Igame theme trying to add a new drop down menu called Data menu next to the already existing drop down menu called "more"

can you please look over this code to see what I am doing wrong?

<li><a href='javascript:;' id="extraslink"> More  <i style="font-size: 10px;" class="fa fa-chevron-down fa-fw"></i></a></li>
	<li><a href='javascript:;' id="datamenu"> Data Menu  <i style="font-size: 10px;" class="fa fa-chevron-down fa-fw"></i></a></li>
</ul>
<br />
</div> 	
	
   </div>
</div>

  <div id="extraslink_popup" class="popup_menu" style="z-index: 99999; display: none;">
      <div class="popup_item_container">
        <a href="{$mybb->settings['bburl']}/stats.php" class="popup_item">Forum stats</a>
      </div>
      <div class="popup_item_container">
        <a href="{$mybb->settings['bburl']}/showteam.php" class="popup_item">Show team</a>
      </div>
    <div class="popup_item_container">
        <a href="{$mybb->settings['bburl']}/search.php?action=getnew" class="popup_item">New topics</a>
      </div>
      <div class="popup_item_container">
        <a href="{$mybb->settings['bburl']}/search.php?action=getdaily" class="popup_item">Todays topics</a>
      </div>
	  <div class="popup_item_container">
      </div>
  </div> 
  <table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0">
             <tr>
                <td valign="center">
					<div id="datamenu_popup" class="popup_menu" style="z-index: 99999; display: none;">
      <div class="popup_item_container">
        <a href="{$mybb->settings['bburl']}/newpoints.php?action=donate" class="popup_item">Donate</a>
      </div>
      <div class="popup_item_container">
        <a href="{$mybb->settings['bburl']}/newpoints.php?action=lottery" class="popup_item">Lottery</a>
      </div>
    <div class="popup_item_container">
        <a href="{$mybb->settings['bburl']}/slots.php?action=getdaily" class="popup_item">Slot Machine</a>
      </div>
      <div class="popup_item_container">
        <a href="{$mybb->settings['bburl']}/newpoints.php?action=stealing" class="popup_item">Steal User Data</a>
      </div>
	  <div class="popup_item_container">
        <a href="{$mybb->settings['bburl']}.newpoints.php?action=purchasecredits" class="popup_item">Buy Data</a>
      </div>
  </div> 
  <table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0">
             <tr>
                <td valign="center">
					
                <div id="logo">
					<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" /></a>
					</div>
					

got the menu working but the drop down menu is dropping down in the wrong place.
any help?

<div id="mainwidth"> 
	<!-- Main Menu Container -->
<div id="main-menu-container">
    <div id="main-menu">
		
<div class="bmenu">
<ul><li><a href="{$mybb->settings['bburl']}/index.php"><i style="font-size: 16px;" class="fa fa-home fa-fw"></i>Home</a></li>
	<li><a href="{$mybb->settings['bburl']}/search.php"><i style="font-size: 16px;" class="fa fa-search fa-fw"></i> {$lang->toplinks_search}</a></li>
	<li><a href="{$mybb->settings['bburl']}/memberlist.php"><i style="font-size: 16px;" class="fa fa-users fa-fw"></i> Members</a></li>
	<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="popup_item">Help docs</a></li>
<li><a href="#" id="extraslink"> More<i style="font-size: 10px;" class="fa fa-chevron-down fa-fw"></i></a></li>
<li><a href="#" id="datamenu">Data Menu<i style="font-size: 10px;" class="fa fa-chevron-down fa-fw"></i></a></li>
	</ul>
 <!-- More Menu -->
            <div id="extraslink_popup" class="popup_menu" style="z-index: 99999; display: none;">
                <div class="popup_item_container">
                    <a href="{$mybb->settings['bburl']}/stats.php" class="popup_item">Forum stats</a>
                </div>
                <div class="popup_item_container">
                    <a href="{$mybb->settings['bburl']}/showteam.php" class="popup_item">Show team</a>
                </div>
                <div class="popup_item_container">
                    <a href="{$mybb->settings['bburl']}/search.php?action=getnew" class="popup_item">New topics</a>
                </div>
                <div class="popup_item_container">
                    <a href="{$mybb->settings['bburl']}/search.php?action=getdaily" class="popup_item">Today's topics</a>
                </div>
            </div>

<br />

	  <!-- Data Menu -->
            <div id="datamenu_popup" class="popup_menu" style="z-index: 99999; display: none;">
                <div class="popup_item_container">
                    <a href="{$mybb->settings['bburl']}/newpoints.php?action=donate" class="popup_item">Donate</a>
                </div>
                <div class="popup_item_container">
                    <a href="{$mybb->settings['bburl']}/newpoints.php?action=lottery" class="popup_item">Lottery</a>
                </div>
                <div class="popup_item_container">
                    <a href="{$mybb->settings['bburl']}/slots.php?action=getdaily" class="popup_item">Slot Machine</a>
                </div>
                <div class="popup_item_container">
                    <a href="{$mybb->settings['bburl']}/newpoints.php?action=stealing" class="popup_item">Steal User Data</a>
                </div>
                <div class="popup_item_container">
                    <a href="{$mybb->settings['bburl']}/newpoints.php?action=purchasecredits" class="popup_item">Buy Data</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        // Function to toggle visibility of the popup menu
        function toggleMenu(triggerId, menuId) {
            const trigger = document.getElementById(triggerId);
            const menu = document.getElementById(menuId);

            if (trigger && menu) {
                trigger.addEventListener("click", function (e) {
                    e.preventDefault(); // Prevent default link action
                    // Toggle menu visibility
                    menu.style.display = (menu.style.display === "none" || menu.style.display === "") ? "block" : "none";
                });

                // Close menu if clicked outside
                document.addEventListener("click", function (e) {
                    if (!menu.contains(e.target) && !trigger.contains(e.target)) {
                        menu.style.display = "none";
                    }
                });
            }
        }

        // Attach event listeners for each menu
        toggleMenu("extraslink", "extraslink_popup");
        toggleMenu("datamenu", "datamenu_popup");
    });
</script>
<style>
    .popup_menu {
        position: absolute;
        background-color: #fff;
        border: 1px solid #ddd;
        display: none; /* Hidden by default */
        padding: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 1000;
    }

    .popup_item_container {
        padding: 5px 0;
    }

    .popup_item_container a {
        text-decoration: none;
        color: #333;
        display: block;
        padding: 5px 10px;
    }

    .popup_item_container a:hover {
        background-color: #f0f0f0;
    }
</style>
  <table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0">
             <tr>
                <td valign="center">
					
					
                <div id="logo">
					<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" /></a>
					</div>
					
					  </td>
                          <td>&nbsp;</td>
                           <td valign="center"> 
							   
                             <div class="float_right">{$welcomeblock}</div>
							   
                              </td>
                                 </tr>
                                   </table>		  
	   
 <div class="container">
       <div id="content"> 
           <div class="wrapper">
				{$pm_notice}{$ougc_awards_requests}
				{$remote_avatar_notice}
				{$bannedwarning}
				{$bbclosedwarning}
				{$modnotice}
				{$pending_joinrequests}
				{$awaitingusers}
                                <navigation>
				<br />				

</script>