h5+css 垂直导航菜单

矫情吗；* 2022-09-23 03:39 169阅读 0赞

## 垂直导航菜单 ##

<!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=utf-8" />
    <title>导航菜单</title>
    <style type="text/css"> *{ margin:0;padding:0;font-size:15px;} ul{ list-style:none;width:100px;background-color:#ccc;} a{ text-decoration:none;color:#333;} .nav li a{ height:33px;width:100px;line-height:33px;margin-bottom:1px;background-color:#efefef;display:block;text-indent:20px;} .nav li a:hover{ background-color:#f66;color:#fff;} </style>
    
    </head>
    <body>
    
    <ul class="nav">
        <li><a href="#">首　　页</a></li>
        <li><a href="#">新闻快讯</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    
    </body>
    </html>

效果图：  
![这里写图片描述][20160703111111662]

[20160703111111662]: /images/20220721/9e77efdec0604fb5a20baf2b90e98a8b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关学习笔记 css垂直导航

[学习笔记 css垂直导航][css] ![2020

忘是亡心i/ 2023年02月14日 13:16/ 0 赞/ 88 阅读

相关 h5+css 菜单导航---改变宽度

菜单导航—改变宽度 1、使用javascript脚本实现： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

Dear 丶/ 2022年09月23日 03:42/ 0 赞/ 148 阅读

相关 h5+css 伸缩菜单---改变高度

伸缩菜单—改变高度 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

亦凉/ 2022年09月23日 03:42/ 0 赞/ 162 阅读

相关 h5+css 圆角菜单

圆角菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

- 日理万妓/ 2022年09月23日 03:40/ 0 赞/ 159 阅读

相关 h5+css 水平菜单制作

水平菜单制作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

雨点打透心脏的1/2处/ 2022年09月23日 03:40/ 0 赞/ 202 阅读

相关 h5+css 垂直导航菜单

垂直导航菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

矫情吗；*/ 2022年09月23日 03:39/ 0 赞/ 170 阅读

相关 CSS简约垂直导航工具条

[下载地址][Link 1]简约的垂直样式导航工具条样式，hover悬停黑色竖直的图标导航工具栏，悬停冒泡文字提示效果。可用于功能性网页工具栏ui布局特效。 ![163156

水深无声/ 2022年09月12日 04:41/ 0 赞/ 173 阅读

相关 jq垂直手风琴折叠导航菜单

[下载地址][Link 1]jQuery垂直手风琴导航菜单，灵活运用，方便修改样式，加入了css3动画，有耳目一新的感觉。 ![1631561043.png][] dd:

亦凉/ 2022年09月12日 04:40/ 0 赞/ 210 阅读

相关 jq垂直手风琴折叠导航菜单

[下载地址][Link 1]jQuery垂直手风琴导航菜单，灵活运用，方便修改样式，加入了css3动画，有耳目一新的感觉。 ![1631561043.png][] d

小鱼儿/ 2022年09月12日 01:44/ 0 赞/ 215 阅读

相关 css 导航菜单

body部分，创建一个外部大盒子，里面有一个存放logo的盒子，还有一个存放菜单的盒子 <body> <div id="top"> <div id="logo"><i

曾经终败给现在/ 2022年06月14日 06:29/ 0 赞/ 214 阅读