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

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

css

如何让这个基于CSS的水平导航菜单正常工作？,css,Css,最初，我为我的网站设计了这个基于flash的导航菜单，在经历了flash教程之后。一切都很顺利，直到我展示示例页面的一些访问者说他们的浏览器（Internet Explorer）没有打开菜单，因为他们的系统上没有安装flash插件。因此，如果我的网站访问者中有更多的人没有在他们的系统上安装flash，那么他们可能也无法查看菜单！如果导航菜单无法访问，整个网站都会出错我遇到了另一个非常好的基于CSS但垂直的菜单，其工作方式与我的flash菜单（黑色悬停效果）几乎相同。代码如下： <st

最初，我为我的网站设计了这个基于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>


#酷菜单{
边框：0px纯黑；
宽度：178px；
背景色：#FFFFFF；
}
#酷菜单{
字体：粗体13px塔荷马；
填充：16px；
填充中心：0px；
显示：块；
宽度：100%；
颜色：3A003C；
文字装饰：无；
边框底部：1px纯黑；
}
html>body#coolmenu a{/*非IE规则*/
宽度：自动；
}
#酷菜单a：悬停{
背景色：红色；
颜色：白色；
}

但是如果我想在我的网站上使用CSS菜单，我需要让它水平设计

我试图改变自己，但惨遭失败：( 菜单的宽度需要是665像素，高度需要是48像素。。。每个区块，即关于我们、内容、下载等，需要在133px大小的分区内，在每个区块的右端有一条薄薄的颜色条#616060。我设法只在第一个区块，即关于我们但所有其他菜单分区仍然垂直放置

你也可以在我的flash菜单中看到，我在01、02、03到05之间有不同的字体大小和颜色（Arial字体大小16bold；颜色#858383），在文本“关于我们”内容“下载”“编辑委员会”“联系我们”中有不同的字体大小和颜色（Arial字体大小10；白色）

但在CSS中，我无法获得数字和文本的不同字体大小和颜色

这是我在第一个街区尝试做的：但正如你所看到的，字体看起来太大了……我没有在其他块上尝试：(


#酷菜单{
宽度：665px；
高度：48px；
保证金：0；
填充：0；
背景色：#CC3300；
文本对齐：居中；
}
#酷菜单{
填充物：5px；
颜色：#fff；
字体：粗体14px Arial；
填充中心：0px；
显示：块；
宽度：133px；
颜色：#858383；
文字装饰：无；
右边框：1px实心#616060；
}
html>body#coolmenu a{/*非IE规则*/
宽度：133px；
}
#酷菜单a：悬停{
背景色：黑色；
颜色：白色；
}

因此，请指导我，如何有类似的字体样式，在我的flash菜单和这个CSS菜单是水平的？

提前感谢。

这就是您想要的效果：[最终更新]

基本上，修改您的html，使用无序列表

，并用

将每个锚点包装起来，将浮动到左侧
，并根据需要设置元素的样式
HTML:








CSS:

#酷菜单{
宽度：670px；
高度：48px；
保证金：0；
填充：0；
背景色：#CC3300；
文本对齐：左对齐；
列表样式：无；
}
#酷菜单{
填充物：5px；
颜色：#fff；
字体：粗体10px Arial；
填充中心：0px；
显示：块；
/*宽度：133px*/
文字装饰：无；
}
html>body#coolmenu a{/*非IE规则*/
宽度：133px；
}
#酷丽：悬停{
背景色：黑色；
}
#coolmenu li:将鼠标悬停在{color:white；}
#coolmenu li{宽度：118px；高度：48px；左填充：15px；浮动：左；右边框：1px实心616060；}
#coolmenu li a span{最小宽度：50px；显示：内联块；}
#coolmenu li a div{color:#858383；字体：粗体16px Arial；文本对齐：左；}

编辑：上述菜单与flash菜单的效果相同，如下所示：
编辑：最终更新，文本左对齐，左填充：15px
<ul>
    <li>
        <a>ETC</a>
        <a>ETC</a>
    </li>
</ul>



等
等



并在css部分中使用float:left。
以下是完整的工作代码：
HTML
<ul id="coolmenu">
    <li><a href="http://www.aamaodisha.org"><span>01</span>ABOUT US</a></li>
    <li><a href="http://www.aamaodisha.org/content.php"><span>02</span>CONTENT SECTIONS</a>
    <li><a href="http://www.aamaodisha.org/editorialboard.php"><span>03</span>EDITORIAL BOARD</a>
    <li><a href="http://www.aamaodisha.org/download.php"><span>04</span>DOWNLOAD PDF</a>
    <li><a href="http://www.aamaodisha.org/contactus.php"><span>05</span>CONTACT US</a>
</ul>

非常感谢@Dexter Huinda花时间编辑此代码。是的，我希望与您给出的代码有点类似。我之所以说类似，是因为您确实将垂直菜单设置为水平菜单。但我在每个菜单项“关于我们”或“内容”左侧的最终结果中得到了黑点（无序列表）“或下载”等。其次，我希望数字的文本颜色是现在的颜色（甚至在悬停之前），但文本的颜色是白色（悬停之前。可以做些什么让它们有两种不同的颜色吗？但我非常感谢您的帮助：）非常感谢。至少你给了我前进的道路。让我再试试摆弄一下codes@AmitPattnaik悬停前后您想要什么颜色的文本。请指定。@AmitPattnaik好的，因为您提供了指向flash页面的链接，所以这里的样式完全相同：@AmitPattnaik始终是我乐于帮助的。这是另一个版本具有简单动画效果的sion:@Surendraji，很抱歉，我没有看到您的回复。感谢您的编辑。我想，这个-webkit转换：所有0.3s轻松输入输出；-moz转换：所有0.3s轻松输入输出；-ms转换：所有0.3s轻松输入输出；-o转换：所有0.3s轻松输入输出；转换：所有0.3s轻松输入输出；都是用于悬停效果的减慢，使黑色在…中逐渐减轻。对吗？但是低于9的Internet Explorer版本会支持此效果吗？但是无论如何，非常感谢您付出的努力和尝试代码。热烈的问候：）
<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>

<ul>
    <li>
        <a>ETC</a>
        <a>ETC</a>
    </li>
</ul>

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

#coolmenu{
    width: 665px;
    height: 48px;
    margin: 20px auto;
    padding: 0;
    background-color: #CC3300;
    text-align: left;
}

#coolmenu li{
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;
     width: 133px;
     border-right: 1px solid #616060;
     display:block;
     float:left;
}
#coolmenu li:last-child{border:none;}
#coolmenu span{
    display:block; 
    text-align:left; 
    color: #858383; 
    font-size:15px;
}
#coolmenu a{
    padding:8px 0 8px 5px;
    color: #fff;
    font: bold 11px Arial;
    text-decoration: none;
    display:block;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}
#coolmenu a:hover{
background-color: #000;
}