Question

我有一个非常简单的菜单，我想添加一个下拉列表。我需要做什么才能在此处添加一个下拉菜单？

http://www.cozinhatur.com/teste1/

HTML

    <div class="menu">
  <div class="search">
    <form id="form1" name="form1" method="post" action="">
      <label><span>
        <input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Pesquisar..." />
        </span>
        <input name="b" type="image" src="images/search.gif" class="button" />
      </label>
    </form>
  </div>
  <ul>
    <li><a href="index.html" class="active">HOME</a></li>
    <li><a href="quemsomos.html">QUEM SOMOS</a></li>
    <li><a href="index.html">COZINHAS</a></li>
    <li><a href="#">DIVERSOS</a></li>
    <li><a href="index.html">PRODUTOS</a></li>
    <li><a href="contact.html">CONTACTOS</a></li>
  </ul>
  <div class="clr"></div>
</div>

CSS

.menu
{
    background:#5d5d5d;
    margin:0 auto;
    padding:0;
    width:942px;
}

.menu ul
{
    border:0;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    text-align:left;
}

.menu ul li
{
    border:0;
    float:left;
    margin:0;
    padding:0 5px 0 0;
}

.menu ul li a
{
    color:#fff;
    float:left;
    font-family:Verdana, Helvetica, Arial, sans-serif;
    font-size:11px;
    margin:0;
    padding:15px;
    text-decoration:none;
}

.menu ul li a:hover
{
    background:#b57800;
}

.menu ul li a.active
{
    background:#1caedd;
}

.menu ul li ul,.menu ul li ul a
{
    font-family:Verdana, Helvetica, Arial, sans-serif;
    font-size:11px;
}

Answer 1

从菜单中制作了一个简单的CSS下拉菜单。见jsFiddle Demo。将鼠标悬停在第二个和第三个菜单项上以查看下拉列表。

希望这可以帮助您进一步构建以满足您的需求。

代码改变....

<强> HTML

<div class="menu">
    <ul>
        <li><a href="index.html" class="active">HOME</a></li>
        <li><a href="quemsomos.html">QUEM SOMOS</a>
          <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li> 
            <li><a href="">Item 3</a></li> 
          </ul> 
        </li>
        <li><a href="index.html">COZINHAS</a>
         <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li> 
            <li><a href="">Item 3</a></li> 
          </ul> 
        </li>
        </li>
        <li><a href="#">DIVERSOS</a></li>
        <li><a href="index.html">PRODUTOS</a></li>
        <li><a href="contact.html">CONTACTOS</a></li>
     </ul>
</div>

<强> CSS

.menu {
    background:#5d5d5d;
    margin:0 auto;
    padding:0;
    width:942px;
}
ul {
    border:0;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    text-align:left;
}
ul li {
    display: block;
    position: relative;
    float: left;
    border:0;
    float:left;
    margin:0;
    padding:0 5px 0 0;
}
li ul { 
    display: none; 
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #5d5d5d;
    margin: 0px;
    white-space: nowrap;
}
ul li a.active
{
    background:#1caedd;
}
ul li a:hover { 
    background: #b57800; 
}
li:hover ul { 
    display: block; 
    position: absolute;
}
li:hover li { 
    float: none;
    font-size: 11px;
}
li:hover a { 
    background: #5d5d5d; 
}
li:hover li a:hover { 
    background: #b57800; 
}

Answer 2

这里有一个很好的例子。重点是当盘旋时显示子菜单。

http://www.red-team-design.com/css3-dropdown-menu

Answer 3

看到这是纯粹的基于CSS的下拉菜单： -

<强> HTML

<ul id="menu">
  <li><a href="">Home</a></li>
  <li><a href="">About Us</a>
    <ul>
    <li><a href="">The Team</a></li>
    <li><a href="">History</a></li>
    <li><a href="">Vision</a></li>
    </ul>
  </li>
  <li><a href="">Products</a>
    <ul>
    <li><a href="">Cozy Couch</a></li>
    <li><a href="">Great Table</a></li>
    <li><a href="">Small Chair</a></li>
    <li><a href="">Shiny Shelf</a></li>
    <li><a href="">Invisible Nothing</a></li>
    </ul>
  </li>
  <li><a href="">Contact</a>
    <ul>
    <li><a href="">Online</a></li>
    <li><a href="">Right Here</a></li>
    <li><a href="">Somewhere Else</a></li>
    </ul>
  </li>
</ul>

<强> CSS

 ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #617F8A;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #617F8A;
}
li:hover li a:hover {
background: #95A9B1;
}

请参阅演示： - http://jsfiddle.net/XPE3w/140/

如何在此菜单中添加下拉菜单？

3 个答案: