Проблемы с выпадающим меню CSS

KoliK29 · November 9, 2012

Проблема такая. Пишу сайт для себя и столкнулся с небольшой проблемкой - не могу сделать вертикальное выпадающие меню... Это мой первый сайт Помогите кто чем сможет. Пишу в 2 файлах .html и .css.Всё работает кроме этого Вот код:

HTML


<html>
  <head>
    <title>Сайт</title>
    <link rel="stylesheet" type="text/css" href="style/style.css" />
  </head>
  <body>
    <div class="cap"></div>
    <div class="mm">
      <div id="mm1"><a href="page.html" class="bs1">a</a></div>
	<ul class="menu1">
	  <li><a href="page1.html">1</a></li>
	  <li><a href="page2.html">1</a></li>
	  <li><a href="page3.html">1</a></li>
	  <li><a href="page4.html">1</a></li>
	</ul>
      <div id="mm2"><a href="page.html" class="bs">а</a></div>
	<ul>
	  <li><a href="page1.html">1</a></li>
	  <li><a href="page2.html">1</a></li>
	  <li><a href="page3.html">1</a></li>
	  <li><a href="page4.html">1</a></li>
	</ul>
      <div id="mm3"><a href="page.html" class="bs">а</a></div>
	<ul>
	  <li><a href="page1.html">1</a></li>
	  <li><a href="page2.html">1</a></li>
	  <li><a href="page3.html">1</a></li>
	  <li><a href="page4.html">1</a></li>
	</ul>
      <div id="mm4"><a href="page.html" class="bs">а</a></div>
	<ul>
	  <li><a href="page1.html">1</a></li>
	  <li><a href="page2.html">1</a></li>
	  <li><a href="page3.html">1</a></li>
	  <li><a href="page4.html">1</a></li>
	</ul>
      <div id="mm5"><a href="page.html" class="bs">а</a></div>
	<ul>
	  <li><a href="page1.html">1</a></li>
	  <li><a href="page2.html">1</a></li>
	  <li><a href="page3.html">1</a></li>
	  <li><a href="page4.html">1</a></li>
	</ul>
      <div id="mm6"><a href="page.html" class="bs1">а</a></div>
	<ul>
	  <li><a href="page1.html">1</a></li>
	  <li><a href="page2.html">1</a></li>
	  <li><a href="page3.html">1</a></li>
	  <li><a href="page4.html">1</a></li>
	</ul>
    </div>
  </body>
</html>

CSS


body
{
  margin-left: 0;
  margin-top: 0;
}
.mm
{
  position: absolute;
  height: 250px;
  background: #666;
  margin-left: 0;
  margin-top: 0;
  left: 12%;
  right: 13%;
  background-image: url("../images/bf.png");
  text-decoration: none;
  margin: 0;
}
a
{
  display: block;
  width: 164px;
  height: 40px;
  text-decoration: none;
  color: #666;
}
#mm1
{
  background-image: url("../images/menu1.png");
  width: 180px;
  height: 40px;
  background-repeat: no-repeat;
  text-align: center;
  top: 250px;
  position: relative;
}
#mm1:hover
{
  background-image: url("../images/menu11.png");
}
#mm2
{
  background-image: url("../images/menu2.png");
  width: 164px;
  height: 40px;
  background-repeat: no-repeat;
  text-align: center;
  left: 180px;
}
#mm2:hover
{
  background-image: url("../images/menu22.png");
}
#mm3
{
  background-image: url("../images/menu2.png");
  width: 164px;
  height: 40px;
  background-repeat: no-repeat;
  text-align: center;
  left: 344px;
}
#mm3:hover
{
  background-image: url("../images/menu22.png");
}
#mm4
{
  background-image: url("../images/menu2.png");
  width: 164px;
  height: 40px;
  background-repeat: no-repeat;
  text-align: center;
  left: 508px;
}
#mm4:hover
{
  background-image: url("../images/menu22.png");
}
#mm5
{
  background-image: url("../images/menu2.png");
  width: 164px;
  height: 40px;
  background-repeat: no-repeat;
  text-align: center;
  left: 672px;
}
#mm5:hover
{
  background-image: url("../images/menu22.png");
}
#mm6
{
  background-image: url("../images/menu3.png");
  width: 180px;
  height: 40px;
  background-repeat: no-repeat;
  text-align: center;
  left: 836px;
}
#mm6:hover
{
  background-image: url("../images/menu33.png");
}
#mm2, #mm3, #mm4, #mm5, #mm6
{
  position: inherit;
  top: 250;
}
ul li
{
  top: 270px;
  background-color: #DCDCDC;
  width: 160px;
  height: 160px;
  margin-bottom: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  left: 49px;
  display: block;
  position: absolute;
}
#mm1:hover ul li
{
  left: 40px;
}

Yazon_Nile · November 12, 2012

выложи на какой-нибудь хостинг - дело пойдет быстрее

Sign In

Проблемы с выпадающим меню CSS

Question

KoliK29

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Yazon_Nile

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information