I'm trying to constrain the height of a dropdown menu which itself has dropdown submenus. Using max-height: 150px; overflow-y: scroll; on the parent menu successfully prevents it from scrolling, but it causes the submenu to no longer render.
How can I constrain the height of the parent menu without breaking the submenu? I've tried the following without success: bootply
HTML
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
<ul class="nav navbar-nav">
<li class="dropdown">Dropdown <b class="caret"></b>
<ul class="dropdown-menu fixed-height">
<li>Dropdown Link 1</li>
<li>Dropdown Link 2</li>
<li>Dropdown Link 3</li>
<li>Dropdown Link 4</li>
<li>Dropdown Link 5</li>
<li>Dropdown Link 6</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Link 7
<ul class="dropdown-menu">
<li>Dropdown Submenu Link A</li>
<li>Dropdown Submenu Link B</li>
<li>Dropdown Submenu Link C</li>
<li>Dropdown Submenu Link D</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
CSS
.fixed-height {
overflow-y: scroll;
max-height: 150px;
}
.dropdown-submenu {
position:relative;
}
.dropdown-submenu > .dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu > a:after {d
isplay:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover > a:after {
border-left-color:#555;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
JS
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
Related
I have a list with up to four sub levels. Bullets are made with :before.
I have some trouble getting the 2nd line of text line up with the first one.
I have tried setting padding and text-indent like this:
ul {
padding-left: 1em;
text-indent: -1em;
}
- but it doesn't work. Setting list-style-position: outside doesn't seem to work either.
JSFIDDLE here
Any ideas?
Its better to use position: absolute instead of float to align bullets.
.menu {
width: 250px;
}
ul.nav>li>a {
position: relative;
}
/* First level */
ul.nav>li>a:before {
position: absolute;
font-family: 'Glyphicons Halflings';
font-size: 7px;
color: #901a1e;
content: "\e080";
border: 1px solid #d7d7d7;
left: 0;
top: 13px;
}
/* Sub levels */
ul.nav>li ul li>a {
display: inline-block;
vertical-align: top;
padding-left: 10px;
position: relative;
}
ul.nav>li ul li>a:before {
position: absolute;
font-size: 9px;
color: #901a1e;
content: "\25A0";
left: 0;
top: 3px;
}
ul li {
list-style-type: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="menu">
<ul class="nav">
<li>Home</li>
<li>Sub menu here
<ul>
<li>Link 2.1 - one more very, very, very, long text</li>
<li class="active">Link 2.2 - active</li>
<li>Link 2.3</li>
</ul>
</li>
<li>Separated link
</li>
<li>Separated link
<ul>
<li>Link 2.1
<ul>
<li>Link 3.1</li>
<li>Link 3.2</li>
<li>Link 3.3
<ul>
<li>Link 4.1 - one more very, very, very, long text</li>
<li>Link 4.2</li>
<li>Link 4.3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>One more very, very, very, long separated link</li>
<li>One more separated link</li>
</ul>
</div>
use the same line-height on :before as on the a element
see snippet :
.menu {
width: 250px;
}
/* First level */
ul.nav>li>a:before {
float: left;
margin: 3px 6px 4px 0;
font-family: 'Glyphicons Halflings';
font-size: 7px;
color: #901a1e;
content: "\e080";
border: 1px solid #d7d7d7;
}
/* Sub levels */
ul.nav>li ul li>a:before {
float: left;
margin-right: 6px;
font-size: 9px;
color: #901a1e;
content: "\25A0";
line-height:16px;
}
ul li {
list-style-type: none;
}
ul li a {
line-height:16px;
}
<div class="menu">
<ul class="nav">
<li>Home</li>
<li>Sub menu here
<ul>
<li>Link 2.1 - one more very, very, very, long text</li>
<li class="active">Link 2.2 - active</li>
<li>Link 2.3</li>
</ul>
</li>
<li>Separated link
</li>
<li>Separated link
<ul>
<li>Link 2.1
<ul>
<li>Link 3.1</li>
<li>Link 3.2</li>
<li>Link 3.3
<ul>
<li>Link 4.1 - one more very, very, very, long text</li>
<li>Link 4.2</li>
<li>Link 4.3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>One more very, very, very, long separated link</li>
<li>One more separated link</li>
</ul>
</div>
Below code should work:
.menu {
width: 250px;
}
ul{
list-style:none;
}
/* Setting the position of <a> and a:before*/
ul.nav li a{
position:relative; /* Setting this to relative so that we position a:before absolute to <a> */
padding-left:10px; /* We are moving the text to right by 10px */
display:block;
}
ul.nav li a:before{
position:absolute; /* This is the main css rule which gets our desired result */
left:-5px; /* setting the left position */
top:4px; /* setting the top position */
}
/* Setting Styles of <li> */
ul.nav>li>a:before {
font-family: 'Glyphicons Halflings';
font-size: 7px;
color: #901a1e;
content: "\e080";
border: 1px solid #d7d7d7;
}
ul.nav>li ul li>a:before {
font-size: 9px;
color: #901a1e;
content: "\25A0";
}
<div class="menu">
<ul class="nav">
<li>Home</li>
<li>Sub menu here
<ul>
<li>Link 2.1 - one more very, very, very, long text</li>
<li class="active">Link 2.2 - active</li>
<li>Link 2.3</li>
</ul>
</li>
<li>Separated link
</li>
<li>Separated link
<ul>
<li>Link 2.1
<ul>
<li>Link 3.1</li>
<li>Link 3.2</li>
<li>Link 3.3
<ul>
<li>Link 4.1 - one more very, very, very, long text</li>
<li>Link 4.2</li>
<li>Link 4.3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>One more very, very, very, long separated link</li>
<li>One more separated link</li>
</ul>
</div>
I have a menu which needs to expand to show the child elements on hover. According to the design the expanded child ul needs to expand across the full width of the page so needs to be absolutely positioned in order to break out from the width of the parent li.
The problem is that I need the child ul to remain visible as you hover over it. Because it is absolutely positioned it no longer contained by the parent li, so as soon as my mouse moves off that it disappears.
If I change the parent li to position:relative the ul remains visible when the mouse moves over it, but the child ul no longer fills 100% width of the page.
Here is a fiddle to demonstrate:
https://jsfiddle.net/sx2aouht/12/
Here is abbreviated markup (full code on the fiddle link above):
<nav class="priority-nav">
<ul class="menu">
<li class="first expanded active-trail active menu-mlid-178 help">Help & Advice
<ul class="menu">
<li class="first leaf menu-mlid-526">Find your local services</li>
<li class="leaf menu-mlid-528">Join CarerSmart</li>
<li class="leaf menu-mlid-527">Join our online community</li>
</ul>
</li>
</ul>
</nav>
Here is the css:
.priority-nav ul li {
//if this is uncommented the ul will remain visible when
//the mouse is over it, but the ul will not fill the page 100%
//position: relative;
float: left;
padding: 0 10px;
list-style-type: none;
}
.priority-nav ul li ul {
display: none;
position: absolute;
top: 40px;
left: 0;
background-color: red;
width: 100%;
padding: 50px 130px;
}
.priority-nav ul li:hover ul {
display: block;
}
The menu already stays open when you hover the submenu, the problem is that when the mouse goes down to the submenu, it leaves the hovered li element, in order to avoid this make sure that when the mouse enters the submenu, it will not leave the main li you hover, the submenu is in the li item, so hovering it is considered hovering the main li.
You just have to avoid leaving the main li until you enter the submenu, I used some padding in your example:
.priority-nav ul li {
//if this is uncommented the ul will remain visible when
//the mouse is over it, but the ul will not fill the page 100%
//position: relative;
float: left;
padding: 0 10px 5px;
list-style-type: none;
}
.priority-nav ul li ul {
display: none;
position: absolute;
top: 35px;
left: 0;
background-color: red;
width: 100%;
padding: 50px 130px;
}
.priority-nav ul li:hover ul {
display: block;
}
<nav class="priority-nav">
<ul class="menu"><li class="first expanded active-trail active menu-mlid-178 help">Help & Advice<ul class="menu"><li class="first leaf menu-mlid-526">Find your local services</li>
<li class="leaf menu-mlid-528">Join CarerSmart</li>
<li class="leaf menu-mlid-527">Join our online community</li>
<li class="leaf menu-mlid-530">Help and advice topic 4</li>
<li class="leaf menu-mlid-531">Help and advice topic 5</li>
<li class="leaf menu-mlid-532">Help and advice topic 6</li>
<li class="leaf menu-mlid-533">Help and advice topic 7</li>
<li class="leaf menu-mlid-534">Help and advice topic 8</li>
<li class="last leaf menu-mlid-535">Help and advice topic 9</li>
</ul></li>
<li class="expanded menu-mlid-184 community">Online Community<ul class="menu"><li class="first leaf menu-mlid-536">Discussion board</li>
<li class="last leaf menu-mlid-537">Chat</li>
</ul></li>
<li class="last expanded menu-mlid-176 get-involved">Get Involved<ul class="menu"><li class="first leaf menu-mlid-529">Donate</li>
<li class="leaf menu-mlid-538">Events</li>
<li class="leaf menu-mlid-539">Volunteer</li>
<li class="last leaf menu-mlid-540">Corporate opportunities</li>
</ul></li>
<li class="more"><span>More</span></li>
</ul>
</nav>
If the submenu is to be 100% width of the page but the top-level menu is not then we can still position the submenu in relation to the parent menu and not the li.
.priority-nav >.menu {
position: relative;
}
But we size the submenu to the width of the page with viewport units.
.priority-nav ul li ul {
display: none;
position: absolute;
top:100%;
left: 0;
background-color: red;
width: 100vw;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.cf:before,
.cf:after {
content: " ";
display: table;
/* clearfix */
}
.cf:after {
clear: both;
}
.priority-nav {
position: relative;
width: 70%;
}
.priority-nav > .menu {
background: #c0ffee;
}
.priority-nav ul li {
float: left;
padding: 0 10px;
list-style-type: none;
padding: 10px;
}
.priority-nav ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: red;
width: 100vw;
}
.priority-nav ul li:hover ul {
display: block;
}
<nav class="priority-nav">
<ul class="menu cf">
<li class="first expanded active-trail active menu-mlid-178 help">Help & Advice
<ul class="menu">
<li class="first leaf menu-mlid-526">Find your local services
</li>
<li class="leaf menu-mlid-528">Join CarerSmart
</li>
<li class="leaf menu-mlid-527">Join our online community
</li>
<li class="leaf menu-mlid-530">Help and advice topic 4
</li>
<li class="leaf menu-mlid-531">Help and advice topic 5
</li>
<li class="leaf menu-mlid-532">Help and advice topic 6
</li>
<li class="leaf menu-mlid-533">Help and advice topic 7
</li>
<li class="leaf menu-mlid-534">Help and advice topic 8
</li>
<li class="last leaf menu-mlid-535">Help and advice topic 9
</li>
</ul>
</li>
<li class="expanded menu-mlid-184 community">Online Community
<ul class="menu">
<li class="first leaf menu-mlid-536">Discussion board
</li>
<li class="last leaf menu-mlid-537">Chat
</li>
</ul>
</li>
<li class="last expanded menu-mlid-176 get-involved">Get Involved
<ul class="menu">
<li class="first leaf menu-mlid-529">Donate
</li>
<li class="leaf menu-mlid-538">Events
</li>
<li class="leaf menu-mlid-539">Volunteer
</li>
<li class="last leaf menu-mlid-540">Corporate opportunities
</li>
</ul>
</li>
<li class="more"><span>More</span>
</li>
</ul>
</nav>
There is a menu :
<div id="divmenuppal"> // this the menu
<ul class="dropdown">
<li class="menuppal">Administration
<ul>
<li>Artificial Turf</li>
<li>
Batting Cages
<ul>
<li>Indoor
<ul>
<li>Garden</li>
</ul>
</li>
<li>Outdoor</li>
</ul>
</li>
<li>Benches & Bleachers</li>
<li>Communication Devices</li>
<li>Dugouts</li>
<li>Fencing & Windscreen</li>
<li><hr></li>
<li>Floor Protectors</li>
<li>Foul Poles</li>
<li>Netting</li>
<li>Outdoor Furniture</li>
<li>Outdoor Signs</li>
<li><hr></li>
<li>Padding</li>
<li>Scoreboards</li>
<li>Shade Structures</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Structure
<ul>
<li>All-in-One Team Cart</li>
<li>Air & Electrical Reels</li>
<li>Field Drags</li>
<li>
Field Marking Equipment
<ul>
<li>Batter's Box Templates</li>
<li>Dryline Markers</li>
<li>Field Paint
<ul>
<li>Garden</li>
</ul>
</li>
<li>Field Sprayers</li>
<li>Stencils</li>
</ul>
</li>
<li>
Field Tarps
<ul>
<li>Area Tarps</li>
<li>Growth Covers / Protectors</li>
<li>Infield Tarps</li>
<li>Tarp Accessories</li>
</ul>
</li>
<li>Hand Tools</li>
<li>
Irrigation, Hoses, Nozzles
<ul>
<li>Hoses & Hose Reels</li>
<li>Irrigation</li>
<li>Nozzles</li>
</ul>
</li>
<li>Layout Tools</li>
<li>Moisture Removal</li>
<li><hr></li>
<li>Mound Fortification</li>
<li>Mowers & Stripers</li>
<li>Soil Management</li>
<li>Soil Amendments</li>
<li>Spreaders & Sweepers</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Exercice
<ul>
<li>
Baseball - Softball
<ul>
<li>Base Accessories</li>
<li>Bases & Home Plates</li>
<li>Game Accessories</li>
<li>Pitching Rubbers</li>
</ul>
</li>
<li>
Batting Practice Equipment
<ul>
<li>Backstops</li>
<li>Infield Screens</li>
<li>Jugs Pitching Machines</li>
<li>Turf Mats</li>
<li>Turf Protectors</li>
<li>Replacement Accessories</li>
</ul>
</li>
<li>
Batting Cages
<ul>
<li>Indoor</li>
<li>Outdoor</li>
</ul>
</li>
<li>
Portable Mounds
<ul>
<li>Batting Practice Mounds</li>
<li>Game Mounds</li>
<li>Practice Mounds</li>
</ul>
</li>
<li>
Football
<ul>
<li>First Down Markers</li>
<li>Football Accessories</li>
<li>Football Goalposts</li>
</ul>
</li>
<li>
Soccer
<ul>
<li>Soccer Goals</li>
<li>Soccer Accessories</li>
</ul>
</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Contribuables et biens
<ul>
<li>Ladders & Sticks</li>
<li>Hurdles</li>
<li>Training Accessories</li>
<li>Smart-Cart Training System</li>
<li>Smart-Hurdle Collection</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Recettes
<ul>
<li>Field Design</li>
<li>Turf Management</li>
<li>Training</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Edition
<ul>
<li>Field Design</li>
<li>Turf Management</li>
<li>Training</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Outils
<ul>
<li>Field Design</li>
<li>Turf Management</li>
<li>Training</li>
<li> - VIEW ALL - </li>
</ul>
</li>
</ul>
</div>
<div class="breadcrumbs" style="clear:left;"> // this is the breadcrumbs
<div class="container-fluid">
<ul class="bread">
<li>Accueil</li><li>Gestion des contribuables</li><li><a>Fiche d'un contribuable</a></li>
</ul>
<ul class="bread pull-right">
<li style="color: #000;padding: 5px;font-size: 11px;font-weight: bold;">Fiche d'un contribuable</li>
</ul>
</div>
</div>
The css of the menu :
* {
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
a {
text-decoration: none;
font-size: 11px;
font-weight: 100;
width: 100%;
box-sizing: border-box;
}
ul {
list-style: none;
}
ul.dropdown ul {
width: 220px;
visibility: hidden;
position: absolute;
background-color: #40617C;
}
ul.dropdown li:not(.menuppal):not(:first-child):not(:last-child)
{
margin-top: 8px;
margin-bottom: 8px;
}
hr {
margin-left: 6px;
margin-right: 8px;
border-top: 0;
}
/*
LEVEL ONE : MAIN MENU
*/
ul.dropdown {
position: relative;
}
ul.dropdown li.menuppal {
float: left;
zoom: 1;
background: #000 url(../images/menuLight.png) repeat-x top left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-left: 1px solid #222;
}
ul.dropdown li.menuppal a {
display: block;
padding: 4px 8px;
color: #000000;
}
/* Doesn't work in IE */
ul.dropdown li.menuppal:hover {
background: #ccc url('../images/menuDark.png') repeat-x 50% 50%;
position: relative;
}
/*
FIN LEVEL ONE
*/
/*
LEVEL TWO
*/
ul.dropdown ul {
top: 100%;
left: 0;
}
ul.dropdown ul li {
float: none;
position: relative;
}
/* IE 6 & 7 Needs Inline Block */
ul.dropdown li.menuppal ul li a {
border-right: none;
color: #FFF;
display: inline-block;
}
ul.dropdown li.menuppal ul li a:hover {
background: #07243a;
}
ul.dropdown li.menuppal ul li a:visited {
word-break: break-all;
}
/*
LEVEL THREE
*/
ul.dropdown ul ul {
left: 100%;
top:0!important;
}
/*
LEVEL FOUR
*/
ul.dropdown ul ul ul {
left: 100%;
top:0!important;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
At runtime the menu is not occupying all the horizontal space :
So how to make the menu fill the remaining space like in this image :
ul.dropdown {
background: #000 url(../images/menuLight.png) repeat-x top left;
}
Use flex layout. I add following code to the bottom of your CSS and it did the trick:
#divmenuppal > .dropdown {
display: flex;
}
.dropdown .menuppal:last-child {
flex-grow: 1;
}
http://jsfiddle.net/w2n79nsy/
ok I found it from #SunilDalal's answer :
ul.dropdown {
position: relative;
float: left;
width: 100%;
background: #000 url('menuLight.png') repeat-x top left;
}
I'm trying to change the background color of a button after hovering over it with jQuery. However, everytime I try I seem to be getting a gap on the top and bottom of each button rather than the whole button. Here's my jsFiddle: http://jsfiddle.net/Z5M2a/
HTML:
<div id="side-bar">
<ul class="side-nav">
<li class="divider"></li>
<li class="menuOption">Link 1</li>
<li class="divider"></li>
<li class="menuOption">Link 2</li>
<li class="divider"></li>
<li class="menuOption">Link 3</li>
<li class="divider"></li>
<li class="menuOption">Link 4</li>
<li class="divider"></li>
</ul>
</div>
CSS:
div#side-bar {
float: left;
width: 187px;
height: 100%;
min-height: 300px;
text-align: center;
background-color: #e9e9e9;
}
.side-nav {
padding-top: 0px;
}
.menuOption {
width: 187px;
height: 25px;
line-height: 25px;
}
div#side-bar ul li a {
color: #000;
text-decoration: none;
}
You need to reset the margin values for you li's. Currently foundation is giving them a margin-bottom of 0.4375em.
Add something like this to your CSS:
.side-bar li {
margin-bottom:0:
}
UPDATE:
Working link here:
http://codepen.io/alexbaulch/pen/wKFvf
In this JSFiddle, the last .tab class doesn't get the correct border-radius effect (top right rounded corner).
I think I have my logic correct in saying :last-child selects the last .tab of .tabbed in this case.
What am I doing wrong?
CSS:
body {
background: black;
color: white;
padding: 5px; }
.tabbed {
height: 550px;
}
.tabbed .tab {
padding: 6px 14px;
background: rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.4);
border-radius: 0px;
border-left-width: 0;
float: left;
}
.tabbed .tab:first-child {
border-radius: 3px 0 0 0;
border-left-width: 1px;
}
.tabbed .tab:last-child {
border-radius: 0 3px 0 0;
}
HTML:
<ul class='tabbed'>
<li class='tab'>Menu 1</li>
<li class='tab'>Menu 2</li>
<li class='tab'>Menu 3</li>
<li class='tab'>Menu 4</li>
<li class='tab'>Menu 5</li>
<li> <br/><br/> </li>
<li class='dummy'>Content 1</li>
<li class='dummy'>Content 2</li>
<li class='dummy'>Content 3</li>
<li class='dummy'>Content 4</li>
<li class='dummy'>Content 5</li>
</ul>
According to this documentation:
The :first-child pseudo class means "if this element is the first
child of its parent". :last-child means "if this element is the last
child of its parent". Note that only element nodes (HTML tags) count,
these pseudo-classes ignore text nodes.
See also W3C doc
It is not applied in your case because the last .tab is not the last child of the parent ul.
If you create two lists, then the css is applied as expected.
In a comment, you state: "It needs to be on the same ul parent. Or another ul, below the last li on the first ul." If that is so, then do this:
<ul class='tabbed'>
<li class='tab'>Menu 1</li>
<li class='tab'>Menu 2</li>
<li class='tab'>Menu 3</li>
<li class='tab'>Menu 4</li>
<li class='tab'>Menu 5</li>
<li>
<ul>
<li class='dummy'>Content 1</li>
<li class='dummy'>Content 2</li>
<li class='dummy'>Content 3</li>
<li class='dummy'>Content 4</li>
<li class='dummy'>Content 5</li>
</ul>
</li>
</ul>
Then this css (with modern browsers):
.tabbed {
height: 550px; }
.tabbed .tab {
padding: 6px 14px;
background: rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.4);
border-radius: 0px;
border-left-width: 0;
float: left; }
.tabbed .tab:first-child {
border-radius: 3px 0 0 0;
border-left-width: 1px; }
.tabbed .tab:nth-last-child(2) {
border-radius: 0 3px 0 0; }
.tabbed li:last-child {
clear: left;
}
See this fiddle.
To expand on Didier G.'s answer, what you should really be using here is the :first-of-type & :last-of-type pseudo selectors. However, the :nth-of-type selector (and its similar shorthand versions) does not appear to support using a classname for searching, only selecting, e.g. the following will select the first child of .tabbed, if and only if it has the class .tab:
.tabbed .tab:first-of-type
whereas this will select the first child of .tabbed that is of type li:
.tabbed li:first-of-type
I cannot find any reference explicitly stating this behavior, but it is vaguely implied in the specification:
The :nth-of-type(an+b) pseudo-class notation represents an element that has an+b-1 siblings with the same expanded element name
Where an expanded element name is the tag name, and cannot be a class or ID selector.
You can see this behavior live on JSFiddle.
Here's how i would do it:
body {
background: black;
color: white;
padding: 5px; }
.content {clear:both;}
.tall {
height: 550px;
}
.tabbed .tab {
padding: 6px 14px;
background: rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.4);
float: left; }
.tabbed .tab:first-child {
border-radius: 3px 0 0 0;
border-left-width: 1px; }
.tabbed .tab:last-child {
border-radius: 0 3px 0 0; }
And because i think it seems inappropriate to include the content within a class called tabbed, change the HTML to be structured as:
<div class="tall">
<ul class='tabbed'>
<li class='tab'>Menu 1</li>
<li class='tab'>Menu 2</li>
<li class='tab'>Menu 3</li>
<li class='tab'>Menu 4</li>
<li class='tab'>Menu 5</li>
</ul>
<ul class="content">
<li class='dummy'>Content 1</li>
<li class='dummy'>Content 2</li>
<li class='dummy'>Content 3</li>
<li class='dummy'>Content 4</li>
<li class='dummy'>Content 5</li>
</ul>
</div>
<hr/><!-- just here to show you the height remains -->