!
也想出现在这里? 联系我们
全球五大数据中心,CYUN提供海外优质服务器,CN2优化线路,为您的业务推进提供强大助力

二级菜单源代码

<style type="text/css">
		#menu{/*菜单块样式*/	
		width:280px;	
		float: left;
		line-height: 30px;/*行高*/		
		padding:20px 0px;<br />		}	
#menu li{/*菜单块中所有菜单样式*/
		background: url(images/p.png) no-repeat left;/*不平铺*/	
		list-style-type: none;		
		border: 1px dotted #656565;			
		box-shadow: 0 1px #fff;/*阴影*/		}
#menu li a{/*菜单超级链接样式*/
		text-decoration: none;/*去下划线*/
		padding-left: 20px;
		color: #656565;		
		display: block;
		}
#menu li a:hover{/*超级链接悬停样式*/
		color: #363636;
		background-color: #ccc;
		background-image:url(images/p.png);
		background-repeat: no-repeat;
		background-position: left;
		}
.sub_menu{/*二级菜单块样式*/
		width: 220px;
		padding-bottom: 10px;
		position: absolute;
		left: 248px;
		top:100px;
		display: none;
		}
.sub_menu li a{/*耳机菜单超级链接样式*/
		line-height: 30px;
		text-align: center;<br />		}
#menu li:hover .sub_menu{/*悬停显示二级菜单样式*/
	display: block;<br />		}
</style>

<div id="menu">
<h2 align="center">景点类型</h2>
<ul>
 	<li><a href="#">沙滩</a>
<ul id="sub_menu" class="sub_menu">
 	<li><a href="#">亚龙湾</a></li>
 	<li><a href="#">海棠湾</a></li>
 	<li><a href="#">大亚湾</a></li>
</ul>
</li>
 	<li><a href="#">水上项目</a></li>
 	<li><a href="#">岛屿</a></li>
 	<li><a href="#">游乐场</a></li>
 	<li><a href="#">高尔夫</a></li>
</ul>
</div>

二级菜单源代码

可下载此网页观看及修改:

隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
css

如何实现知乎顶部导航栏上下滚动效果? - CSS笔记

2018-7-10 11:06:50

css

学习网页设计与制作的相关网址

2018-7-10 12:23:06

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索