Sannas Bloggtips

Multidropdown

Stilmallskod:

#multi-navbar, #multi-navbar ul {
	width: 100%;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	clear: both;
}

#multi-navbar li {
	list-style-type: none;
	text-align: center;
	width: auto;
	float: left;
	height: auto;
	margin-top: 200px;
	padding-top: 0px;
	padding-right: 6px;
	padding-bottom: 5px;
	padding-left: 0px;
}

#multi-navbar li li {
	margin: 0px;
	padding: 0px;
	float: left;
	list-style-type: none;
	width: 10em;
	text-align: left;
 	border-top: 3px solid #f9f3f1;
 	margin-top: -3px;
}

#multi-navbar li a {
	list-style-type: none;
	display: block;
	width: auto;
	text-decoration: none;
	height: auto;
	margin: 0px;
	font-family: verdana, sans-serif;
	font-size:20px;
	padding-bottom:5px;
	padding-left:10px;
	padding-right:10px;
	padding-top:4px;
	text-transform:normal;
 	font-weight: normal;
	color:#7c7c7c;
}

#multi-navbar li a:hover {
	background-image: none;
}

#multi-navbar li li a {
	padding: 8px;
	background-image: none;
 	 border-bottom: 3px solid #f9f3f1;
 	font-family: verdana, sans-serif;
	font-size: 10px;
}

#multi-navbar li li a:hover {
	text-decoration: none;
	background-color:#F8F8F8;
 	-o-transition: all 0.7s ease-out 0s;
	-webkit-transition: all 0.7s ease-out 0s;
	-moz-transition: all 0.7s ease-out 0s;
}

#multi-navbar span {
}

#multi-navbar li#home {
	display: block;
}

#multi-navbar li#home a, #multi-navbar li#home a:hover {
}

#multi-navbar ul {
	position:absolute;
	width: 10em;
	left: -999em;
	z-index: 9999;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
 	background: #fff;
}

#multi-navbar ul ul {
	margin-top: -31px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 10em;
}

#multi-navbar li:hover ul ul, #multi-navbar li:hover ul ul ul, #multi-navbar li:hover ul ul ul ul {
	left: -999em;
}

#multi-navbar li:hover ul, #multi-navbar li li:hover ul, #multi-navbar li li li:hover ul, #multi-navbar li li li li:hover ul {
	left: auto;
}

#multi-navbar .nuvarande {
	display: block;
}

#multi-navbar .nuvarande li {
}

#multi-navbar .nuvarande a {
}

#multi-navbar .nuvarande li a {
}

#multi-navbar .nuvarande li a:hover {
}

Kodmallskod:

<ul id="multi-navbar">
 <li><a href="#">Överrubrik (exempelvis "Kategorier")</a>
	<ul class='children'>
		<li><a href="#">Delkategori 1</a>
			<ul class='children'>
 				<a href="#länktillkategorin">Kategori</a>
 				<a href="#länktillkategorin">Kategori</a>
 				<a href="#länktillkategorin">Kategori</a>
 				<a href="#länktillkategorin">Kategori</a>
 		</li>
			</ul>
</li>

<li><a href="#">Delkategori 2</a>
			<ul class='children'>
 				<a href="#länktillkategorin">Kategori</a>
 				<a href="#länktillkategorin">Kategori</a>
		</li>
			</ul>
</li>

<li><a href="#">Delkategori 3</a>
			<ul class='children'>
				<a href="#länktillkategorin">Kategori</a>
				<a href="#länktillkategorin">Kategori</a>
				<a href="#länktillkategorin">Kategori</a>
				<a href="#länktillkategorin">Kategori</a>
				<a href="#länktillkategorin">Kategori</a>
		</li>
			</ul>
</li>

<li><a href="#">Delkategori 4</a>
			<ul class='children'>
				<a href="#länktillkategorin">Kategori</a>
				<a href="#länktillkategorin">Kategori</a>
				<a href="#länktillkategorin">Kategori</a> 
				<a href="#länktillkategorin">Kategori</a>

</li>
			</ul>
</li>
</ul>
</li>

Välkomna till min bloggtipssida som återigen har väckts till liv. Här hittar ni tips och tricks för blogg.se.

Multidropdown

Kommentera här: