垂直菜单，背景图像翻转

在以前的文章中，我们看到了如何使用CSS的 鼠标悬停效果与垂直菜单 ，使用不同的背景颜色为标记的项目，是移动鼠标。

这个例子中，我们重温和扩大，加入这两个菜单的主要功能：通过使用的子弹 ，并在设计方面更好的性能改进的辅助。

下面是我们想要得到的结果：

在屏幕的鼠标指针的例子是在菜单上的第二个链接固定。

这两个图像用于例如给予的名称和menu_1.gif menu_2.gif：

其中size（150X22像素）已量身定做的箱子，字体大小和分配给个别项目填充的宽度。

我邀请读者创建自定义图像的布局和尺寸有关其需要。

让我们的做法，开始绘制菜单。 我们分析的HTML代码：

 <div id="menu">



    



 <UL>



        



 <LI>的<a href="#">第1页</ A> </ LI>



        



 <LI>的<a href="#">第2页</ A> </ LI>



        



 <LI>的<a href="#">第3页</ A> </ LI>



        



 <LI>的<a href="#">第4页</ A> </ LI>



        



 <LI>的<a href="#">第5页</ A> </ LI>



    



 </ UL>







 </ DIV>

所有菜单将在标有“菜单”的对话框，从中我们将建立一个项目符号列表，其中包含的链接。

未指定任何标识和无级链接到菜单项（列表，列表，链接）完全基于标识的元素嵌套，任何。

遵循适当的言论陪同CSS：

 / *程式化笼统的DIV标签* /









 p







 {



    



字体大小：10px;



    



字体家庭：宋体;







 }









 / *分配在菜单背景和框的宽度* /









 ＃菜单







 {



    



背景：＃CCDDEE;



    



宽度：150像素;







 }









 / *删除的UL标签的默认风格，在菜单中* /









 ＃菜单UL







 {



    



保证金：0px 0px 0px 0px;



    



目录样式类型：无;







 }









 / *在菜单中列出了程式化* /









 ＃菜单将







 {



    



保证金：0px 0px 0px 0px;



    



边境底：1px的固体＃FFFFFF;







 }









 / *指定样式的链接中的菜单列表* /









 ＃菜单李一，他们一个：悬停







 {



    



显示：块;



    



位置：亲属;



    



文字装饰：无;



    



颜色：＃192939;



    



字体重量：大胆;



    



填充：5px 5px 5px 5px;







 }









 / *设置链接的背景，默认情况下，和鼠标悬停* /









 ＃菜单那里







 {



    



背景图像：网址（menu​​_1.gif）;







 }







 ＃菜单会答：悬停







 {



    



背景图像：网址（menu​​_2.gif）;







 }

对上述元素的嵌套，操作，确保只有子弹会出现与此风格化是菜单作为一种内与ID框嵌套的结果，“菜单”。

网站的所有其他子弹都会有自己的默认的方式或通过CSS明确分配。