TYPO3 - Standard Navigation (CSS)

Beispiel 2 - Level1 Horizontale Top Navigation, Level 2-n Vertikale Navigation an der Seite

Beispiel von drPetri

.invisible, li dfn {
	height:0;
	left:-2000px;
	position:absolute;
	width:0;
}
/* Common navigation styles */

.nav {
}

.nav li li {
	font-size:90%;
	padding:0 0 0 1em;
}
.nav li li li {
	padding-left:1em;
}

.nav a, .nav a:link, 
.nav a:visited {
	text-decoration:none !important;
	color: #9b9b9b;
}
ul.nav a:hover, ul.nav a:active, 
li.act, li.act a, 
li.cur, li.cur a {
	color: #3c3c3c !important;

}
ul.nav {
	margin:0;
	padding:0;
}

ul.nav li {
	list-style:none outside none;
	line-height: 23px;
}

/* horicontal navigations */
.nav-h li{
	display:inline;
	margin: 0 20px 0 0;
	padding:0;
}

/*vertical navigations */

.nav-v {
	float:left;
}

.nav-v #nav-sub{

}
.nav-v ul {
	/*padding:0 0 10px 0;*/
	/*ie8..*/
	float: left;
	width:100%;
/*
	background: url("http://localhost/typo3_test/fileadmin/templates/960gs/media/nav-divider.png");
	background-repeat: no-repeat;
	background-position: bottom;
*/
/*
	padding-bottom: 1px;
*/
}

.nav-v li.first{	
}

.nav-v li {
/*
	background: url("http://localhost/typo3_test/fileadmin/templates/960gs//media/nav-divider.png");
	background-repeat: no-repeat;
*/
	font-weight:normal;
	list-style-position:outside;
	margin: 0;
	padding: 0;
	/* ie8 */
	width:100%;
	float: left;
}

.nav-v li.last {
	margin-bottom: 1px;
}

.nav-v li a {
	display:block;
	height: 23px;
	line-height:23px;
	text-decoration:none;
}

.nav-v li a{
}

.nav-v li a:hover,
.nav-v li.cur a,
.nav-v li.act a
{

/*
	background: url("media/bg-over.png");
	background-repeat: no-repeat;
	background-position: 0 1px;
*/
}

/* Level 2 */
.nav-v ul ul{
	padding: 0;
}
.nav-v li li {
	display: inline;
	font-size:11px;
	/* ie8 */
	border-bottom: 0px; 
	
}
.nav-v li li a{
	height: 24px;
	line-height: 24px;
}

.nav-v li.act li a,
.nav-v li.cur li a{
	color:#ccc;
}

.nav-v li li a:hover, 
.nav-v li li.cur a:visited,
.nav-v li li.cur a:link
{
	color: #ccc;
}
.nav-v li li.act a:visited,
.nav-v li li.act a:link{

}

.nav-v li li.act {
}
.nav-v li li.act a:link, 
.nav-v li li.act a:visited {
}

/* Top Navigation */
#nav-top{
	margin-bottom: 32px;
	text-transform: uppercase;
}

/* Side Navigation */
#nav-side{
	
}