Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <ul class="menu">
- <li><label for="menu1">Menu 1</label></li>
- <li><label for="menu2">Menu 2</label></li>
- <li><label for="menu3">Menu 3</label></li>
- </ul>
- <input type="radio" name="menu" id="menu1">
- <div> Conteudo do Menu 1</div>
- <input type="radio" name="menu" id="menu2">
- <div> Conteudo do Menu 2</div>
- <input type="radio" name="menu" id="menu3">
- <div> Conteudo do Menu 3</div>
- UL{
- border: 0;
- margin: -1px;
- padding: 0px;
- background-color: #eee;
- font-weight: bold;
- text-decoration: none;
- font-size: 100%;
- list-style: none;
- line-height: 0.5;
- border-bottom-right-radius: 0px;
- border-bottom-left-radius: 0px;
- border-top-right-radius: 6px;
- border-top-left-radius: 6px;
- }
- UL:after, UL:before{
- content: '';
- display: table;
- clear: both;
- }
- UL LI{
- border: 1px solid #cbc7bd;
- list-style: none;
- float: left;
- position: relative;
- top: 1px;
- margin: 0 .2em 1px 0;
- border-bottom: 0 !important;
- padding: 0;
- white-space: nowrap;
- border-top-right-radius: 6px;
- border-top-left-radius: 6px;
- }
- UL LI label{
- cursor: pointer;
- padding: .5em 1em;
- text-decoration: none;
- float: left;
- }
- input[type=radio]{
- height: 0;
- width: 0;
- position: absolute;
- opacity: 0;
- }
- input:checked + div{
- display: block;
- }
- div{
- display: none;
- border-width: 0;
- padding: 1em 1.4em;
- background: none;
- margin-top: 0;
- border-top: 0;
- border: 1px solid #d9d6c4;
- background-color: white;
- border-bottom-right-radius: 6px;
- border-bottom-left-radius: 6px;
- border-top-right-radius: 0px;
- border-top-left-radius: 0px;
- }
- LI:has(input:checked)
- LI < input:checked
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement