Помогите найти ошубку в html/css

Anatoli · March 29, 2013

Здраствуйте, я новичок на сайте да и в html/css. Решыл сделать сайт с горизонтальным и выподающим (2 уровня) меню,всё впринцепи получилось,кроме того что при наведении курсора на ссылки 1 уровня (тое есть скажем на главные кнопки меню)—--подменюшки <ul><li><а></а></li></ul> 2 уровня не выподают. Я должен применить position:relative; сначало а потом position:absolute; только вот не знаю куда,всё испробывал,помогите.

HTML

<!DOCTYPE html>
<html xmlns="[url="http://www.w3.org/1999/xhtml%22>"]http://www.w3.org/1999/xhtml">[/url]
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<link rel="stylesheet" type="text/css" href="css5/style5.css"/>
		<link rel="shortcut icon" type="image/icon" href="icon/fish.png"/>
		<title>www.abrisousroche.com</title>
	</head>
	<body>
		<div id="chief">
			<div id="header">
			</div>
			<div id="menu">
				<ul>
					<li><a href="#"><!--<img class="fish" src="..//icon/fish.png">-->Accueil</a>
						<ul>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
						</ul>
					</li><!--
					--><li><a href="#">Mises à jour</a>
						<ul>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
						</ul>
					</li><!--
					--><li><a href="#">Promos</a>
						<ul>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
						</ul>
					</li><!--
					--><li><a href="#">Matériel</a>
						<ul>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
						</ul>
					</li><!--
					--><li><a href="#">Animaux</a>
						<ul>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
						</ul>
					</li><!--
					--><li><a href="#">Aquariums</a>
						<ul>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
						</ul>
					</li><!--
					--><li><a href="#">Articles</a>
						<ul>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
						</ul>
					</li><!--
					--><li><a href="#">Abri sous roche</a>
						<ul>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
							<li><a href="#">Link item</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<div id="central">
			</div>
			<div id="footer">
			</div>
		</div>
	</body>
</html>

CSS

body {
	font-family:Arial, Tahome, PT "Gill sans MT";
	font-size:13px;
	background:#ccc;
	border:1px solid #000;
	margin:30px auto;
	width:1000px;
}
#chief {
}
#header {
}
#menu {
	border:1px solid #000;
	margin:0;
	padding:0;
}
#menu> ul {
	text-align:center;
	padding:0;
}/*(UL 1ogo urovnja)*/
#menu ul li ul {
	padding:0;
}/*(UL 2ogo urovnja)*/
#menu ul {
	margin:0;
}/*(UL 1ogo i 2ogo urovnja)*/
#menu> ul> li {
	display:inline-block;
}/*(LI 1ogo urovnja)*/
#menu ul li ul li {
}/*(LI 2ogo urovnja)*/
#menu ul li {
	list-style:none;
}/*(LI 1ogo i 2ogo urovnja)*/
#menu> ul> li> a {
	background:-webkit-linear-gradient(top,#fff,#00ffff);
	border:1px solid #000;
	border-radius:9px 3px;
	display:block;
	width:106px;
	padding:8px;
	color:#000;
}/*(A 1ogo urovnja)*/
#menu ul li ul li a {
	background:-webkit-linear-gradient(top,#00ff00,#ff00ff);
	border:1px solid #000;
	border-radius:3px 9px;
	color:#000;
	display:block;
	width:106px;
	padding:8px;
	margin-top:1px;
	position:;
	visibility:;
}/*(A 2ogo urovnja)*/
#menu ul li a {
	text-align:center;
	text-decoration:none;
}/*(A 1ogo i 2ogo urovnja)*/
#menu> ul> li> a:hover {
	color:red;
	background:#fd0;
}
#menu ul li ul li a:hover {
	visibility:visible;
}
#central {
}
#footer {
}

Edited March 29, 2013 by alexriz
Оформляйте код в тег CODE!!!!

Sign In

Помогите найти ошубку в html/css

Recommended Posts

Anatoli

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information