CSS レイアウトの問題 menu_html/css_WEB-ITnose

本帖最后由 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帖出来。

9338af758031507a1955e5122ee71722
1c4a335bf9690ec7ef63bc5ac5f755d4
 c1f69634c284af9ed7eb5b11975a46cf
8b3267ceba4f9a917275570e18eec6f7
bb0a7bf45ee72c1656d94800a1f312b6">
c47d43f853fb58d887cae84dc1fbaf2b/v1/images/sys_dc08f2021bfd393b40ddcbc070488789.gif');background-repeat: no-repeat;">
fb0774adcd9b659684bad149dc5c7d62
8e99a69fbe029cd4e2b854e244eab14398b2848a1372b0ab37255d9d64707dac128dba7a3a77be0113eb0bea6ea0a5d0
16b28748ea4df4d9c2150843fecfba68
5db79b134e9f6b82c0b36e0489ee08ed
355a5ec6cff75c0379d532fc7052e2ad
eaed50f42de557c9bfb8e98e77a53c9f">93b720948340c40a1aea3be149212da8
1eb7c0c25f6f66116d8f7626c99ac2ceonmouseover="openPortalMenu(9844ee7dfe7bb0da395c7e32338a2a77);" 
onmouseout="closePortalMenu(9844ee7dfe7bb0da395c7e32338a2a77)"7c0f78f8501bc52cedefc1e67d0b011e
718f007560b8a94661f33068f7ff9879onclick="visitPortalMenu(22ce8834b2bd449afbd34bde3ffa73ce);"7c0f78f8501bc52cedefc1e67d0b011e>
7383b279a426bca21a51b560ba57dc9fstyle="background-image: url('784ef932070c663c70d86af5e4d3d09c/v1/images/menu_arrow. gif');background-repeat: no-repeat;background-position: right;"7c0f78f8501bc52cedefc1e67d0b011e>
814017b7f1fa144964df365e3f75124d
5db79b134e9f6b82c0b36e0489ee08ed
ca8390c3c5a62746bcc2efc9c31ffed6

ba0509608f2fa062ced726d6875cbf70
6826c5d32518866016cdb520c0b15611onclick="visitPortalMenu(ba6cce9afc3f4ab11bfbb2d237b0daad);"16b4e321402ba250e7eadca25708f007>
280d6902e63098d8a3494133dffa0b82
3f9d6ae3e3e46bbd42ba3e1d4bc6d8bc
5db79b134e9f6b82c0b36e0489ee08ed
bed06894275b65c1ab86501b08a632eb
4de31973d957c63686bc38dc1d182a91
929d1f5ca49e04fdcb27f9465b944689
7c0f78f8501bc52cedefc1e67d0b011e
bed06894275b65c1ab86501b08a632eb
4de31973d957c63686bc38dc1d182a91

929d1f5ca49e04fdcb27f9465b944689
7c0f78f8501bc52cedefc1e67d0b011e
bed06894275b65c1ab86501b08a632eb
4de31973d957c63686bc38dc1d182a91
929d1f5ca49e04fdcb27f9465b944689

これは菜の花の JSP です、菜の花のすべてはデータベースから取得されます。就是说我一做完一网站并及网上去...
对上说的...恩.怎么解决? 次のようなものです。追加のソースコードを参照するため、私たちは送信コードを参照しません。 上は Css 形式です。これは...



その後、もう一度使用して、开源文ファイルを打ちます。 発行在火狐里好好，在家里错位.この很通常...何か么了...因為你用的ul li 再浮動的话就会出现这个兼容问题.因為在火狐 。 谷歌 。 つまり、6 7 中ul li 中浮動 再位置 定位的话、一漂的那一刻就出现異的効果。  自己可试试...我是试过了...所以解用 css hack 来解。
css hack 好简单 ,自己查下就ok ，还有就是後多去谷歌去查..不到动不动就去百度...求采纳....求...


对了，火狐和谷歌 在 ul li 再漂浮 在位置 定位 ,效果是一样的。 这只是我试过...ie 6 的话，只要不是什么大型网站你还不放弃算了....ie 6 好少人用了


求采纳....求...




还要说的是、就你那css样式就看的蛋痛....一般都用クラス选择器。 id 選択择器用の少...一页面就用一个查不多了....就你全是id选择器


自己还有去看他们的物么区别 , クラス 繰り返し使用可能 , id 单独的 .比如 ： 什么学号 。 账户 。 就用id

谢谢楼上の批判は正しく、意図を採用しています。

#test
{
幅:300px;
高さ:300px;
背景色: red9; /* すべて ie*/
背景色: yellow