---------------------------------
HTML
<?xml version="1.0" encoding="utf-8"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#navcontainer { margin-left: 30px; }
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}
#navcontainer li { margin: 0; }
#navcontainer a
{
display: block;
padding: 5px 10px;
width: 140px;
color: #000;
background-color: #ADC1AD;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
font-weight: bold;
font-size: .8em;
background-image: url(images/vertical06.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
#navcontainer a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url(images/vertical06a.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
#navcontainer ul ul li { margin: 0; }
#navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 125px;
color: #000;
background-color: #C5D8C5;
text-decoration: none;
font-weight: normal;
}
#navcontainer ul ul a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">父项一</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">子项1</a></li>
<li><a href="#">子项2</a></li>
<li><a href="#">子项3</a></li>
<li><a href="#">子项4</a></li>
</ul>
</li>
<li><a href="#">父项二</a></li>
<li><a href="#">父项三</a></li>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">子项1</a></li>
<li><a href="#">子项2</a></li>
<li><a href="#">子项3</a></li>
<li><a href="#">子项4</a></li>
</ul>
<li><a href="#">父项四</a></li>
</ul>
</div>
</body>
</html>
- 大小: 19.8 KB
分享到:
相关推荐
css实现文字竖排效果
js+css实现有立体感的按钮式文字竖排菜单效果.docx
竖排着的导航菜单,向古书写在竹子上的一样,菜单多的时候可以向一边卷。
用CSS+DIV实现的模排以及竖排菜单,包括源代码,可以参照,与成自己想要的!
一款蓝色风格的竖排手风琴tab选项卡jQuery+CSS3代码特效,鼠标点击tab带有梦幻气泡效果,滑动切换手风琴代码。
从网上下载整理的里面有二十几种特效,适合各种网站的导航,很实用的并且效果很好看
在word、excel中可以轻松的实现文字竖排的形式,但是在html页面中呢?当然也可以实现,下面有个不错的示例,大家可以参考学习下
HTML竖排菜单制作,美观的竖排菜单,制作竖排菜单时可能用得到
内容索引:脚本资源,CSS特效,菜单 9种漂亮的CSS竖向导航菜单样式,大家可以看演示截图,看上去是不是很美?有圆角、方角、虚线类、深蓝色、暖色等多种风格样式,你还在为找不到好的菜单美化方案而发愁吗?或许这一个...
竖向折叠的CSS滑动菜单
方法一: 标签 一种可能的方法(但不推荐)是在每个字母后面添加 标签来实现竖排文字: 复制代码代码如下: <h1> N E T T U T S </h1> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
主要介绍了js+css实现有立体感的按钮式文字竖排菜单效果,通过javascript动态调用页面元素样式实现竖排菜单的功能,具有一定参考借鉴价值,需要的朋友可以参考下
自定义textview 实现字体竖排效果
文本框文字竖排
这是一款JS+CSS实现的Flash效果的导航菜单,竖向排列,兼容性好,由JavaScript妙味课堂的朋友编写,欢迎测试. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-flash-style-v-nav-codes/ 具体...
C#203文字竖排工具,源代码
竖排汉字编辑的类。可以在文本框中生成竖排的文字。
WPF竖排按钮显示,控制进行字数变换为竖着显示。
arcgis maplex竖排文字,是我自己截图总结的
竖排RadioButton,多行单选,自适应长度