如何制作纯css的下拉菜单？我正在寻找水平下拉菜单纯css和浏览器兼容....我看起来像下面提到的例子
3 回答
皈依舞
TA贡献1851条经验 获得超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;}
温温酱
TA贡献1752条经验 获得超4个赞
html, body {
font-family: Arial, Helvetica, sans-serif;}/* define a fixed width for the entire menu */.navigation {
width: 150px;}/* reset our lists to remove bullet points and padding */.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;}/* make ALL links (main and submenu) have padding and background color */.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;}/* add hover behaviour */.mainmenu a:hover {
background-color: #C5C5C5;}/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/.mainmenu li:hover .submenu {
display: block;
max-height: 200px;}/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/.submenu a {
background-color: #999;}/* hover behaviour for links inside .submenu */.submenu a:hover {
background-color: #666;}/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;}<html><body><head><link rel="stylesheet" type="css/text" href="nav.css"></head></body><nav class="navigation"> <ul class="mainmenu"> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Products</a> <ul class="submenu"> <li><a href="">Tops</a></li> <li><a href="">Bottoms</a></li> <li><a href="">Footwear</a></li> </ul> </li> <li><a href="">Contact us</a></li> </ul></nav>
- 3 回答
- 0 关注
- 673 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消