CSS中的导航二级菜单是网站设计中的基本功能之一。通过二级菜单,可以轻松地将网站的主题分类和导航方式更加清晰明了。<ul> <li>&l
CSS中的导航二级菜单是网站设计中的基本功能之一。通过二级菜单,可以轻松地将网站的主题分类和导航方式更加清晰明了。
<ul> <li><a href="#">主页</a></li> <li><a href="#">产品</a> <ul> <li><a href="#">产品1</a></li> <li><a href="#">产品2</a></li> <li><a href="#">产品3</a></li> </ul> </li> <li><a href="#">关于我们</a></li> </ul>
如上所示,使用HTML标签来实现导航的基本结构,<ul>用来承载导航内容,<li>用来分别表示导航中不同的选项。如果一个选项需要二级菜单,则在<li>中再嵌套一个<ul>即可。
ul { list-style: none; margin: 0; padding: 0; background-color: #333; } li { float: left; position: relative; } li a { display: block; color: white; text-decoration: none; padding: 10px 20px; } li:hover { background-color: #4CAF50; } ul ul { position: absolute; top: 100%; left: 0; display: none; background-color: #f9f9f9; padding: 0; } ul ul li { float: none; width: 100%; } ul ul a { color: #444; padding: 10px 20px; } ul ul a:hover { background-color: #4CAF50; color: white; } li:hover > ul { display: block; }
如上所示,通过CSS样式来设置导航的样式。首先,要将该列表元素的样式设置为无格式样式(list-style: none;)。其次,通过margin和padding属性控制间距和内边距。然后,可以设置背景颜色,文本颜色等外观属性。当鼠标悬停在一个导航选项上时,可以设置背景颜色等效果。
对于二级菜单,需要设置其为绝对定位,并将其顶部位置设置为100%。设置display:none来控制其初始状态为隐藏。> ul选择器用来选择父元素的直接子元素,所以可以在父元素上设置:hover来控制二级菜单的显示与否。
粉丝
0
关注
0
收藏
0