我有一个下拉菜单,但是当我点击下拉菜单时,它也会将我的内容推下来. 我希望我的菜单可以滑过我网页的上下文部分.有人可以告诉我如何设置这个吗？ CSS body { font-siz
... . . 我有一个下拉菜单,但是当我点击下拉菜单时,它也会将我的内容推下来.
我希望我的菜单可以滑过我网页的上下文部分.有人可以告诉我如何设置这个吗？
CSS
body { font-size: 100%; background:#32373d;}a { text-decoration: none;}ul,ul ul { margin: 0; padding: 0; list-style: none;}#wrapper { width: 220px; margin: 100px auto; font-size: 0.8125em;}.menu { width: 225px; height: auto; -webkit-box-shadow: 0px 1px 3px 0px rgba(0,.73),0px 0px 18px 0px rgba(0,.13); -moz-box-shadow: 0px 1px 3px 0px rgba(0,.13); box-shadow: 0px 1px 3px 0px rgba(0,.13);}.menu > li > a { background-color: #616975; background-image: -webkit-gradient(linear,left top,left bottom,from(rgb(114,122,134)),to(rgb(80,88,100))); background-image: -webkit-linear-gradient(top,rgb(114,134),rgb(80,100)); background-image: -moz-linear-gradient(top,100)); background-image: -o-linear-gradient(top,100)); background-image: -ms-linear-gradient(top,100)); background-image: linear-gradient(top,100)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86',EndColorStr='#505864'); border-bottom: 1px solid #33373d; -webkit-box-shadow: inset 0px 1px 0px 0px #878e98; -moz-box-shadow: inset 0px 1px 0px 0px #878e98; box-shadow: inset 0px 1px 0px 0px #878e98; width: 100%; height: 2.75em; line-height: 2.75em; text-indent: 2.75em; display: block; position: relative; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 600; color: #fff; text-shadow: 0px 1px 0px rgba(0,.5);}.menu ul li a { background: #fff; border-bottom: 1px solid #efeff0; width: 100%; height: 2.75em; line-height: 2.75em; text-indent: 2.75em; display: block; position: relative; font-family: "Helvetica Neue",sans-serif; font-size: 0.923em; font-weight: 400; color: #878d95;}.menu ul li:last-child a { border-bottom: 1px solid #33373d;}.menu > li > a:hover,.menu > li > a.active { background-color: #35afe3; background-image: -webkit-gradient(linear,from(rgb(69,199,235)),to(rgb(38,152,219))); background-image: -webkit-linear-gradient(top,rgb(69,235),rgb(38,219)); background-image: -moz-linear-gradient(top,219)); background-image: -o-linear-gradient(top,219)); background-image: -ms-linear-gradient(top,219)); background-image: linear-gradient(top,219)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb',EndColorStr='#2698db'); border-bottom: 1px solid #103c56; -webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef; -moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef; box-shadow: inset 0px 1px 0px 0px #6ad2ef;}.menu > li > a.active { border-bottom: 1px solid #1a638f;}.menu > li > a:before { content: ''; background-image: url(../images/sprite.png); background-repeat: no-repeat; font-size: 36px; height: 1em; width: 1em; position: absolute; left: 0; top: 50%; margin: -.5em 0 0 0;}.item1 > a:before { background-position: 0 0;}.item2 > a:before { background-position: -38px 0;}.item3 > a:before { background-position: 0 -38px;}.item4 > a:before { background-position: -38px -38px;}.item5 > a:before { background-position: -76px 0;}.menu > li > a span { font-size: 0.857em; display: inline-block; position: absolute; right: 1em; top: 50%; background: #48515c; line-height: 1em; height: 1em; padding: .4em .6em; margin: -.8em 0 0 0; color: #fff; text-indent: 0; text-align: center; -webkit-border-radius: .769em; -moz-border-radius: .769em; border-radius: .769em; -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0,.26),0px 1px 0px 0px rgba(255,255,.15); -moz-box-shadow: inset 0px 1px 3px 0px rgba(0,.15); box-shadow: inset 0px 1px 3px 0px rgba(0,.15); text-shadow: 0px 1px 0px rgba(0,.5); font-weight: 500;}.menu > li > a:hover span,.menu > li a.active span { background: #2173a1;}.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: #32373D;}.menu ul > li > a span { font-size: 0.857em; display: inline-block; position: absolute; right: 1em; top: 50%; / background: #fff; border: 1px solid #d0d0d3; line-height: 1em; height: 1em; padding: .4em .7em; margin: -.9em 0 0 0; color: #878d95; text-indent: 0; text-align: center; -webkit-border-radius: .769em; -moz-border-radius: 769em; border-radius: 769em; text-shadow: 0px 0px 0px rgba(255,.01));} HTML
<link rel="stylesheet" type="text/css" href="../../Content/Menu.css" /> <div class="float-right"> <nav> <ul class="menuMain" style="float: left;"> <li class="item1"><a href="#" class="">Home</a> <ul style="display: block; "> <li class="subitem1"><a class="active" href="/DashBoard">DashBoard</a></li> <li class="subitem2"><a href="/Home/Contact">Contact</a></li> <li class="subitem3"><a href="/Home/About">About</a></li> </ul> </li> <li class="item2"><a href="#" class="">Functions</a> <ul style="display: block; "> <li class="subitem1"><a href="/Home/Download?token=f09e0c76-c06f-44da-8811-07af92f0dd7d">Download</a></li> <li class="subitem2"><a href="/Home/ReturnProperties?token=f09e0c76-c06f-44da-8811-07af92f0dd7d">Valuation</a></li> </ul> </li> <li class="item3"><a href="#" class="">Admin</a> <ul style="display: block; "> <li class="subitem1"><a href="/Admin">Admin</a></li> </ul> <li> <li class="item4"><a href="#" class="">Logout</a> <ul style="display: block; "> <li class="subitem1"><a href="/Home/Logout">Logout</a></li> </ul> <li> </ul> </nav> </div>.
解决方法
. 下拉菜单应使用position：absolute进行定位.
供参考,请使用：http://www.htmldog.com/articles/suckerfish/dropdowns/
. . .. ...