Вот мой HTML

<div class="menu">
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="#">Products</a></li>
        <ul>
            <li><a href="#">Chair</a></li>
            <li><a href="#">Table</a></li>
            <li><a href="#">Sofa</a></li>
        </ul>
  <li><a href="promotion.html">Promotion</a></li>
  <li><a href="staff.html">Our Staff</a></li>
</ul>
</div>

Вот мой CSS

.menu {
    background-color: #007ead;
    width: 1000px;
    height: 51px;
    float: left;
}
.menu ul {
    list-style-type: none;
}
.menu ul li {
    display: inline;
}
.menu ul li a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 51px;
    color: #FFFFFF;
    text-decoration: none;
    padding-right: 25px;
    padding-left: 25px;
}
.menu ul li a:hover {
    list-style-type: none;
}

Я пытаюсь создать подменю под меню под названием продукты. Кто-нибудь может мне помочь?

-1
user3649899 18 Май 2014 в 19:05

5 ответов

Лучший ответ

ДЕМО

Сначала вам нужно вложить ul в li после тега <a>, чтобы это работало. Это чистое решение на основе CSS. НЕ нужен JS :)

   .menu {
    background-color: #007ead;
    width: 1000px;
    height: 51px;
    float: left;
}

.menu ul {
  list-style: none;
} 
.menu ul > li {
   float: left;
   position: relative;
   margin-right: 10px;
   color: #FFFFFF;   
}

.menu ul li a:link {
   color: #FFFFFF;
}

.menu ul > li ul {
     display: none;   
}

.menu ul > li:hover ul {
    display: block;

}

.menu ul > li ul {
   position: absolute;
  left: 0px;
  padding: 0px;
  background-color: #007ead;
  padding: 10px;
  color: white;
}



.menu ul > li ul li {
    float: left;
    display: inline-block;
}

.menu ul > li ul li a {
    color: white;
}
1
mohamedrias 18 Май 2014 в 15:56
<div class="menu">
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a class="subnav" href="#">Products</a>
     <ul>
           <li><a href="#">Chair</a></li>
           <li><a href="#">Table</a></li>
           <li><a href="#">Sofa</a></li>
      </ul>
  </li>
  <li><a href="promotion.html">Promotion</a></li>
  <li><a href="staff.html">Our Staff</a></li>
</ul>
</div>

.menu ul li ul {
    display:none;
}

Затем использовать jquery для отображения и скрытия при наведении курсора на родительское меню?

$(document).ready(function () {
    $('.subnav').hover(function () {
      $(this).children('ul').show();
    });
    $('.subnav').mouseOut(function () {
      $(this).children('ul').hide();
    });
});

Не проверено, но в правильном направлении, исходя из вашего краткого описания.

0
user3648221 18 Май 2014 в 15:15

Примените стиль css для подменю, например

.menu ul li ul li{
 display: inline;
 }

.menu ul li ul li a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 51px;
color: #FFFFFF;
text-decoration: none;
padding-right: 25px;
padding-left: 25px;
}

Вы также можете воспользоваться этой ссылкой простого меню, щелкнув здесь!

0
Atiq 18 Май 2014 в 15:23
<div class="menu">
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a class="subnav" href="#">Products</a>
     <ul>
           <li><a href="#">Chair</a></li>
           <li><a href="#">Table</a></li>
           <li><a href="#">Sofa</a></li>
      </ul>
  </li>
  <li><a href="promotion.html">Promotion</a></li>
  <li><a href="staff.html">Our Staff</a></li>
</ul>
</div>

<style>    
.menu ul li ul {
        display:none;
    }
    .menu ul li ul:hover {
        display:block;
    }
</style>
0
user3648221 20 Май 2014 в 11:36
<div class="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Chair</a></li>
                <li><a href="#">Table</a></li>
                <li><a href="#">Sofa</a></li>
            </ul>
        </li> <!-- End -->
        <li><a href="promotion.html">Promotion</a></li>
        <li><a href="staff.html">Our Staff</a></li>
    </ul>
</div>
0
user3649995user3649995 18 Май 2014 в 15:19