求解释,在线等待,come on!!!!

cccc44443000 2012-01-11 06:25:52

十天学会web标准(div+css)》中的第八天"下拉及多级弹出菜单"里面的一、带下拉子菜单的导航菜单里面的这句话
"看下“自适应宽度”和“固定宽度”两个二级菜单也继承了一级菜单的背景和横向排列"
我很不理解,为什么两个二级菜单会继承一级菜单的背景和横向排列??
为什么div里面套div,里面的div不会继承头个div的属性??
是只有ul li才这样还是我的理解不正确呢?
救解释!!
附所说的课程的网页地址:http://www.aa25.cn/div_css/909.shtml

...全文

103 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

cccc44443000 2012-01-11

打赏
举报

谢谢,有点理解了,我再多看几次

ddcatlee 2012-01-11

打赏
举报

http://www.ddcat.net/blog/?p=218

包含选择器

cccc44443000 2012-01-11

打赏
举报

#menu ul li的理解不是说id值menu里面的ul里面的li吗?这样理解不正确?

cccc44443000 2012-01-11

打赏
举报

不好意思,能详细点说下吧,我现在就是卡在这里想不通阿

ddcatlee 2012-01-11

打赏
举报

你定义了#menu ul li，那么#menu里面所有的ul内的li都适用，也就是说ul里面套的ul里的li也适用，这不是继承。
请自己去看关于选择器的扫盲贴。

cccc44443000 2012-01-11

打赏
举报

汗~~上面的代码发欠了些,但是现在csdn不然重新编辑,只好重发了,见谅阿,各位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

a { color: #000; text-decoration: none; }

a:hover { color: #F00; }

#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}

#menu ul { list-style: none; margin: 0px; padding: 0px; }

#menu ul li { float:left; margin-left:2px;}

#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -28px no-repeat; font-size:14px;}

#menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -56px no-repeat;}

#menu ul li a#current { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}

</style>

</head>

<body>

<div id="menu">

<ul>

<li><a id="current" href="#">首页</a></li>

<li><a href="#">网页版式</a>

<ul>

<li><a href="#">自适应宽度</a></li>

<li><a href="#">固定宽度</a></li>

</ul>

</li>

<li><a href="#">web教程</a>

<ul>

<li><a href="#">新手入门</a></li>

<li><a href="#">视频教程</a></li>

<li><a href="#">常见问题</a></li>

</ul>

</li>

<li><a href="#">web实例</a></li>

<li><a href="#">常用代码</a></li>

</ul>

</div>

</body>

</html>

cccc44443000 2012-01-11

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

a { color: #000; text-decoration: none; }

a:hover { color: #F00; }

#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}

#menu ul { list-style: none; margin: 0px; padding: 0px; }

#menu ul li { float:left; margin-left:2px;}

#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -28px no-repeat; font-size:14px;}

#menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -56px no-repeat;}

#menu ul li a#current { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}

</style>

</head>

<body>

<div id="menu">

<ul>

<li><a id="current" href="#">首页</a></li>

<li><a href="#">网页版式</a></li>

<li><a href="#">web教程</a></li>

<li><a href="#">web实例</a></li>

<li><a href="#">常用代码</a></li>

</ul>

</div>

</body>

</html>