css三级导航菜单透明度不统一，求大神指教！

zhaobeixtd 2012-11-17 11:03:01
<!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 { solid:#CCC; height:26px;background: #eee;filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; padding: 0px 8px; height: 26px; line-height: 26px;}
#menu ul li ul { solid:#ccc;position:absolute;;}
#menu ul li ul li { float:none; width:85px;background:#eee; margin:0;height: 26px; line-height: 26px;filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#333; color:#fff;}
#menu ul li ul li{ display:none;solid:#ccc;height: 26px; line-height: 26px;}
#menu ul li:hover ul li{ display:block;}

#menu ul li ul li ul{ display:none; position: relative; left: 93px; top:-26px; width:100px; border-bottom:none; background:#eee;}
#menu ul li ul li:hover ul{ display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="current" href="#">首页</a></li>
<li><a href="#">学科辅导</a>
<ul>
<li><a href="#">小学辅导</a>
<ul>
<li><a href="#">个性1对1</a></li>
<li><a href="#">精品小班</a></li>
<li><a href="#">乐学中班</a></li>
</ul>
</li>
<li><a href="#">初中辅导</a>
<ul>
<li><a href="#">个性2对2</a></li>
<li><a href="#">精品小班</a></li>
<li><a href="#">乐学中班</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">艺术培训</a>
<ul>
<li><a href="#">小小书法家</a></li>
<li><a href="#">我是小画家</a></li>
</ul>
</li>
<li><a href="#">特色课程</a>
<ul>
<li><a href="#">作文辅导班</a></li>
<li><a href="#">托管班</a></li>
<li><a href="#">幼小衔接</a></li>
<li><a href="#">小升初</a></li>
<li><a href="#">初升高</a></li>
<li><a href="#">会员专享</a>
<ul>
<li><a href="#">学力测评</a></li>
<li><a href="#">心理咨询</a></li>
<li><a href="#">公益讲座</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">新闻动态</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">一支笔论坛</a></li>
<li><a href="#">信息管理</a></li>
</ul>
</div>
</body>
</html>
...全文
231 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
Go 旅城通票 2012-11-20
  • 打赏
  • 举报
 回复 
body { font-family: Verdana; font-size: 12px; line-height: 1.5;background:#000}
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { solid:#CCC; height:26px;background: #eee;filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; padding: 0px 8px; height: 26px; line-height: 26px;}
#menu ul li ul { solid:#ccc;position:absolute;;}
#menu ul li ul li { float:none; width:85px;background:#eee;  margin:0;height: 26px; line-height: 26px;}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#333; color:#fff;}
#menu ul li ul li{ display:none;solid:#ccc;height: 26px; line-height: 26px;}
#menu ul li:hover ul li{ display:block;}
 
#menu ul li ul li ul{ display:none; position: relative; left: 93px; top:-26px; width:100px; border-bottom:none; background:#eee;}
#menu ul li ul li:hover ul{ display:block;}

#menu ul ul{background: #eee;filter:alpha(opacity=50);}/*IE多增加这句就行了，IE没有继承到#menu的透明*/
Anar0821 2012-11-20
  • 打赏
  • 举报
 回复
^_^ 周末没开电脑哈哈， 我在chrome opera和firefox上看好像都没问题 可能是IE的问题- - 我这没有IE 你把我说的那项透明度改成1试试呢？
zhaobeixtd 2012-11-20
  • 打赏
  • 举报
 回复
感谢厉害
zhaobeixtd 2012-11-18
  • 打赏
  • 举报
 回复
zhaobeixtd 2012-11-18
  • 打赏
  • 举报
 回复
大神 如果按你说的 我第二层和第三层都没有设置透明度了，怎么解决啊
<!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 { solid:#CCC; height:26px;background: #eee;filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; padding: 0px 8px; height: 26px; line-height: 26px;}
#menu ul li ul { solid:#ccc;position:absolute;;}
#menu ul li ul li { float:none; width:85px;background:#eee;  margin:0;height: 26px; line-height: 26px;}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#333; color:#fff;}
#menu ul li ul li{ display:none;solid:#ccc;height: 26px; line-height: 26px;}
#menu ul li:hover ul li{ display:block;}

#menu ul li ul li ul{ display:none; position: relative; left: 93px; top:-26px; width:100px; border-bottom:none; background:#eee;}
#menu ul li ul li:hover ul{ display:block;}
</style>
</head>
<body>
<div id="menu">
	<ul>
		<li><a id="current" href="#">首页</a></li>
		<li><a href="#">学科辅导</a>
			<ul>
				<li><a href="#">小学辅导</a>
					<ul>
						<li><a href="#">个性1对1</a></li>
						<li><a href="#">精品小班</a></li>
                        			<li><a href="#">乐学中班</a></li>
					</ul>
				</li>
				<li><a href="#">初中辅导</a>
                    <ul>
                        <li><a href="#">个性2对2</a></li>
                        <li><a href="#">精品小班</a></li>
                        <li><a href="#">乐学中班</a></li>
                    </ul>
                </li>
			</ul>
		</li>
		<li><a href="#">艺术培训</a>
			<ul>
				<li><a href="#">小小书法家</a></li>
				<li><a href="#">我是小画家</a></li>
			</ul>
		</li>
		<li><a href="#">特色课程</a>
            <ul>
                <li><a href="#">作文辅导班</a></li>
                <li><a href="#">托管班</a></li>
                <li><a href="#">幼小衔接</a></li>
                <li><a href="#">小升初</a></li>
                <li><a href="#">初升高</a></li>
                <li><a href="#">会员专享</a>
                    <ul>
                        <li><a href="#">学力测评</a></li>
                        <li><a href="#">心理咨询</a></li>
                        <li><a href="#">公益讲座</a></li>
                    </ul>
                </li>
            </ul>
        </li>
		<li><a href="#">新闻动态</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">一支笔论坛</a></li>
        <li><a href="#">信息管理</a></li>
</ul>
</div>
</body>
</html>
Anar0821 2012-11-18
  • 打赏
  • 举报
 回复
难道不能把你的代码放到代码块里么？ 这么贴出来怎么读 楼主， opacity属性是会继承的 所以 

#menu ul li ul li { float:none; width:85px;background:#eee;  margin:0;height: 26px; line-height: 26px;filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5}
应该改成 

#menu ul li ul li { float:none; width:85px;background:#eee;  margin:0;height: 26px; line-height: 26px;}
zhaobeixtd 2012-11-17
  • 打赏
  • 举报
 回复

第三层永远都是低一个色度，请问怎么解决呢？很急。。
用CSS动画制作一个正方体
CSS技术很强大，不仅仅是可以调色啊，调位置啊。 更重要的是，我们可以直接利用CSS来制作一些色彩缤纷的几何图形，同时我们还可以用神奇的代码，让这些图形自己动起来，然我们即便不能走进屏幕里的世界，也可以轻松...
web实践小项目<一>:简单日程管理系统（涉及html/css，javascript，python，sql，日期处理）...
借第一版完成之际，希望能将实践期间犯过的错误和获得的新知进行整理，希望能给其他初学者提供参考，也希望有大神在浏览我粗糙的开发过程中能指出一些意见或建议。 （阅读以下内容需要有一定的html/css，javascript...
css3_day02
css3_day02 1.使div居中 只需以下代码即可： position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width: 值 ; //必须指定宽、高，这个居中才能生效 height: 值 ; background: pink ; ...
纯JS实现可拖拽表单
思路：放入：用mousedown判断鼠标点击的位置是否在触发控件的位置，如果是，mousemove的时候clone一个控件，修改透明度，然后放入容器内的时候remove这个控件，并且在容器内生成一个放入的控件（放入的...
翻转动画效果
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容： 1、规定您希望把效果添加到哪个 CSS 属性上 2、规定效果的时长 接下来，您将会学到 2D 转换方法，本文中我用到translate() ...
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章