CSS3二级导航菜单制作步骤详解.docxVIP

第

第PAGE1页共NUMPAGES1页

CSS3二级导航菜单制作步骤详解

假如想要实现网页的二级导航，我们可以用法JS技术，动态的显示和躲藏二级菜单，固然也可以用法CSS技术来实现。并且这里推举用法CSS，由于其效率更高，更流畅。这里将介绍二级菜单的动态显示与躲藏。

1结构

普通导航的主体我们主要是用法ulli标签

首页

产品

小程序

微信

企业站

服务

技术支持

产品外包

关于我们

人才聘请

2布局

导航的布局，因为子元素要随着父元素，所以对二级菜单选取定位布局。要想让多个li在一行中显示，那么就需要让li举行浮动。

body{margin:0;font-size:14px;color:666}

ul,ol{margin:0;padding:0;list-style:none;}

a{text-decoration:none;color:666;}

/*一级导航*/

/*背景色*/

ul.menu,ul.submenu{

background-color:ededed;

}

/*一级导航浮动*/

ul.menu::after{

content:39;39;;

display:block;