视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
CSS布局菜单的问题_html/css
2020-11-27 15:47:57 责编:小采
文档


本帖最后由 sen_linzhiwang 于 2012-10-05 12:46:12 编辑

问题描述:
共有三层菜单,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帖出来。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>


  • ">
    style="background-image: url('<%=request.getContextPath()%>/v1/images/sys_.gif');background-repeat: no-repeat;">





    ">

  • onmouseover="openPortalMenu();"
    onmouseout="closePortalMenu()"
    onclick="visitPortalMenu();">
    style="background-image: url('<%=request.getContextPath()%>/v1/images/menu_arrow.gif');background-repeat: no-repeat;background-position: right;">



    ">

  • onclick="visitPortalMenu();">
















  • 这是菜单的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 是怎么用 多看看,嵌套正确了,就对了。

    就你这样的代码 浏览器过不了。

    改代码要人命,在网上搜一个用吧

    下载本文
    显示全文
    专题