我做的一个导航下拉菜单,可是好象定位不够好

Lisen_1987 2008-03-25 04:16:33
我用CSS做的导航菜单,下面是我的样式和代码
[CSS]
.m_layout
{
width:612px;
height:22px;
background:#666666;
text-align:center;
list-style:none;
}

.f_layout
{
float:left;
width:153px;
height:22px;
color:#CCCCCC;
text-align:center;

}

.ff_layout
{
display:none;
width:153px;
height:218px;
background:#CCCCCC;
text-align:center;
}

.f_layout:hover .ff_layout
{
display:block;
}

[CSS]

这里是HTML代码:
<!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" />
<title>无标题文档</title>
<link href="lay.css" rel="stylesheet" type="text/css" />
</head>

<body>

<ul class="m_layout">

<li class="f_layout">HOME
<ul class="ff_layout">Please Press The HOME Button</ul>
</li>

<li class="f_layout">NAME
<ul class="ff_layout">Please Press The NAME Button</ul>
</li>

<li class="f_layout">ABOUT
<ul class="ff_layout">Please Press The ABOUT Button</ul>
</li>

<li class="f_layout">EPAGE
<ul class="ff_layout">Please Press The EPAGE Button</ul>
</li>
</ul>

</body>
</html>


出现的效果很奇怪,没有办法让二级菜单与一级菜单垂直对齐,总是会向右推进一些,到底CSS代码哪里出了问题?谢谢~~~
...全文
85 3 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
Lisen_1987 2008-03-25
  • 打赏
  • 举报
回复
解决了,太感谢了~~~2楼的答案跟我后来发现的问题一样
startdream 2008-03-25
  • 打赏
  • 举报
回复
<!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" />
<title>无标题文档 </title>
<style type="text/css">
.m_layout
{
width:612px;
height:22px;
background:#666666;
text-align:center;
list-style:none;
}

.f_layout
{
float:left;
width:153px;
height:22px;
color:#CCCCCC;
text-align:center;

}

.ff_layout
{
display:none;
width:153px;
height:218px;
background:#CCCCCC;
text-align:left;
margin-left:0px;
}

.f_layout:hover .ff_layout
{
display:block;
}

</style>
</head>

<body>

<ul class="m_layout">

<li class="f_layout">HOME
<ul class="ff_layout">Please Press The HOME Button </ul>
</li>

<li class="f_layout">NAME
<ul class="ff_layout">Please Press The NAME Button </ul>
</li>

<li class="f_layout">ABOUT
<ul class="ff_layout">Please Press The ABOUT Button </ul>
</li>

<li class="f_layout">EPAGE
<ul class="ff_layout">Please Press The EPAGE Button </ul>
</li>

</ul>

</body>
</html>
footya 2008-03-25
  • 打赏
  • 举报
回复
ul,li{margin:0;padding:0;border:0}
把这行写在样式的第一行

61,129

社区成员

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

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