Html 缩小下拉菜单的宽度

我有两页代码。我希望第一页的下拉菜单看起来像第二页的下拉菜单。第二页是我从W3学校复制和粘贴的一些代码

问题是在第一页上，下拉菜单的宽度与导航栏的宽度相同。我想为导航栏设置一个较小的宽度，但我不明白为什么它与导航栏的宽度相同

首页

ul{
保证金：0；
填充：0；
背景颜色：绿色；
溢出：隐藏；
列表样式类型：无；
}
李{
浮动：左；
}
李a,，
.dropbtn{
显示：内联块；
填充：50px 100px；
文字装饰：无；
颜色：白色；
}
李娜：停下来{
颜色：白色；
背景色：#333；
}
.下拉列表{
显示：内联块；
}
dropcont{
显示：无；
位置：绝对位置；
背景色：#333最小宽度：200px；
z指数：1；
}
Dropconta{
颜色：白色；
填充：12px 16px；
显示：块；
文本对齐：左对齐；
}
.dropdown:悬停.dropcont{
显示：块；
}

以下是更新后的css：

ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景颜色：绿色；
}
李{
浮动：左；
}
李a,，
.dropbtn{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李a：悬停，
.dropdown:悬停.dropbtn{
背景色：#333；
}
li.下拉列表{
显示：内联块；
}
dropcont{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
Dropconta{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.dropcont a:悬停{
背景色：#f1f1
}
.dropdown:悬停.dropcont{
显示：块；
}

您能分享一下您的代码吗？