创建子菜单

-1

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

我试着去创建菜单称为产品下的子菜单。有人能帮我吗？

来源

2014-05-18 user3649899

你尝试过什么？你怎么想的呢？点击打开或悬停？ 'a'也不会有'list-style-type'。 –

DEMO

首先，你需要嵌套li内ul的<a>标签后，这个工作。这是一个纯粹的基于CSS的解决方案。 NO 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; 
}

来源

2014-05-18 15:18:02 mohamedrias

我使用的是Chrome，我无法点击子菜单项，因为当我移动鼠标时子菜单关闭。你应该解决这个问题（在JSBin中）。 –

立即查看http://jsbin.com/jasov/4/edit – mohamedrias

非常感谢。 – user3649899

<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(); 
    }); 
});

未经测试，但沿着正确的路线，走你的简要说明。

来源

2014-05-18 15:15:33 user3648221

JQuery甚至javascript未在问题中标记。 OP可能正在寻找一个纯粹的CSS解决方案。 –

应用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; 
}

您还可以检查出简单的菜单中点击该链接here！

来源

2014-05-18 15:16:40 Atiq

<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>

来源

2014-05-18 15:19:36

请勿在没有描述的情况下粘贴代码。 –

<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>

来源

2014-05-20 11:36:45 user3648221

回答

相关问题