css - 如何让这个基于 CSS 的水平导航菜单正常工作？

Question

最初，在学习了 Flash 教程之后，我为我的网站设计了这个基于 Flash 的导航菜单。一切顺利，直到我展示示例页面的一些访问者说他们的浏览器 (Internet Explorer) 没有打开菜单，因为他们的系统上没有安装 flash 插件。所以从这些方面考虑，如果我的网站访问者中有更多的人没有在他们的系统上安装 Flash，也许他们也将无法查看菜单!如果无法访问导航菜单，整个网站就会出错。

我遇到了另一个非常好的基于 CSS 的垂直菜单，其工作方式与我的 flash 菜单几乎相同(黑色悬停效果)。这是代码:

<style type="text/css">

#coolmenu{
border: 0px solid black;
width: 178px;
background-color: #FFFFFF;
}

#coolmenu a{
font: bold 13px Tahoma;
padding: 16px;
padding-center: 0px;
display: block;
width: 100%;
color: 3a403c;
text-decoration: none;
border-bottom: 1px solid black;
}

html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}

#coolmenu a:hover{
background-color: red;
color: white;
}

</style>

<div id="coolmenu">
<a href="">ABOUT US<br><small> a brief note on our genesis </small></br></a>
<a href="">CONTENT SECTIONS<br><small> what we publish </small></br></a>
<a href="">EDITORIAL BOARD<br><small> fellow comrades </small></br></a>
<a href="">DOWNLOAD<br><small> our magazine archives </small></br></a>
<a href="">CONTACT US <br><small> mailing address </small></br></a>
</div>

但是如果我想在我的网站中使用那个 CSS 菜单，我需要将它设计成横向的。

我试图改变自己，但惨遭失败:(菜单的宽度需要为 665 px 和高度 48px ...每个 block ，即关于我们、内容、下载等，都需要在 133 像素大小的分区内，每个 block 的右端都有一个颜色为 #616060 的细条。我设法只在第一个街区拥有它，即关于我们但所有其他菜单部分继续垂直放置。

另外，正如您在我的 flash 菜单中看到的那样，01、02、03 到 05(Arial 字体大小 16bold；颜色 #858383)我有不同的字体大小和颜色，文本“关于”有不同的字体大小和颜色US""CONTENT"DOWNLOAD""EDITORIAL BOARD""CONTACT US"(Arial font size 10; color white)

但是在 CSS 中，我无法为数字和文本设置不同的字体大小和颜色。

这是我尝试只对第一个 block ABOUT US 做的:但是正如您所看到的，字体看起来太大了......我没有在其他 block 上尝试过:(

<style type="text/css">

#coolmenu{
width: 665px;
height: 48px;
margin: 0;
padding: 0;
background-color: #CC3300;
text-align: center;

}

#coolmenu a{
padding: 5px;
color: #fff;
font: bold 14px Arial;
padding-center: 0px;
display: block;
width: 133px;
color: #858383;
text-decoration: none;
border-right: 1px solid #616060;
}

html>body #coolmenu a{ /*Non IE rule*/
width: 133px;
}

#coolmenu a:hover{
background-color: black;
color: white;
}

</style>

<div id="coolmenu">
<a href=""><font face="Arial" size="16" color=#858383><b>01</b></font><br><font face="Arial" size="10" color="white">ABOUT US</font></br></a>
<a href="">02<br><small> CONTENT SECTIONS </small></br></a>
<a href="">03<br><small> EDITORIAL BOARD </small></br></a>
<a href="">04<br><small> DOWNLOAD PDF</small></br></a>
<a href="">05<br><small> CONTACT US  </small></br></a>
</div>

所以请指导我，如何使我的 Flash 菜单中的字体样式相似，而这个 CSS 菜单是水平的？提前致谢。

Answer 1

这是你想要的效果吗:http://jsfiddle.net/UmpdH/10/ [最终更新]

基本上，修改你的html，使用无序列表<ul>并用 <li> 包裹每个 anchor , float至 left , 并根据需要设置元素的样式。

HTML:

<ul id="coolmenu">
    <li><a href="http://www.aamaodisha.org"><span><div>01</div>ABOUT US</span></a></li>
    <li><a href="http://www.aamaodisha.org/content.php"><span><div>02</div>CONTENT SECTIONS</span></a></li>
    <li><a href="http://www.aamaodisha.org/editorialboard.php"><span><div>03</div>EDITORIAL BOARD</span></a></li>
    <li><a href="http://www.aamaodisha.org/download.php"><span><div>04</div>DOWNLOAD PDF</span></a></li>
    <li><a href="http://www.aamaodisha.org/contactus.php"><span><div>05</div>CONTACT US</span></a></li>
</ul>​

CSS:

<style type="text/css">

#coolmenu{
width: 670px;
height: 48px;
margin: 0;
padding: 0;
background-color: #CC3300;
text-align: left;
list-style: none;
}

#coolmenu a{
padding: 5px;
color: #fff;
font: bold 10px Arial;
padding-center: 0px;
display: block;
/*width: 133px;*/
text-decoration: none;
}

html>body #coolmenu a{ /*Non IE rule*/
width: 133px;
}

#coolmenu li:hover{
background-color: black;
}

#coolmenu li:hover a {color: white;}

#coolmenu li { width: 118px; height: 48px; padding-left: 15px; float: left; border-right: 1px solid #616060; }
#coolmenu li a span { min-width: 50px; display: inline-block; }

#coolmenu li a div { color: #858383; font: bold 16px Arial; text-align: left; }​

</style>

编辑:上面的菜单与 flash 菜单具有相同的效果，如下所示:http://www.aamaodisha.org/contact.html

编辑:最终更新，文本左对齐，左填充:15px