CSS 3 poziomowe menu :: 4programmers.net

Draqun

2012-07-28 11:01

Draqun2012-07-28 11:01

Rejestracja:około 15 lat
Ostatnio:prawie 10 lat

Poniższy kod przedstawia 2 poziomowe rozwijane menu zrobine za pomocą CSS. Ja chciałbym zrobić 3 poziomowe jednak nie bardzo wiem jak zmodyfikować kod CSS, żeby to było możliwe. Proszę o wyrozumiałość bo w CSS jeszcze raczkuje.

Kopiuj

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu rozwijane pionowe - demo</title>
<style type="text/css">
* {margin: 0; padding: 0;}
.menu li {list-style: none;}
.menu, #menu ul {width: 160px;}
.menu ul {visibility: hidden; position: absolute; top: 0; left: 100%; padding-left: 1px;}
.menu li {padding-bottom: 1px; line-height: 0; position: relative;}
.menu li:hover ul {visibility: visible;}
.menu a, #menu li:hover li a {display: block; font: 12px/30px verdana, sans-serif; text-decoration: none; padding: 0 10px; width: 140px; color: #fff; background-color: #666;}
.menu li:hover a, #menu li:hover li:hover a {background-color: #333095;}
</style>
</head>
<body>
<ul class="menu">
  <li><a href="#">Link 1</a>
    <ul class="menu">
      <li><a href="#">Link 1.1</a></li>
      <li><a href="#">Link 1.2</a></li>
      <li><a href="#">Link 1.3</a></li>
    </ul>
  </li>
  <li><a href="#">Link 2</a>
    <ul>
      <li><a href="#">Link 2.1</a></li>
      <li><a href="#">Link 2.2</a></li>
      <li><a href="#">Link 2.3</a></li>
    </ul>
  </li>
  <li><a href="#">Link 3</a>
    <ul>
      <li><a href="#">Link 3.1</a></li>
      <li><a href="#">Link 3.2</a></li>
      <li><a href="#">Link 3.3</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

Pozdrawiam. Draqun

dawidgarus

2012-07-28 20:05

dawidgarus2012-07-28 20:05

Rejestracja:około 17 lat
Ostatnio:prawie 12 lat

Kopiuj

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu rozwijane pionowe - demo</title>
<style type="text/css">
* {margin: 0; padding: 0;}
.menu li {list-style: none;}
.menu, #menu ul {width: 160px;}
.menu ul {visibility: hidden; position: absolute; top: 0; left: 100%; padding-left: 1px;}
.menu li {padding-bottom: 1px; line-height: 0; position: relative;}
.menu li:hover > ul {visibility: visible;}
.menu a, #menu li:hover > li a {display: block; font: 12px/30px verdana, sans-serif; text-decoration: none; padding: 0 10px; width: 140px; color: #fff; background-color: #666;}
.menu li:hover > a, #menu li:hover > li:hover > a {background-color: #333095;}
</style>
</head>
<body>	
<ul class="menu">
	<li><a href="#">Link 1</a>
		<ul class="menu">
			<li><a href="#">Link 1.1</a>
				<ul class="menu">
					<li><a href="#">Link 1.1.1</a></li>
					<li><a href="#">Link 1.1.2</a></li>
					<li><a href="#">Link 1.1.3</a></li>
				</ul>
			</li>
			<li><a href="#">Link 1.2</a>
				<ul class="menu">
					<li><a href="#">Link 1.2.1</a></li>
					<li><a href="#">Link 1.2.2</a></li>
					<li><a href="#">Link 1.2.3</a></li>
				</ul>
			</li>
			<li><a href="#">Link 1.3</a>
				<ul class="menu">
					<li><a href="#">Link 1.3.1</a></li>
					<li><a href="#">Link 1.3.2</a></li>
					<li><a href="#">Link 1.3.3</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Link 2</a>
		<ul>
			<li><a href="#">Link 2.1</a></li>
			<li><a href="#">Link 2.2</a></li>
			<li><a href="#">Link 2.3</a></li>
		</ul>
	</li>
	<li><a href="#">Link 3</a>
		<ul>
			<li><a href="#">Link 3.1</a></li>
			<li><a href="#">Link 3.2</a></li>
			<li><a href="#">Link 3.3</a></li>
		</ul>
	</li>
</ul>
</body>
</html>