“<li>”标签与当前导航栏布局不兼容</li>

Question

简单地说，我使用HTML和CSS设计并编码了一个非常简单的水平导航栏，而不使用li标签，现在我发现需要一个下拉列表。没什么大不了的，我只想添加一些li和一些ul标签来创建它。不，不行。它强制我躺在导航栏上的图像，并且完全忽略了我已经为div中的链接准备的CSS（显然，li标签有自己的样式，不是吗？

目前，这是HTML：

<div id="navside">
<a href="Beds.html">Beds</a>
<a href="Furniture.html">Furniture</a>
<h> Francis of Malvern </h>
<a href="Carpets.html">Flooring</a>
<a href="Clearance.html">Clearance</a>
</div>

和CSS：

#navside {
position: absolute;
color: #ffffff;
width:100%;
height: 15%;
text-align: center;
box-shadow: 0px 0px 8px 0px #000000;
background-color: rgba(1, 1, 1, 0.6);
color: rgba(1, 1, 1, 0.8);
}

#navside a {
font-size: 20px;
padding-right:100px;
padding-left:100px;
color: white;
text-decoration: none;
text-align: center;
}

#navside a:hover {
color: gray;
} 

我单独用于导航栏的代码。

基本上，我只是想知道是否可以在不弄乱页面其余部分布局的情况下获得下拉列表。

非常感谢任何帮助。