6.0w+
社区成员
我做的一个导航下拉菜单,可是好象定位不够好
我用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代码哪里出了问题?谢谢~~~
[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代码哪里出了问题?谢谢~~~
...全文
当前发帖距今超过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>
<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}
把这行写在样式的第一行
把这行写在样式的第一行
CSS网站布局实录 （第二版）PDF版 《CSS网站布局实录:基于Web标准的网站设计指南(第2版)》内容提要： 本书是一本讲述基于Web标准的应用CSS进行网站布局设计与...感觉不是在看一本真金白银买来的书,而更象是偷看一个江湖上鲜见的手抄本……刺激! ——网友
我在CSDN参与的3000个帖子 2：100分急求，随机输出十个小写字母，但是，要求这十个字母不相同 3：求Sn=a+aa+aaa+…+aaa…a（n个a）之值 4：数组题 望高手帮忙！ 5：呵呵，来推荐一下我的网站，本站提供大量当今流行的免费的音乐和免费电影，...
Eclipse快捷键 10个最有用的快捷键 一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合。通过这些组合可以更加容易的浏览源代码，使得整体的开发效率和质量得到提升。 1. ctrl+shift+r：打开资源 这可能是所有快捷键...
Dreamweaver及网页设计常见问题 365个 还是一些基础知识，对于像我这样的新手们，应该都会有用滴~好的文章就应该被传承！ 1．如何添加图片及链接文字的提示信息？在浏览网页时，鼠标停留在图片对象或链接上，在鼠标的右下方有时会出现一个提示信息框，对...
C#的130个面試題目大全 在網上搜索了一籮筐的C#面試題目,現在整理下,放這裡,希望能對自己對各位看官有所幫助 1. 简述 private、 protected、 public、 internal 修饰符的访问权限。 答 . private : 私有成员, 在类的内部才可以访问。 ...
我与缩略图较上了劲 BlueBee浏览器 ...很偶然的机会，认识了一个的网友（他在微软做IE内核的），从他那里我知道了一种制作缩略图的接口，显示的效果相当漂亮，于是我开始考虑好好地把缩略图搞一搞。 最开始的时候，我就学着IE...
教你一招：全面认识浏览器工具条 一。 什么是工具条 工具条（英文名称为Toolbar），又名工具栏。工具条是什么？...浏览器工具条是浏览器的扩展应用程序，由位于浏览器顶部的连续的一组按钮或其他功能控件组成的一个整体操作区，以帮
Idea JAVA开发工具快速上手-常用快捷键汇总 之前一直使用Eclipse 系列开发IDE工具，由于eclipse是开源的所以，一般情况，eclipse基本上每一个java入门者的首选开发工具，其次 Myeclipse。不过现在越来越多的人使用了 IdeaIntelliJIDEA开发工具。我之前也下载...
myeclipse使用（技术和快捷键） 1.建立一个工程 ----File—new—project---选项含有Javaproject，webproject等等—输入工程名字如myproject，其他可以选择默认—完成 2.创建一个java文件 ---myproject—右键—new---So
新手必看！ IDEA 快捷键和使用技巧！ 今天 上网搜集了一些IDEA的使用技巧...跳转到指定的java文件（其它文件）这个功能很方便，至少我不用每回都在一长串的文件列表里找寻我想要编辑的类文件和jsp文件了 Ctrl + B 跳转到定义处这个就不用多说了，好象是个ID
idea中的常用快捷键（新手必看） 跳转到指定的java文件（其它文件）这个功能很方便，至少我不用每回都在一长串的文件列表里找寻我想要编辑的类文件和jsp文件了 Ctrl + B 跳转到定义处这个就不用多说了，好象是个IDE就会提供的功能 Ctrl + Alt + T
MyEclipse:详细使用教程 无意中发现了一个巨牛的人工智能教程，忍不住分享一下给大家。教程不仅是零基础，通俗易懂，而且非常风趣幽默，像看小说一样！觉得太牛了，所以分享给大家。点这里可以跳转到教程。 第一部分MyEclipse的基本使用 ...
delphi 各版本的特性 Delphi XE6新增了一些特性并增强了原有的功能，主要有以下几个方面： IDE（整合开发环境） Internet XML（扩展标记语言） Compiler（编译器） COM/Active X Database support（数据库支持） CORBA ...
eclipse快捷键 Eclipse中10个最有用的快捷键组合 一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合。通过这些组合可以更加容易的浏览源代码，使得整体的开发效率和质量得到提升。 1. ctrl+shift+r：打开...
delphi 各新版本特性收集 Delphi XE6新增了一些特性并增强了原有的功能，主要有以下几个方面： IDE（整合开发环境） Internet XML（扩展标记语言） Compiler（编译器） COM/Active X Database support（数据库支持） CORBA ...
Blender 3D------One 非常重要去了解如何在Blender里操作，创建，编辑一个对象。这样，我们才能学习的更快，创建更好的可视化的模型。 如果你已经使用过了Blender,那么最好直接跳过本章，进行下一节的学习。 界面 任何软件应用程序
