[分享]css中如何设置导航菜单

CSS中设置导航菜单是一个非常常见的任务，以下是一些常见的方法和要点：

1. 使用列表元素

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    display: inline-block;
} 

使用无序列表（ul）和列表项（li）可以非常方便地构建导航菜单。通过设置li元素为inline-block可以让它们在一行中显示，并且可以方便地设置间距和样式。

2. 使用定位

nav {
    position: relative;
}
ul {
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    display: inline-block;
} 

使用定位可以让导航菜单悬浮在页面上方，从而在视觉上更加突出。通过设置ul元素为绝对定位并且设置它的top属性为100%可以让它紧贴在nav元素下方，并且可以方便地设置样式。

3. 使用flexbox

nav {
    display: flex;
    justify-content: center;
}
ul {
    display: flex;
    list-style: none;
    margin: 0;
}
li {
    margin: 0 10px;
} 

使用flexbox可以让导航菜单自适应屏幕尺寸，并且可以方便地设置间距和居中。通过设置nav元素为flex，并且设置其justify-content属性为center可以让ul元素居中。通过设置ul元素为flex，并且设置li元素的margin属性为间距可以实现间距的调节。