css动态导航（css 导航）
本文目录一览：
求一个关于导航树的css实例
CSS代码style type="text/css"
body { font-family:verdana; }
h3 a { color:#000;}
#content { float:left; width:400px; border:1px solid #ccc;
margin-left:20px; padding:2px 10px 10px 10px; }
ul { margin:0; padding:0; list-style: none;
width:200px;float:left; }
ul li { margin:0 0 1px 0; padding:0; }
ul li a {
display:block;
padding:8px;
text-decoration:none;
background: #eee;
color: #039;
}
ul li a:hover {
background: #ffc;
}
ul li a.selected {
background: #c63;
color:#fff;
}
#content div { display:none; }
#content div.on { display:block; }
/style
JavaScript代码script type="text/javascript"
function applySelectedTo(link) {
var ul = document.getElementsByTagName("ul")[0];
var allLinks = ul.getElementsByTagName("a");
for (var i=0; iallLinks.length; i++) {
allLinks[i].className = "";
}
link.className = "selected";
var allDivs = document.getElementsByTagName("div");
for (var k=0; kallDivs.length; k++) {
allDivs[k].className = "";
}
var lyricId = link.getAttribute("href").split("#")[1];
lyricId = document.getElementById(lyricId);
lyricId.className = "on";
}
/script
HTML代码h1利用CSS和JavaScript实现的动态导航效果/h1
ul
lia onclick="applySelectedTo(this);return false;"
href="#heartbreakHotel"DIV+CSS模板/a/li
lia onclick="applySelectedTo(this);return false;"
href="#blueSuedeShoes"后台模板/a/li
lia onclick="applySelectedTo(this);return false;"
href="#houndDog" class="5ba5-be2f-92ce-c2d5 selected"图片图标/a/li
lia onclick="applySelectedTo(this);return false;"
href="#dontBeCruel"CSS代码/a/li
lia onclick="applySelectedTo(this);return false;"
href="#teddyBear"CSS菜单/a/li
/ul
div id="content"
div id="heartbreakHotel"
h2DIV+CSS模板/h2
/div
div id="blueSuedeShoes"
h2后台模板/h2
/div
div class="be2f-92ce-c2d5-460f on" id="houndDog"
h2图片图标/h2
/div
div id="dontBeCruel"
h2CSS代码/h2
/div
div id="teddyBear"
h2CSS菜单/h2
/div
/div
问题：css制作动态导航栏菜单如果在文字太多会撑大， 怎么办？怎么设置css，请大家教我。
在相应的css中这样设置：
white-space:nowrap 这个表示禁止换行。
overflow:hidden 这个表示隐藏益处部分··
祝你成功~
举例：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titleUntitled Document/title
/head
body
div style="; font-size:12px; color:#FFF;width:60px; height:20px; background:#00F; white-space:nowrap; overflow:hidden"演示菜单演示菜单演示菜单演示菜单演示菜单演示菜单/div
/body
/html
求助··CSS3鼠标滑动特效/CSS动态导航
可以使用:hover这个伪类选择器，当鼠标移动到带有这个伪类的元素之后变更样式，比如a:hover{color:red;} 鼠标移动到A元素上时，文字变为红色，如果无效不要质疑，可以加入！important ，即a:hover{color:red ！important;},希望你能举一反三，hover出各种效果
