本文目录
- css竖排二级导航菜单（非横排下拉）
- CSS+DIV 二级导航菜单
- css二级导航菜单一直无法居中显示
- 纯css编写的二级导航菜单问题
- 高手求助！！css二级导航菜单急！！！急！！！急！！！
- 为什么css做的二级导航，当鼠标停留在一级上时候，二级菜单正常显示当鼠标移动到二级菜单，
- css中ul下的li下的用ul写的二级菜单为什么下不来，并和li并列了，二级菜单的css代码是怎么
- 纯css制作二级导航菜单时鼠标离开一级菜单后二级菜单会立即消失，请问这是怎么回事
css竖排二级导航菜单（非横排下拉）
这是我拿网络上的一个纯CSS菜单样式修改的竖排样式，你可以拿去参考和再次修改。
希望能帮到你。
下面是效果图，左侧是未展开的，右侧是展开的效果。
CSS+DIV 二级导航菜单
这个很简单啊，
《div id=“title“》
《ul》
《li》《a href=“#“》首页《/a》《/li》
《li》
《a href=“#“》衬衫《/a》
《ul》
《li》《a href=“#“》长袖衬衫《/a》《/li》
《li》《a href=“#“》短袖衬衫《/a》《/li》
《li》《a href=“#“》无袖衬衫《/a》《/li》
《/ul》
《/li》
《li》
《a href=“#“》裤子《/a》
《ul》
《li》《a href=“#“》休闲裤《/a》《/li》
《li》《a href=“#“》卡其裤《/a》《/li》
《li》《a href=“#“》牛仔裤《/a》《/li》
《/ul》
《/li》
《li》《a href=“#“》联系我们《/a》《/li》
《/ul》
《/div》
css
#title{
margin:10px auto;
width:800px;
height:25px;
border:1px solid black;
}
#title ul{
margin:5px;
}
#title ul li{
float:left;
margin-right:14px;
position:relative;
z-index:100;
}
#title ul li a{
display:block;
padding:0 8px;
background-color:white;
font-weight:700;
}
#title ul li a:hover{
background:none;
color:white;
}
#title ul li ul{
margin:0px;
background-color:white;
position:absolute;
width:70px;
display:none;
}
#title ul li:hover ul{
margin:0px;
background-color:white;
position:absolute;
width:70px;
display:block;
}
#title ul li ul li{
background-color:#88c366;
border-bottom:1px solid #bbb;
text-align:left;
width:100%;
}
css二级导航菜单一直无法居中显示
加两句样式
.nav ul li ul {left:-30%;}
.nav ul li {position:relative;}
另外强烈不建议这么疯狂嵌套着写样式，这要跟同事合作的话不得把同事嵌套哭了？
纯css编写的二级导航菜单问题
你好
看了下你的代码发现你是用a用的导航，这样当然会出现如果不在a上面就会隐藏二级菜单了，而且你的是a里面套a，这样很不好的。
出于HTML标签语义化考虑，一般都是用ul,li来写导航的，我给你个提示，你试着做做。
《ul id=ul1》
《li》
这里是一级导航
《ul id=ul2》
《li》这里是二级导航《/li》
《/ul》
《/li》
《/ul》
其中ul1是整个导航，而li是一级菜单，你让默认的时候ul2是隐藏的，只有滑过li的时候把滑过的那个li里面的ul2显示，当滑出的时候再隐藏ul2，当然你的ul1里的li得设置定位，用relative，然后里面的ul2用绝对定位absolute，就OK了，当然我这里没有设置连接，加个连接跟不加操作是一样的。你可以百度下级连菜单。网上有很多源码吧。
希望可以帮到你！
高手求助！！css二级导航菜单急！！！急！！！急！！！
如果菜单是在iframe里的话，那就没有办法，除非修改菜单。
建议：
1.如果你是做静态页展示，不要使用iframe，多copy几份，改其他部分就可以，需要修改菜单可以在DW里“查找和替换”，批量修改一个文件夹下多个文件。
2.如果你是做动态程序，把菜单单独做一个页面，直接用include调用就行。
3.如果你是做后台的那种管理界面，必须使用iframe的话，建议换个菜单风格，通常在左部的这种菜单都会使用树形菜单，比如“dtree”，或者滑动隐菜单，比如“sdmenu”，这类菜单网上很多，改改就行。
为什么css做的二级导航，当鼠标停留在一级上时候，二级菜单正常显示当鼠标移动到二级菜单，
从你的代码可以看出
display：none为不显示
如果要其显示的话为display：block；当鼠标移动到一级导航li：hover改变display才会显示，也就是移动到li的内容中才能显示，当你移到二级导航中时加上一个relative为相对定位，占元素空间默认为li的一部分，因此显示正常
css中ul下的li下的用ul写的二级菜单为什么下不来，并和li并列了，二级菜单的css代码是怎么
一、二级菜单不下来原因有以下方面：
1、HTML代码各层级嵌套错误；
2、CSS样式控制中没有使用定位属性；
3、定位数值计算错误；
二、正确的解决方案
1、清晰的HTML代码层级，如下：
《ul class=“menu“》
《li class=“nav“》
《a href=“#“》网站首页《/a》
《/li》
《li class=“nav“》
《a href=“#“》产品分类《/a》
《ul class=“subnav“》
《li》《a href=“#“》电脑《/a》《/li》
《li》《a href=“#“》手机《/a》《/li》
《li》《a href=“#“》平板《/a》《/li》
《li》《a href=“#“》显示器《/a》《/li》
《/ul》
《/li》
《/ul》
2、清晰的CSS定位属性，代码如下：
《style type=“text/css“》
ul,li{margin:0px;padding:0px;list-style:none;}
a{color:#fff;text-decoration:none;}
.menu a{display:block;padding:0px 30px;}
.menu a:hover{background:#da2128;}
.menu{float:left;width:60%;line-height:36px;background:#333;white-space:nowrap;}
.menu .nav{float:left;position:relative;border-left:1px solid #FFF;}
.subnav{position:absolute;top:36px;left:0px;background:#666;}
.subnav li{line-height:36px;border-bottom:1px solid #fff;}
《/style》
3、完整的代码结构
《Doctype html》
《html》
《head》
《meta charset=“utf-8“ /》
《title》带二级下拉菜单展示《/title》
《style type=“text/css“》
ul,li{margin:0px;padding:0px;list-style:none;}
a{color:#fff;text-decoration:none;}
.menu a{display:block;padding:0px 30px;}
.menu a:hover{background:#da2128;}
.menu{float:left;width:60%;line-height:36px;background:#333;white-space:nowrap;}
.menu .nav{float:left;position:relative;border-left:1px solid #FFF;}
.subnav{position:absolute;top:36px;left:0px;background:#666;}
.subnav li{line-height:36px;border-bottom:1px solid #fff;}
《/style》
《/head》
《body》
《ul class=“menu“》
《li class=“nav“》
《a href=“#“》网站首页《/a》
《/li》
《li class=“nav“》
《a href=“#“》产品分类《/a》
《ul class=“subnav“》
《li》《a href=“#“》电脑《/a》《/li》
《li》《a href=“#“》手机《/a》《/li》
《li》《a href=“#“》平板《/a》《/li》
《li》《a href=“#“》显示器《/a》《/li》
《/ul》
《/li》
《/ul》
《/body》
《/html》
4、代码展示效果截图
三、代码说明
1、HTML代码中的一级导航li定义了class=“nav“，主要用于区分二级导航的li；
2、CSS代码中一级导航的样式中定义了相对定位（position:relative;），不设定任何位置参数值，主要给子代码定位使用；
3、二级导航的绝对定位（position:absolute;），参考对象为一级导航，因为一级导航已经将属性改为定位方式；
4、代码没有指明高度，但标明了行高，所以在二级导航定位的时候给出了top:36px;left:0px;，目的是为了控制二级导航显示在一级导航的正下方；
5、A标签默认没有宽高，为了显示鼠标经过效果，在这里特意定义了A的属性为display:block;，让其能同父层级一样的宽度和高度。
四、特别提示
1、一级导航的li里面CSS一定要有相对定位，否则二级导航的绝对定位就无法控制；
2、二级导航里给出的绝对定位，是参考一级导航，所以只需要计算一级导航的高度即可；
3、一级导航的class=“nav“，不能不定义，也不能给二级导航，否则就会相互影响。
纯css制作二级导航菜单时鼠标离开一级菜单后二级菜单会立即消失，请问这是怎么回事
纯css？没有吧？还是得用点js的。。。给你提供一个常规的思路，当鼠标在一级菜单上的时候，设定一个定时器，这个定时器是判断鼠标离开一级菜单0.5S后是否移动到二级菜单里边，如果移动到二级菜单里边，取消定时器，二级菜单不消失。。。如果没有进入到二级菜单里边则二级菜单消失。。。。。。以上是多级菜单的常规思路。
