CSS布局菜单的问题_html/css_WEB-ITnose
共有三层菜单,CSS代码如下:
#levelone {/* 第一层菜单li */ float: right;}#levelone a {/* 第一层菜单li下的a */ width: 70px; height: 70px; padding-left: 2px; padding-right: 2px; display: block; line-height: 20px; border: 0px; margin: 0px; text-align: center; font-size: 15px;}#levelone_value {/* 第一层菜单li下的a中的DIV,用于展示文字,让文字显示在a区域的下方剧中。 */ padding: 0px; border: 0px; margin: 0px; position: relative; top: 50px; text-align: center;}#levelone ul {/* 第二层菜单的ul */ position: relative; padding: 0px; border: 0px; margin: 0px auto; display: none; left: 3px; width:120px; border-top: 1px solid white;}#levelone ul li {/* 第二层菜单的ul下的li */ float: none; display: inline;}#levelone ul li a {/* 第二层菜单的ul下的li中的a */ width: 120px; height: 15px; position: relative; left: 0px; background: #A9C251; color: #24313C;}#levelone ul li ul {/* 第三层菜单 */ position: relative; padding: 0px; border: 0px; margin: 0px; display: none; left: 120px; top: 0px; /* width: 120px; */}#levelone ul li ul li {/* 第三层菜单 */ float: none; display: inline;}#levelone ul li ul li a {/* 第三层菜单 */ width: 120px; height: 15px; background: #A9C251; color: #24313C;}
问题:1、当第二层菜单的宽度超过第一层的宽度时,第一层菜单会向左移动,直到能显示第二层菜单的所有内容为止。如何设置第一层菜单,让第二层菜单超过第一层菜单时,第一层菜单不移动?
2、当第二层菜单设置了宽度时,并且设置第三层菜单显示在第二层菜单的最右边时,在FF中看上去没有什么问题,但是在IE中,超过第二层宽度的问题不会显示出来。如果设置第二层的宽度为auto,那显示的时候,第一层菜单移动弧度更大。如何在设置第二层菜单宽度的情况下,使第三层菜单能够全部显示出来?
谢谢!
如果我没有把问题描述清楚,请说出来。
再次谢谢!
回复讨论(解决方案)
更正第二个问题中的两个字:
但是在IE中,超过第二层宽度的问题(问题 改为:部分)不会显示出来。
没有高手来指点一二吗?求高手!
求高手!!!!
楼主可以上网搜索下三级导航条菜单,看下人家怎么写的,可能就会知道自己错在哪里了。
可以把代码发全吗??
可以把代码发全吗??
你已经帮我解决好几个问题了,谢谢你!
我现在在公司,不在家。我晚上回去了把生成菜单的代码jsp帖出来。
- ">
style="background-image: url('/v1/images/sys_.gif');background-repeat: no-repeat;">
- onmouseover="openPortalMenu(
);"
onmouseout="closePortalMenu()" onclick="visitPortalMenu( >);"
style="background-image: url('/v1/images/menu_arrow.gif');background-repeat: no-repeat;background-position: right;"> >- onclick="visitPortalMenu(
);"
- onmouseover="openPortalMenu(
这是菜单的JSP,菜单项都是从数据库中取得的。请各位帮看看,谢谢!
我是在公司里面做网站的...公司就我一个人做网站...也就是说我一个做完一个网站并且传到网上去...
对于你以上说的...恩.怎么解决? 这样吧: 我没怎么看你代码,因为想看到另外的源代码。上面就Css样式。
先不说兼容问题,就你说什么错位偏移什么的。先在火狐浏览器里面调好。 这应该没什么问题吧....
然后再用ie打开源文件. 发现在火狐里好好的,在ie里错位.这很正常..为什么了..因为你用的ul li 再float 的话就会出现这个兼容问题.因为在火狐 . 谷歌 . ie 6 7 中ul li 中float 再position 定位的话 ,一漂浮的那一刻就出现不同的效果. 自己可以试试...我是试过了...所以解决用 css hack 来解决.
css hack 好简单 ,自己查下就ok ,还有就是以后多去谷歌去查..不到动不动就去百度...求采纳.....求...
对了,火狐和谷歌 在 ul li 再漂浮 在position 定位 ,效果是一样的. 这只是我试过... ie 6 的话,只要不是什么大型的网站你还不放弃算了....ie 6 好少人用了
求采纳.....求...
还要说的是, 就你那css 样式就看的蛋疼....一般都用 class 选择器 . id 选择器用的少...一个页面就用一俩个查不多了....就你全是id选择器
自己还有去看看他们的什么区别 , class 可以重复用的 , id 单独的 ..比如 : 什么学号 . 账户 . 就用id
谢谢楼上的批评指正,采集你的意见。
#test
{
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow\0; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/
}
fire fox 和 谷歌什么都不要加 ,
全部的 ie 后面加个\9
ie 6 和7 的区别 + 和-
上面是css hack
楼主的,css 用的很烂,在网上搜一下 三级导航。就知道。
层次管理,div ul li a 是怎么用 多看看,嵌套正确了,就对了。
就你这样的代码 浏览器过不了。
改代码要人命,在网上搜一个用吧
推荐阅读
-
html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?
-
使用HTML+CSS+JS制作简单的网页菜单界面
-
关于老式浏览器兼容HTML5和CSS3的问题
-
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
-
HTML5实例之CSS3制作的三级下拉菜单(代码)
-
工作中遇到的HTML和CSS布局和JavaScript技巧记录分享
-
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
-
HTML+CSS3+JS 实现的下拉菜单
-
详解关于html,css,js三者的加载顺序问题
-
12个HTML和CSS必须知道的重点难点问题