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; } 首頁 新聞 聯(lián)系 關于 正好有個案例，您可以借著參考一下，如果有不懂可以隨時追問哦！希望可以幫到您 OvO

/* ul li以橫排顯示 *//* 所有class為menu的div中的ul樣式 */div.menu ul{ list-style:none; /* 去掉ul前面的符號 */ margin: 0px; /* 與外界元素的距離為0 */ padding: 0px; /* 與內(nèi)部元素的距離為0 */ width: auto; /* 寬度根據(jù)元素內(nèi)容調(diào)整 */}/* 所有class為menu的div中的ul中的li樣式 */div.menu ul li{ float:left; /* 向左漂移，將豎排變?yōu)闄M排 */}/* 所有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; /* 內(nèi)部填充的距離 */ text-decoration: none; /* 不顯示超鏈接下劃線 */ white-space: nowrap; /* 對于文本內(nèi)的空白處，不會換行，文本會在在同一行上繼續(xù)，直到遇到 標簽為止。 */} 主頁 主頁 主頁 主頁

如何實現(xiàn)a元素的垂直居中？ 2個辦法。 第一個設置a元素的上下內(nèi)邊距一樣。你的CSS僅設置了 padding-top:20px;是不行的。 第二個是設置a元素的行高，line-height，把行高設置為需要垂直居中對齊的元素的高度，但是垂直居中的內(nèi)容不能換行。

總結

以上是生活随笔為你收集整理的水平导航条怎么写啊？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。