我有一個浮動在頁面右側的手風琴風格的菜單。它佔用了很多空間,我想找到一種方法來隱藏它。隱藏菜單,直到一個框懸停
我怎樣才能讓橙色的盒子放在它的位置,每當徘徊,菜單出現。
例:
我的菜單:http://jsfiddle.net/4dHYq/
HTML:
<ul class="menu">
<li class="item1"><a href="#">ABOUT US</a>
<ul>
<li class="subitem1"><a href="#">About Us</a></li>
<li class="subitem2"><a href="#">Strange 「Stuff」</a></li>
<li class="subitem3"><a href="#">Automatic Fails</a></li>
<li class="subitem1"><a href="#">Cute Kittens</a></li>
<li class="subitem2"><a href="#">Strange 「Stuff」</a></li>
<li class="subitem3"><a href="#">Automatic Fails</a></li>
</ul>
</li>
<li class="item2"><a href="#">ACADEMICS</a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens</a></li>
<li class="subitem2"><a href="#">Strange 「Stuff」</a></li>
<li class="subitem3"><a href="#">Automatic Fails</a></li>
</ul>
</li>
<li class="item3"><a href="#">RESOURCES</a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens</a></li>
<li class="subitem2"><a href="#">Strange 「Stuff」</a></li>
<li class="subitem3"><a href="#">Automatic Fails</a></li>
</ul>
</li>
<li class="item4"><a href="#">DEPARTMENTS</a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens</a></li>
<li class="subitem2"><a href="#">Strange 「Stuff」</a></li>
<li class="subitem3"><a href="#">Automatic Fails</a></li>
</ul>
</li>
<li class="item5"><a href="#">FAQs</a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens</a></li>
<li class="subitem2"><a href="#">Strange 「Stuff」</a></li>
<li class="subitem3"><a href="#">Automatic Fails</a></li>
</ul>
</li>
</ul>
CSS:
body {
font-size: 100%;
background:#cccccc;
}
a {
text-decoration: none;
}
ul, ul ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu {
float: right;
width: 300px;
height: auto;
}
.menu > li > a {
background-color: #f36f21;
border-bottom: 1px solid #444;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
color: #fff;
}
.menu ul li a {
background: #fff;
border-bottom: 1px solid #efeff0;
width: 100%;
height: 2em;
line-height: 2em;
text-indent: 2em;
display: block;
position: relative;
color: #444;
}
.menu ul li:last-child a {
border-bottom: 1px solid #444;
}
.menu > li > a:hover, .menu > li > a.active {
background-color: #444;
border-bottom: 1px solid #f36f21;
}
.menu > li > a.active {
border-bottom: 1px solid #f36f21;
}
.menu > li > a:before {
font-size: 36px;
height: 1em;
width: 1em;
position: absolute;
left: 0;
top: 50%;
margin: -.5em 0 0 0;
}
.menu > li > ul li a:before{
content: '▶';
font-size: 8px;
color: #bcbcbf;
position: absolute;
width: 1em;
height: 1em;
top: 0;
left: -2.7em;
}
.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
color: #444;
}
嗯,你有沒有問一個問題。 – 2013-04-09 20:19:11
對不起。修訂。 – Chaddly 2013-04-09 20:25:11