<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
* { margin:0border:0padding:0list-style:nonelist-style-type:none}
.nav { width:1000pxfloat:left}
.nav li { float:leftwidth:99pxmargin-right:1pxdisplay:inline}
.nav li span { display:blockwidth:99pxheight:30pxline-height:30pxtext-align:centerbackground:#C03cursor:pointer}
.nav li p { top:30pxleft:0width:99pxheight:autodisplay:none}
.nav li p a { display:blockwidth:99pxheight:28pxline-height:28pxtext-align:centermargin-top:1pxbackground:#F03color:#fff}
.nav li:hove span { background:#30F}
.nav li:hover p { display:block}
.nav li p a:hover { background:#36F}
.bga { float:leftbackground:#336width:100%height:100pxcolor:#fff}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#"><span>频道1</span></a>
<p><a href="#">频道1-1</a><a href="#">频道1-2</a><a href="#">频道1-3</a><a href="#">频道1-4</a></p>
</li>
<li><a href="#"><span>频道2</span></a></li>
</ul>
<div class="bga">111</div>
</body>
</html>
上面是用li:hover实现的，下面用JS实际，在网上找了一个JQ的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
* { margin:0border:0padding:0list-style:nonelist-style-type:none}
.nav { width:1000pxfloat:left}
.nav li { float:leftwidth:99pxmargin-right:1pxdisplay:inline}
.nav li span { display:blockwidth:99pxheight:30pxline-height:30pxtext-align:centerbackground:#C03cursor:pointer}
.nav li p { top:30pxleft:0width:99pxheight:autodisplay:none}
.nav li p a { display:blockwidth:99pxheight:28pxline-height:28pxtext-align:centermargin-top:1pxbackground:#F03color:#fff}
.nav li.on span { background:#30F}
.nav li.on p { display:block}
.nav li p a:hover { background:#36F}
.bga { float:leftbackground:#336width:100%height:100pxcolor:#fff}
</style>
<script type="text/javascript" src="http://mat1.gtimg.com/www/asset/lib/jquery/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<ul class="nav">
<li><a href="#"><span>频道1</span></a>
<p><a href="#">频道1-1</a><a href="#">频道1-2</a><a href="#">频道1-3</a><a href="#">频道1-4</a></p>
</li>
<li><a href="#"><span>频道2</span></a></li>
</ul>
<div class="bga">111</div>
<script type="text/javascript">
$('.nav li').each(function(){
$(this).hover(function(){
$(this).addClass('on').siblings().removeClass('on')
})
})
</script>
</body>
</html>
1行3列实现代码
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>景安</title>
<style type="text/css">
.zzidc{width: 500pxheight: 300pxbackground: red}
.a{float: leftwidth: 200pxheight: 300pxbackground: blue}
.b{float: leftwidth: 100pxheight: 300pxbackground: green}
.c{float: leftwidth: 200pxheight: 300pxbackground: gray}
</style>
</head>
<body>
<div class="zzidc">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
</body>
</html>
1列多行实现代码
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>景安</title>
<style type="text/css">
.a{width: 300pxheight: 50pxbackground: blue}
.b{width: 300pxheight: 50pxbackground: green}
.c{width: 300pxheight: 50pxbackground: gray}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
</body>
</html>
实现一行3列的话可以使用浮动布局或者定位，实现一列多行的使用使用默认布局模式即可
1. 在HTML的大部分元素中，标签都是用尖括号括起来的第一个，所以以你的代码为例：
<input type="checkbox" name="chiwhat" id="chiwhat" value="huanggua">黄瓜<br>
input 是标签 br 是标签，input 后面的 type name id value 都是属性，属性后是“=”，
等号后是“ ”，双引号里面的叫属性值。
2. id 就是身份证属性，就像人的身份证号码一样，id=“.... ” 这个属性值必须是唯一的。为什么要个id属性和值，因为HTML有很多元素，例如你的代码，一次出现三个 input ，那么怎么区分它们呢？就是用id属性和值了，你有三个 input 就相当于有三个人都叫 张三，如果第一个张三有个唯一的身份证号码 12345，第二个张三有个唯一的身份证号码 12346，第三个张三有个唯一的身份证号码12347.那么我说：找12346. 那么找的就是第二个张三。三个input都有id属性和值，那么就能找到对应的 input而不是其它的input。找到对应唯一的input，就能对这个input进行修改：在CSS中改变颜色，大小，位置等等，也能在javascript中对这个input进行其他操作。
如果HTML中多个标签的id属性的值都是相同的，那么会把id当成class对待，CSS中选择器会一次选择多个元素，然后对它们都修改。
因为id属性和值是唯一的，所以你的代码三个id都一样，那是错误的写法。正确的写法是：
<p><input type="checkbox" name="chiwhat" id="chiwhat1" value="huanggua">黄瓜<br>
<input type="checkbox" name="chiwhat" id="chiwhat2" value="egg">鸡蛋<br>
<input type="checkbox" name="chiwhat" id="chiwhat3" value="miantiao">面条<br>
</p>
以上代码的<br>是百度没有显示出来，不是删除了。
3. name代表的input的名字，用name这个属性和值目的是：一次找到都叫这个名字的input。相当于一大群人中，有三个人叫 张三，5个人叫 李四，2个人叫王五。我叫：张三出来。 那么就能够一次叫出三个人，这三个人都叫张三。你的代码中有三个input的 name="chiwhat" ，那么在javascript中，用这个name="chiwhat"，就能一次对这三个名叫 chiwhat 的input进行操作。用name="chiwhat" 主要是为了在javascript中操作方便。
在CSS中一般用class来代替，那就能一次对多个元素进行修改。javascript中也能使用class，但是有些浏览器不兼容，所以要用class就需要写更多的代码，用name属性更容易。
