水平导航条怎么写啊？

dropline-水平三级横向弹出菜单/* common styling */.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;}.menu ul {padding:0; margin:0; list-style-type: none;}.menu ul li {float:left; border-left:1px solid #eee; width:106px;}.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}.menu ul li ul {display: none;}/* specific to non IE browsers */.menu ul li:hover a {color:#fff; background:#b3ab79;}.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}.menu ul li:hover ul li ul {display: none;}.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}.menu ul li:hover ul.right li {float:right;}.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}table {border-collapse:collapse; margin:0; padding:0;}.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}.menu ul li a:hover ul li a.hide {display:none;}.menu ul li a, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;}.menu ul li a:hover {color:#fff; background:#b3ab79;}.menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}.menu ul li a:hover ul.left_side li {float:left;}.menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;}.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}.menu ul li a:hover ul li a ul {visibility:hidden;}.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}DEMOSDEMOS zero dollars wrapping text styled form active focus HOVER/CLICK HOVER/CLICK styled form active focus hover/click shadow boxing image map MENUSMENUS spies menu vertical menu enlarging list link images non-rectangular jigsaw links circular links LAYOUTSLAYOUTS Fixed 1 Fixed 2 Fixed 3 Fixed 4 minimum width BOXESBOXES spies menu vertical menu enlarging list link images non-rectangular jigsaw links circular links MOZILLAMOZILLA drop down menu cascading menu content: mozzie box rainbow box snooker cue target practise EXPLOREREXPLORER example one weft fonts vertical align OPACITYOPACITY opaque colours opaque menu partial opacity partial opacity II HOVER/CLICK HOVER/CLICK styled form active focus hover/click

*{ margin:0;padding:0;}li{ list-style:none;}a{ text-decoration:none;}.nav{ width:752px; margin:0 auto;}.nav li{ float:left; padding:8px 80px; background-color:blue;}.nav a{ color:white; font:"微软雅黑"; font-size:14px;}.clearfix:after{ content:"."; display:block; visibility:hidden; height:0; clear:both; } 首页 新闻 联系 关于 正好有个案例，您可以借着参考一下，如果有不懂可以随时追问哦！希望可以帮到您 OvO

/* ul li以横排显示 *//* 所有class为menu的div中的ul样式 */div.menu ul{ list-style:none; /* 去掉ul前面的符号 */ margin: 0px; /* 与外界元素的距离为0 */ padding: 0px; /* 与内部元素的距离为0 */ width: auto; /* 宽度根据元素内容调整 */}/* 所有class为menu的div中的ul中的li样式 */div.menu ul li{ float:left; /* 向左漂移，将竖排变为横排 */}/* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */div.menu ul li a, div.menu ul li a:visited{ background-color: #465c71; /* 背景色 */ border: 1px #4e667d solid; /* 边框 */ color: #dde4ec; /* 文字颜色 */ display: block; /* 此元素将显示为块级元素，此元素前后会带有换行符 */ line-height: 1.35em; /* 行高 */ padding: 4px 20px; /* 内部填充的距离 */ text-decoration: none; /* 不显示超链接下划线 */ white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 标签为止。 */} 主页 主页 主页 主页

如何实现a元素的垂直居中？ 2个办法。 第一个设置a元素的上下内边距一样。你的CSS仅设置了 padding-top:20px;是不行的。 第二个是设置a元素的行高，line-height，把行高设置为需要垂直居中对齐的元素的高度，但是垂直居中的内容不能换行。

总结

以上是生活随笔为你收集整理的水平导航条怎么写啊？的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。