css3实现的多级渐变下拉菜单导航效果代码

2020-05-03 11:28:42易采站长站整理

#menu input#tab1:checked ~ ul.level1 label.lab1,
#menu input#tab2:checked ~ ul.level1 label.lab2,
#menu input#tab2a:checked ~ ul.level1 label.lab2,
#menu input#tab2b:checked ~ ul.level1 label.lab2,
#menu input#tab2c:checked ~ ul.level1 label.lab2,
#menu input#tab2aa:checked ~ ul.level1 label.lab2,
#menu input#tab3:checked ~ ul.level1 label.lab3,
#menu input#tab4:checked ~ ul.level1 label.lab4,
#menu input#tab4a:checked ~ ul.level1 label.lab4,
#menu input#tab4b:checked ~ ul.level1 label.lab4,
#menu input#tab4aa:checked ~ ul.level1 label.lab4 {display:block;}
</style>
</head>
<body>
<div id=”menu”>
<input type=”radio” name=”tab” id=”tab1″ class=”tabs”>
<input type=”radio” name=”tab” id=”tab2″ class=”tabs”>
<input type=”radio” name=”tab” id=”tab2a” class=”tabs”>
<input type=”radio” name=”tab” id=”tab2aa” class=”tabs”>
<input type=”radio” name=”tab” id=”tab2ab” class=”tabs”>
<input type=”radio” name=”tab” id=”tab2b” class=”tabs”>
<input type=”radio” name=”tab” id=”tab2c” class=”tabs”>
<input type=”radio” name=”tab” id=”tab3″ class=”tabs”>
<input type=”radio” name=”tab” id=”tab4″ class=”tabs”>
<input type=”radio” name=”tab” id=”tab4a” class=”tabs”>
<input type=”radio” name=”tab” id=”tab4aa” class=”tabs”>
<input type=”radio” name=”tab” id=”tab4b” class=”tabs”>
<input type=”radio” name=”tab” id=”tabclose” class=”tabs”>
<ul class=”level1″>
<li class=”level1-li”><a class=”level1-a” href=”#”>首 页</a></li>
<li class=”level1-li”><label for=”tab1″ class=”open”><img src=”images/trans.gif” alt=””>关于我 <b>↓</b></label><label for=”tabclose” class=”close lab1″><img src=”images/trans.gif” alt=””></label>
<ul class=”ul1″>
<li><a href=”#”>邮 箱</a></li>
<li><a href=”#”>电 话</a></li>
<li><a href=”#”>地 址</a></li>
</ul>
</li>
<li class=”level1-li”><label for=”tab2″><img src=”images/trans.gif” alt=””>度 假 <b>↓</b></label><label for=”tabclose” class=”close lab2″><img src=”images/trans.gif” alt=””></label>