I am currently working on a website project and have encountered an issue with the dropdown menu. I am using a template for the website where the dropdown menu is set to full width. However, I would like to reduce the width of the dropdown menu to match the size of the main heading box. Below is the code snippet from the display page along with the CSS script used in the HTML page. Can someone please assist me in adjusting the width of the dropdown menu?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu</title>
<link href="ddmenu/ddmenu.css" rel="stylesheet" type="text/css" />
<script src="ddmenu/ddmenu.js" type="text/javascript"></script>
<style>
/*The following styles are specific to this demo page only (not required for the ddmenu).*/
body { background: #eee url(loginpage1.jpg) no-repeat center 0px; padding-top:90px;}
</style>
</head>
<body>
<nav id="ddmenu">
<ul>
<li class="full-width">
<span class="top-heading">bguge</span>
<i class="caret"></i>
<div class="dropdown">
<div class="dd-inner">
<ul class="column">
<li><h3>hwehwieo</h3></li>
<li><a href='hgh.php'>gnehgiwe</a></li>
<li><a href='disuests.php'>ghgowgh</a></li>
</ul>
</div>
</div>
</li>
<!-- More list items here --!>
<li class="full-width">
<li><a href="index.php">LOGOUT</a></li>
</li>
</ul>
</nav>
</body>
</html>