.bg {
opacity:100%;
margin-right:auto;
margin-left:auto;
background-image:url(../Images/navbg.png);
background-size:84.5em 6em;
background-position:center;
background-repeat:no-repeat;
width:84.5em;
height:2.6875em;
z-index:500;
}
.fixed {
position:fixed;
top:0;
left:0;
z-index: 20;
}
@media (max-width:1219px){
.fixed{
position:absolute;
width:84.5em;
top:0;
left:0;
margin: 0em 0px 0px 0em;
}
}
ul {
height: 1.25em;
width: 68em;
font-family:Verdana, Geneva, sans-serif;
position:relative;
}
li {
float: left;
list-style: none;
margin: 0em 0em;
text-transform: uppercase;
letter-spacing: .25em;
color: #000;
font-family:Verdana, Geneva, sans-serif;
border-top-left-radius: 1em 1em;/*Rounded Corners*/
border-bottom-left-radius: 1em 1em;/*Rounded Corners*/
border-top-right-radius: 1em 1em;/*Rounded Corners*/
border-bottom-right-radius: 1em 1em;/*Rounded Corners*/
}
@media (max-width:1219px) {
li {
width:auto;
height:1.45em;
line-height:1.5em;
padding:0px;
}
}
#nav{
margin: -2.45em auto 0px 9.5em;
}
#nav a{
text-decoration: none;
letter-spacing:1px;
text-shadow: 1px 1px 1px rgba(102,102,102,.0);
font-family:Verdana, Geneva, sans-serif;
color:#525252;
font-size:.77em;
position:relative;
display:block;
line-height:2em;
}
@media (max-width:1219px) {
#nav a{
text-decoration: none;
letter-spacing:1px;
text-shadow: 1px 1px 1px rgba(102,102,102,.0);
font-family:Verdana, Geneva, sans-serif;
color:#525252;
font-size:11px;
position:relative;
display:block;
line-height:2em;
}
}
#nav a:hover{
color: #fff;
text-shadow: -2px 2px 2px #C9C9C9;
font-size:.77em;
position:relative;
}
@media (max-width:1219px) {
#nav a:hover{
color: #fff;
text-shadow: -2px 2px 2px #C9C9C9;
font-size:11px;
position:relative;
}
}
.blockhover{
border-top-left-radius: 0em 0em;/*Rounded Corners*/
border-bottom-left-radius: 0em 0em;/*Rounded Corners*/
border-top-right-radius: 0em 0em;/*Rounded Corners*/
border-bottom-right-radius: 0em 0em;/*Rounded Corners*/
}
ul.drop a {
color: #fff;
font-family: Verdana;
font-size: .875em;
text-decoration: none;
position:relative;
}
ul.drop, ul.drop li, ul.drop ul {
list-style: none;
margin: 0;
padding: 0;
color: #fff;
position:relative;
}
ul.drop {
position: relative;
z-index: 597;
float: left;
}
ul.drop li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
padding: .3125em .625em;
}
ul.drop li:hover{
position: relative;
z-index: 599;
cursor: default;
background: #CDBF85;
color:#fff;
}
ul.drop li.hover, {
position: relative;
z-index: 599;
cursor: default;
background: #C5B369;
color:#fff;
}
/*dropdown background*/
ul.drop ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 12.1875em;
background:#D3D3D3;
height:auto;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -.125em;
left: 100%;
}
ul.drop li:hover > ul {
visibility: visible;
}
ul.drop li.hover {
-webkit-transition: all .75s ease-in;
-moz-transition: all .75s ease-in;
-ms-transition: all .75s ease-in;
-o-transition: all .75s ease-in;
transition: all .75s ease-in;
}ul.drop li.hover:active {
background: #BCBA72;
}
我和其他一些人正在重新设计我们的高中网页，因为它迫切需要它！存在某种奇怪的边距问题，使页面右侧出现空白。我们无法弄清楚拯救我们生命的原因是什么。我们正在尝试实现固定导航，我们认为这是导致它的原因，但我们只是不知道代码在哪里。
这是我们的最新版本，如果有人愿意验证我们的语法或解释一种更简单的方法来实现更流畅的固定导航，那将意味着很多！
<div class="fixed" align="center">
<div class="bg"></div>
<div id="nav">
<ul class="drop hover">
<li><a href="http://lshs.leesummit.k12.mo.us/">Home</a></li>
<li><a href="#">Academics</a>
<ul>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/apluslshs/index.html">A+</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/apilshs/index.html">API</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/cslshs/index.html">Community Service</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/iblshs/index.html">IB at LSHS</a></li>
<li class="blockhover"><a href="http://www.leesummit.k12.mo.us/guidance/secprogramofstudy/secprogramofstudy.pdf">Programs of Study</a></li>
<li class="blockhover"><a href="http://www.leesummit.k12.mo.us/secss/default.htm">Summer School</a></li>
</ul>
</li>
<li><a href="http://lshs.leesummit.k12.mo.us/activitieslshs/index.htm">Clubs/Activities</a></li>
<li><a href="http://www.ihigh.com/lstigers/index.html">Sports</a></li>
<li><a href="#">Calendars</a>
<ul> <li class="blockhover"><a href="http://embed.revdel.com/4/allschool_monthview.php">All School Calendar</a></li>
<li class="blockhover"><a href="http://embed.revdel.com/4/athleticcalendar.php">Athletic Calendar</a></li>
<li class="blockhover"><a href="http://www.lsr7.org/district/about-us/">District Calendar</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/calendar/calendar.pdf">LSHS.PDF</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/tutoring/calendar.pdf">Tutoring Calendar</a></li>
</ul>
</li>
<li><a href="#">Counseling</a>
<ul> <li class="blockhover"><a href="http://sites.lsr7.org/lshscounseling">Counseling Center</a></li>
<li class="blockhover"><a href="http://www.lsr7.org/wp-content/uploads/2012/07/2013-2014-POS-Complete.pdf">Program of Study</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/transcriptslshs/instructions.pdf">Transcripts</a></li>
</ul>
</li>
<li><a href="#">Media Center</a></li>
<li><a href="#">Parents/Alumni</a>
<ul> <li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/alumnilshs/index.html">Alumni</a></li>
<li class="blockhover"><a href="http://lshstigerboosters.webs.com/">Booster Clubs</a></li>
<li class="blockhover"><a href="#">Building Emails</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/hoflshs/index.html">Hall of Fame</a></li>
<li class="blockhover"><a href="http://www.leesummit.k12.mo.us/nutrition/default.htm">Nutrition Services</a></li>
<li class="blockhover"><a href="http://www.lshsptsa.com/">PTSA/Project Grad</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/plannerlshs/planner.pdf">Student Handbook</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/transcriptslshs/instructions.pdf">Transcripts</a></li>
</ul>
</li>
<li><a href="#">Staff</a>
<ul> <li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/stafflshs/alpha.html">Alphabetical Listing</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/stafflshs/index.html">Staff by Department</a></li>
</ul>
</li>
<li><a href="#">Student Life</a>
<ul> <li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/artgallery/art.html">Art Gallery</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/schedule/index.html">Bell Schedule</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/courtwarming/index.html">Courtwarming 2012</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/activitieslshs/handbook/R7%20DistHB.pdf">District Handbook</a></li>
<li class="blockhover"><a href="#">Fall Assembly 2012</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/faqlshs/index.html">FAQ</a></li>
<li class="blockhover"><a href=" http://lshs.leesummit.k12.mo.us/eventslshs/schedule/index.html#finals">Finals Schedule</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/fe/index.html">Foreign Exchange</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/homecoming/index.html">Homecoming 2012</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/jrpage/index.html">Junior Information</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/stafflshs/sro/index.html">Recource Officer</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/srpage/index.html">Senior Information</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/somlshs/index.htm">Student of the Month</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/plannerlshs/planner.pdf">Student Planner</a></li>
</ul>
</li>
</ul>
</div><!--Nav Close-->
</div><!--.Fixed Close-->
<br />