html弧形子菜单,纯CSS排列呈弧形布局的导航菜单

弧形排列的可折叠二级导航

* {margin: 0; padding: 0;}

li {list-style: none;}

a:link, a:visited {text-decoration: none;}

a:hover, a:active {text-decoration: underline;}

body {

font: 12px/1.2 'Microsoft YaHei', Verdana, Arial, Helvetica, sans-serif;

color: #ddd;

background: black;

}

#dv_nav {

padding-top: 30px;

width: 500px;

height: 540px;

text-align: right; /*各菜单项右对齐*/

background: url(img/bg-1.jpg) no-repeat;

}

#dv_nav h2 {

display: none;

}

#ul_nav li {

padding-bottom: 24px;

}

#ul_nav li li {

padding-bottom: 0px; /* 清除上一条对二级菜单的影响 */

margin-top: 10px;

}

/* 菜单项基本样式 */

#ul_nav h3 a,

#ul_nav h3 span {

font-size: 16px;

font-weight: 700;

col