Два активных меню

I159 · May 18, 2010

Есть два меню, одно меню сверху, другое снизу. Верхнее реагирует на наведение курсора отображением фона прописанного в css, а нижнее должно реагировать выводом картинки (кнопки). В итоге нижнее наследует отображение фона, прописанное для верхнего.

body {
background-color: #FFFFFF;
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: 20px 125px;
}
#logo 
{
position: relative;
top: 10px;
left: 30px;
height: 95px;
width: 220px;
}

#buttonfeald 
{
position: absolute;
top: 45px;
left: 300px;
width: 711px;
height: 60px;
z-index: 1;
}

ul 
{
  position: absolute;
  top: 37px;
  left: 271px;
  font: bold 12pt sans-serif;
  z-index: 3; 
}

ul li
{
  list-style:none;
  float: left;
}

ul li a {
   display: block;
   width: 150px;
   height: 24px; 
   padding: 10px 8px 8px 8px;  
   text-align: center;
   border: 1px solid #f1f6ce;
}

ul li a:hover {
	/*background: url('button2.png') no-repeat;*/
	border: 1px solid #e1ed81;
	background: #ecf3b4;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	/*text-shadow: 1px 1px 1px #fff*/
}

a
{text-decoration: none;}

#area
{
position: absolute;
top: 125px;
left: 300px;
height: 600px;
width: 700px;
}

#big
{
position: absolute;
top: 800px;
left: 280px;
}

#big1
{
position: absolute;
top: 875px;
left: 280px;
}

ul#bottom-menu
{
  position: absolute;
  top: 390px;
  left: 271px;
  font: bold 14pt sans-serif;
  z-index: 3; 
}

ul#bottom-menu li
{
  list-style:none;
  float: none;
}

ul#bottom-menu li a {
	display: block;
   width: 150px;
   height: 24px; 
   position: relative;
   top: 385px;
   left: 15px;
   border: 20px;
   z-index: 4
}

ul#bottom-menu li a 
{
display: block;
   width: 200px;
   height: 50px; 
   padding: 23px 0px 0px 0px;  
   text-align: center;
}

ul#bottom-menu li a: hover
{
background: url('active_big.png') no-repeat;
}

#footer
{
position: absolute;
left: 0px;
top: 1000px;
height: 80px;
width: 1010px;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<img src="logo.png" id="logo">
<ul>
<li><a href="#">услуги</a></li>
<li><a href="#">заказать</a></li>
<li><a href="#">сотрудничать</a></li>
<li><a href="#">позвонить</a></li>
</ul>
<img src="buttonfeald.png" id="buttonfeald">
<img src="area.png" id="area">
<img src="big.png" id="big">
<img src="big.png" id="big1">
<img src="footer.png" id="footer">
<ul id="bottom-menu">
<li><a href="#">Заказать seo</a></li>
<li><a href="#">Взять работу</a></li>
</ul>
</body>
</html>

Sign In

Два активных меню

Question

I159

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information