各位老铁们好，相信很多人对横向网站源码分享都不是特别的了解，因此呢，今天就来为大家分享下关于横向网站源码分享以及横向网站和纵向网站的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！
由上图我们可以看出，该图包含一个横向导航条，然后鼠标经过横向导航条之后，子导航显示出来。
1）制作页面所用知识点
我们这里主要用到的知识点就是列表标签（ul、dl）的使用、浮动（float）的使用、绝对定位（absolute）及鼠标经过（hover）的效果。
1、列表标签ul、dl（我们使用ul、dl来创建同类型的导航元素内容，通过设置css样式来达到图片所示效果）；
2、浮动元素float（每个导航元素我们需要使用float:left;让其左对齐，这里涉及到了我们之前讲解的如何清除浮动的影响）；
3、绝对定位absolute（对于子导航我们要使用绝对定位来让其浮动在上级有定位元素的下方，不占据元素空间）
4、鼠标经过hover（使用css的鼠标经过元素（hover）效果，配合display的none（隐藏）和block（显示）来实现子菜单的显示与隐藏）
具体的实现html代码以及css代码就如下图所示：
2）纵向菜单导航
还有一个纵向菜单导航原理跟横向的类似，只需简单调整一下css代码即可。
html代码跟横向一样，这里就不再贴图，具体的实现图片效果以及css代码就如下图所示：
如果你还想了解更多这方面的信息，记得收藏关注本站。