下面是一个简单的 CSS 导航下拉箭头样式示例：
“`css
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
nav li {
display: inline-block;
margin-right: 10px;
nav a {
display: block;
text-align: center;
padding: 8px 16px;
color: #333;
text-decoration: none;
border-radius: 4px;
border: none;
nav a:hover {
background-color: #ddd;
color: #333;
/* 下拉箭头样式 */
nav a::before,
nav a::after {
content: “”;
border-radius: 4px;
width: 8px;
height: 8px;
background-color: #777;
display: inline-block;
margin-right: 4px;
nav a::after {
left: 50%;
transform: translateX(-50%);
/* 样式说明 */
list-style-type: none;
display: inline-block;
width: 100%;
text-align: center;
/* 下拉箭头样式 */
上述示例中，大家使用了 `nav ul` 定义导航菜单的列表，`nav li` 定义了列表中的子元素。然后，大家使用 `nav a` 定义了导航菜单中的按钮。
`nav a::before` 和 `nav a::after` 分别定义了下拉箭头的样式。`content` 属性用于定义下拉箭头的内容，`border-radius` 和 `border` 属性用于定义下拉箭头的边缘半径和边框样式，`width` 和 `height` 属性用于定义下拉箭头的宽度和高度，`background-color` 属性用于定义下拉箭头的背景颜色。`display: inline-block` 属性使按钮变为内联块元素，`margin-right: 4px` 属性用于使下拉箭头向右偏移4px。
最后，大家使用 `ul` 和 `li` 定义了导航菜单的列表和子元素。
通过上述示例，大家可以创建出各种样式的导航下拉箭头，以适应不同的应用场景。使用 CSS 可以灵活地控制样式的外观和行为，并且可以在不同的浏览器和设备上保持一致。