CSS下拉菜单是一个常见的网页元素，可以让用户方便地选择操作或者浏览网站的内容。在这个下拉菜单中，顶层指的是未被选中时在页面上显示的菜单标题。

/*样式代码*/
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}

在这段样式代码中，容器的class名称为dropdown，而下拉菜单的class名称为dropdown-content。其中，容器的position被设置为relative，表示相对于父元素定位；而下拉菜单的position被设置为absolute，表示绝对定位，且z-index为1，这样可以保证下拉菜单在页面中的层级是最靠前的，不会被其他元素遮盖。

当鼠标悬浮于菜单上时，使用:hover伪类选择器，将下拉菜单的display属性设置为block，使其在页面上显示。而当鼠标移开菜单时，下拉菜单的display属性又被设置为none，让菜单隐藏。

顶层菜单也可以自定义样式，例如添加背景颜色，设置字体大小和颜色等。这些样式可以在.dropdown中添加。

/*顶层菜单样式*/
.dropdown a {
display: block;
background-color: #f2f2f2;
padding: 12px 16px;
font-size: 16px;
color: #333;
text-decoration: none;
}
/*鼠标悬浮样式*/
.dropdown a:hover {
background-color: #ddd;
}

对于顶层菜单，我们首先选择所有a元素，并设置display为block，使其变成块级元素。然后设置背景颜色，内边距，字体大小和颜色以及文本修饰。当鼠标悬浮在菜单上时，我们使用:hover选择器来添加样式，改变背景颜色。

通过自定义样式和下拉菜单方式的辅助，我们可以创建一个符合设计需求的下拉菜单，方便用户使用和浏览网站内容。