更新时间:2023-02-16 16:43:15
工作菜单:
// HTML
<div id="menu">
<ul>
<li><a href="index.html" accesskey="1" title="">Home</a>
</li>
<li><a href="services.html.html" accesskey="2" title="">Services</a>
<ul>
<li><a href="#">Something You do</a>
</li>
<li><a href="#">TODO</a>
</li>
</ul>
</li>
<li><a href="faq.html" accesskey="3" title="">FAQ</a>
</li>
<li class="active"><a href="about.html" accesskey="4" title="">About</a>
</li>
<li><a href="contact.html" accesskey="5" title="">Contact Us</a>
</li>
</ul>
</div>
// CSS
/** MENU */
#menu {
position:relative;
height: 110px;
}
#menu ul {
margin: 0px;
padding: 0px;
float:left;
line-height: 110px;
}
#menu li {
list-style:none;
}
#menu>ul>li {
float: left;
margin-right: 1px;
position:relative;
}
#menu>ul>li ul {
height:100%;
position:absolute;
bottom:-100%
}
#menu>ul>li ul>li {
bottom:0px;
display:none;
width:15em;
float:left;
}
#menu>ul>li:hover ul>li {
display:block
}
#menu a {
display:block;
padding: 0px 30px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
background:rgba(200, 200, 200, 0.5);
}
#menu a:hover {
text-decoration: none;
cursor:pointer;
background:rgba(200, 200, 200, 1);
}
#menu .active {
}