0

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

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;
}
4

3 回答 3

1

从您的菜单中制作了一个简单的 CSS 下拉菜单。请参阅jsFiddle 演示。将鼠标悬停在第二个和第三个菜单项上以查看下拉菜单。

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

代码变了……

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; 
}
于 2012-04-19T00:23:27.933 回答
0

这里有一个很好的例子。要点是悬停时显示子菜单。

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

于 2012-04-18T22:07:59.220 回答
0

看到这是纯基于 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/

于 2012-04-19T08:34:58.917 回答