打开网页的样式 … 下面去定义一下导航菜单的样式 … 先输入一行注释 … command + / 导航菜单

先去掉无序列表的列表样式还有边距 ….

ul{}

lis:n … list-style 设置为无 …

pd0 padding 设置为 0 …

另起一行 … 再设置一下导航菜单下面的 li 标签，还有 a 标签的样式 …

#nav li, #nav li a{

}

把他们都设置为行内的块级元素 … d:ib

添加点内边距 … pd7px15px ….

去掉下划线 … td ..

设置一下文字的颜色 … co ---- 3b3b3b ，color:#3b3b3b;

hover 样式

再定义一下鼠标悬停在菜单项目上的样式 …

#nav li a:hover{}

可以使用 background 添加一个背景 … bg ….. #eee 在浏览器上预览一下 ….

.active

被激活的菜单项可以单独去设置一种样式 … 先回到网页的代码 … 找到一个菜单项目 … 在上面添加一个 .active 类 …

回到样式表 … #nav 下面的 .active

#nav .active{}

设置一下背景的颜色 …. bg …. #eee

隐藏按钮

下面我们去把页面上的切换导航菜单显示的按钮隐藏起来 … 因为我们只想让它们小尺寸的屏幕上显示出来 …

在按钮上，都添加了一个 toggle-btn 的类 …

.toggle-btn{}

dis:n ...

现在导航菜单的基本样式就设计好了 …

/* Navigation */
#nav{
background:none;
text-align:left;
}

#nav li, #nav li a{
display:inline-block;
padding:7px 15px;
text-decoration:none;
color:#3b3b3b;
}
#nav li a:hover{
background:#eee;
}
#nav .active{
background:#eee;
}

/* 隐藏按钮 */
.toggle-btn{
display:none;
}