这里有一个js的多级联动下拉菜单 可以自定义位置和样式 比较实用 里面有教程和源码
首先要建立一个div,为其命名为“nav”,在div中建立一个无序列表,导航共有几个栏目,就为列表添加几个的列表项,为每个列表项中的内容加上超链接,链接到所需的项目页面.然后设置css样式,为列表规定宽度和高度,去掉列表前面的符号,代码为:ul {width:宽度值;height:高度值; list-style:none;} 如果是横向导航,还需为里面的列表项标签设置左浮动的样式,代码为:li {float:left;} 每个栏目之间分隔的距离可通过margin(外边距)属性来设置.
需要写css,让li浮动或者是变成内联元素,写在style.css里面. 第一种写法: li{display:inline-block;} 第二种写法: li{float:left;}
将ul里面的li标签都设置为右浮动即可.如:<ul style=＂overflow:hidden; display:block＂> <li class=＂float:right; padding:10px;>项目1</li> <li class=＂float:right; padding:10px;>项目1</li> <li class=＂float:right; padding:10px;>项目1</li> <li class=＂float:right; padding:10px;>项目1</li></ul>
不用给li加width,直接加个 padding: 0 10px;多好!这样即使菜单字数不一样也能很好的显示~ 此外,使用line-height可以是字在图片垂直方向居中
<!DOCTYPE html PUBLIC ＂-//W3C//DTD XHTML 1.0 Transitional//EN＂ ＂TR/xhtml1/DTD/xhtml1-transitional.dtd＂><html xmlns=＂＂><head><title></title><meta http-equiv=＂Content-Type＂ content=＂text/html; charset=gb2312＂ /><style>#nav
你是不是用ul li制作的导航栏啊.这样的话加入一下代码:ul {list-style:none;} li{display:inline; margin:0px; }
用ul和li做导航栏,使二级菜单横向主要使用JS实现触发事件,CSS控制样式显示.无标题文档css 里面有一个 visibility: hidden 来隐藏,但它会占据位置就有一个空白,换 display: none; 就可以彻底隐藏.当我们的鼠标移上去后,我们把它的 display: 改成空的,让它恢复默认值.鼠标悬停是捕获 onmouseover 事件.比如:
在工具的选项里,可以设置不过好像没有纵向的说
你里面是不是还有内嵌标签设置了宽度,你这里是纯文字然后浮动?能看一下源码最好