13518219792
纯css实现的，所以任性的不需要js部分了，但是要详细说明下，上面的html代码中的“{module:catalog}”调用出来的是网站分类，当某个分类下有子分类（二级分类）时自动出现下拉导航，很方便。
我们提供的服务有：网站制作、网站设计、微信公众号开发、网站优化、网站认证、罗源ssl等。为近千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的罗源网站制作公司
可是这样做有个缺陷，就是网站的单页面如留言本、关于我们啊这些就不能出现在导航栏上面了，因为调用的是网站分类而不是导航栏，所以对这个有需求的同学可以把html代码部分改成这样：
使用CSS两步实现横向或纵向二级菜单
首先我们写一个li格式的代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
title无标题页/title
/head
body
ul
li1/li
li2/li
li3/li
li4/li
/ul
/body
/html
从上面的代码我们得到如下的效果:
清除它的默认样式即把ul的list-style:none，这样就显示如下(图二)：
增加二级子节点
ul
li
a href ="#"1/a
ul
lia href="#"11/a
/li
lia href="#"11/a
/li
/ul
/li
lia href ="#"2/a
ul
lia href="#"22/a
/li
lia href=""22/a/li
/ul/li
lia href=""3/a
ul
lia href=""33/a/li
lia href=""33/a/li
lia href=""33/a/li
/ul
/li
lia href=""4/a
ul
lia href=""44/a/li
lia href=""44/a/li
lia href=""44/a/li
/ul
/li
/ul
得到如下效果:
我们可以看到二级菜单很正常的显示了，所以我们要使其不可见：设置子无序列表为不可见：ul li ul
{
display:none;
}
效果出来了，但是是图一的效果,不是我们需要的，在做如下设置:
ul li:hover ul
{
display:block;
}
上面的代码的意思是:当鼠标滑过一级菜单的li时，二级菜单ul显示为块级元素；可是运行程序发现当鼠标真的划过一级菜单时，二级菜单会把一级菜单给挤开了，这个时候我们应该想到一个属性position:absolute;就是说把二级菜单设置为绝对定位；这样二级菜单将脱离原来文档流，不再占据空间，因此也不会一级菜单内容挤开了，这样以来一个超级简陋的纵向二级菜单就算是完成了。
我们把全部的代码都显示出现:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
title/title
style
ul
{
list-style:none;
}
ul li ul
{
display:none;
position:absolute;
}
ul li:hover ul
{
display:block;
}
/style
/head
body
div id="nav"
ul
li
a href ="#"1/a
ul
lia href="#"11/a
/li
lia href="#"11/a
/li
/ul
/li
lia href ="#"2/a
ul
lia href="#"22/a
/li
lia href=""22/a/li
/ul/li
lia href=""3/a
ul
lia href=""33/a/li
lia href=""33/a/li
lia href=""33/a/li
/ul
/li
lia href=""4/a
ul
lia href=""44/a/li
lia href=""44/a/li
lia href=""44/a/li
/ul
/li
/ul
/div
/body
/html
大家可以运行看看，基本的效果实现的.但是不好看，感觉有点粗糙,下面对代码进行美化.
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
title无标题页/title
style type ="text/css"
a
{
text-decoration:none;
}
#nav
{
width:100px;
border:1px solid #ccc;
border-bottom:none;
}
ul
{
list-style:none;
margin:0;
padding:0;
}
ul li
{
background:silver;
padding:0 8px;
height:30px;
border-bottom:1px solid #ccc;
position:relative;
}
ul li ul
{
display:none;
position:absolute;
width:100px;
left:100px;
border-bottom:none;
}
ul li:hover ul
{
display:block;
}
/style
/head
body
div id="nav"
ul
li
a href ="#"1/a
ul
lia href="#"11/a
/li
lia href="#"11/a
/li
/ul
/li
lia href ="#"2/a
ul
lia href="#"22/a
/li
lia href=""22/a/li
/ul/li
lia href=""3/a
ul
lia href=""33/a/li
lia href=""33/a/li
lia href=""33/a/li
/ul
/li
lia href=""4/a
ul
lia href=""44/a/li
lia href=""44/a/li
lia href=""44/a/li
/ul
/li
/ul
/div
/body
/html
所谓的美化,无非就是一个高度,背景颜色等进行设置.这样就得到了可以使用的菜单.
先在网站的head模板添加二级菜单的html代码，如下
添加之后前台就可以显示二级菜单，但会出现乱码，然后找到相应的css文件，在/*nav*/部分，加入以下代码，具体风格可以自己改，
.navulliul{position:absolute;display:none;}
.navulliulli{float:none;}
.navulliullia{border-right:none;border-top:0pxdottedccc;background:00000000;font-size:15px;color:fff;}
.navulliulli.nava{color:FFFFFF;display:inline-block;padding:012px;height:44px;line-height:40px;font-size:18px;color:fff;margin-left:5px;font-family:Arial,"宋体";}
.navulli:hoverul{display:block;}
首先，这种效果是html的select标签实现的，其实php要做的就是将数据按照一定的格式组织好，然后按照一定的规则输出即可。
下面是大致的示例代码。
// 首先根据你现有的数据对其按照一定的格式组织
$brands = array(
'东风本田' = array('艾力绅','本田CR-V',...),
'广汽本田' = array(...),
...
);
// 输出HTML标签
echo 'select name="brands" size="1"';
echo 'option value=""请选择车系/option';
foreach ($brands as $brand = $items) {
echo 'optgroup label="',$brand,'"';
foreach ($items as $item) {
echo 'option value="',$item,'"',$item,'/option';
}
echo '/optgroup';
}
echo '/select';
