How to overlap selected tab over 2nd level tab using css only?
This is HTML code
<div class="tabcontainer" id="tabcontainer">
<ul id="tabitemscontainer1">
<li class="selected"><a href="#">item 1</a>
<ul class="level2">
<li><a href="#">sub item 1 </a></li>
<li> <a href="#">subitem 2</a></li>
</ul>
</li>
<li><a href="#">item2</a></li>
</ul>
</div>
I wrote this CSS
#tabcontainer {
height:62px;
position:relative;}
#tabitemscontainer1 > li {
-moz-border-radius:7px 7px 0 0;
background:none repeat scroll 0 0 #F0F7C1;
border-color:#EABF4A;
border-style:solid;
border-width:1px 1px 0;
float:left;
margin-right:2px;
padding:5px 10px 10px;}
#tabcontainer ul li li.selected a, #tabitemscontainer1 > li.selected > a {
color:#AE4329;
font-weight:bold;}
ul.level2 {
background:none repeat scroll 0 0 #F3F8C6;
border:1px solid #EABF4A;
left:0;
padding:6px;
position:absolute;
top:26px;
width:463px;}
#tabcontainer ul li li {
float:left;
padding:0 15px 0 4px;}
a开发者_StackOverflow社区nd get almost OK
I added example here : http://jsbin.com/owana4
alt text http://shup.com/Shup/374240/110619042-My-Desktop.png
But i need to achieve this conditions too . Selected tab should overlap on second level tap.
How to make this possible without using image or JavaScript?
alt text http://shup.com/Shup/374241/110619313-My-Desktop.png
Try pulling ul.level2 up 1 pixel with a negative margin, and changing the color of the bottom border on the selected level 1 tab to the background color.
li.selected { border-bottom-color: #F3F8C6; border-bottom-width: 1px; } ul.level2 { margin-top: -1px; }
If that ends up not working, you may need to adjust z-indexes or add some padding to the bottom to one of those elements. (Padding because two margins that butt up against each other will be treated as one margin with a value equal to the larger one).
Note that instead of border-bottom-width, you could just change the border-width value in your existing CSS.
Try a negative margin-left on item 2 and giving item 1 a higher z-index then the other tabs.
The code, in the question above, has
class="tabitemscontainer1"
but the CSS has#tabitemscontainer1
instead.Change all the CSS selectors to
.tabitemscontainer1
.Next since
ul.level2
is positioned absolutely, add:z-index: -1;
to its CSS.Add:
.tabitemscontainer1 > li.selected { border-bottom: none; }
Change
.tabitemscontainer1 > li
to:.tabitemscontainer1 > li { -moz-border-radius: 7px 7px 0 0; background: none repeat scroll 0 0 #F0F7C1; float: left; margin-right: 2px; padding: 5px 10px 10px; border: 1px solid #EABF4A; }
Adjust the
top
inul.level2
s CSS to line up the borders.
精彩评论