html - overlapping nav bar css -
i have created nav bar using edited web forms template (currently learning asp etc). on of pages nav bar overlap content of page when trying access through drop down menu. here picture of problem:
here site.css file:
body { padding-top: 50px; padding-bottom: 20px; } .body-content { padding-left: 15px; padding-right: 15px; } .dl-horizontal dt { white-space: normal; } input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="select"] { max-width: 280px; } @media screen , (min-width: 768px) { .jumbotron { margin-top: 20px; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } } li { border-right: 1px solid #ff6600; } ul { list-style: none; padding: 0; margin: 0; background: #2b3533; border: 1px solid #ff6600; } ul li { display: block; position: relative; float: left; background: #2b3533; } li ul { display: none; } ul li { display: block; padding: 1em; text-decoration: none; white-space: nowrap; color: #fff; } li:hover > ul { display: block; position: absolute; } li:hover li { float: none; } li:hover { background: #2b3533; } li:hover li a:hover { background: #ff6600; } .main-navigation li ul li { border-top: 0; } ul li a:hover { background: #ff6600; } ul ul ul { left: 100%; top: 0; } ul:before, ul:after { content: " "; display: table; } ul:after { clear: both; } .main-navigation > li > { display: block; padding: 1em; text-decoration: none; white-space: nowrap; color: white; } .shadowing { color: #fff; font-size: 12em; font-weight: bold; font-family: helvetica; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); margin-top: 20px; } .shadowing { text-align: center; } here masterpage code:
<%@ master language="c#" autoeventwireup="true" codebehind="synthermaster.master.cs" inherits="computingprojectwh.sitemaster" %> <!doctype html> <html lang="en"> <head runat="server"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title><%: page.title %> - asp.net application</title> <asp:placeholder runat="server"> <%: scripts.render("~/bundles/modernizr") %> </asp:placeholder> <webopt:bundlereference runat="server" path="~/content/css" /> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> </head> <body> <form id="form1" runat="server"> <asp:scriptmanager runat="server"> <scripts> <%--to learn more bundling scripts in scriptmanager see http://go.microsoft.com/fwlink/?linkid=301884 --%> <%--framework scripts--%> <asp:scriptreference name="msajaxbundle" /> <asp:scriptreference name="jquery" /> <asp:scriptreference name="bootstrap" /> <asp:scriptreference name="respond" /> <asp:scriptreference name="webforms.js" assembly="system.web" path="~/scripts/webforms/webforms.js" /> <asp:scriptreference name="webuivalidation.js" assembly="system.web" path="~/scripts/webforms/webuivalidation.js" /> <asp:scriptreference name="menustandards.js" assembly="system.web" path="~/scripts/webforms/menustandards.js" /> <asp:scriptreference name="gridview.js" assembly="system.web" path="~/scripts/webforms/gridview.js" /> <asp:scriptreference name="detailsview.js" assembly="system.web" path="~/scripts/webforms/detailsview.js" /> <asp:scriptreference name="treeview.js" assembly="system.web" path="~/scripts/webforms/treeview.js" /> <asp:scriptreference name="webparts.js" assembly="system.web" path="~/scripts/webforms/webparts.js" /> <asp:scriptreference name="focus.js" assembly="system.web" path="~/scripts/webforms/focus.js" /> <asp:scriptreference name="webformsbundle" /> <%--site scripts--%> </scripts> </asp:scriptmanager> <ul class="main-navigation"> <li><a href="/home.aspx">synther physics</a></li> <li><a href="/revisiontopiclist.aspx">revision topic</a> <ul> <li><a href="/revisionpages/1. further mechanics/further mechanics topic list.aspx">further mechanics</a> <ul> <li><a href="/revisionpages/1. further mechanics/moments , energy.aspx">moments , energy</a></li> <li><a href="/revisionpages/1. further mechanics/motion in circle.aspx">motion in circle</a></li> </ul> </li> <li><a href="/revisionpages/2. gravitaional fields/universal gravitation.aspx">gravitaional fields</a> <ul> <li><a href="/revisionpages/2. gravitaional fields/universal gravitation.aspx">universal gravitation</a></li> </ul> </li> <li><a href="/revisionpages/3. electric , magnetic fields/electric , magnetic fields topic list.aspx">electric , magnetic fields</a> <ul> <li><a href="/revisionpages/3. electric , magnetic fields/capacitance.aspx">capacitance</a></li> <li><a href="/revisionpages/3. electric , magnetic fields/electric fields.aspx">electric fields</a></li> <li><a href="/revisionpages/3. electric , magnetic fields/magnetic fields.aspx">magnetic fields</a></li> </ul> </li> <li><a href="/revisionpages/4. nuclear , particle physics/nuclear , particle physics topic list.aspx">nuclear , particle physics</a> <ul> <li><a href="/revisionpages/4. nuclear , particle physics/electrons , nuceli.aspx">electrons , nuclei</a></li> <li><a href="/revisionpages/4. nuclear , particle physics/particle physics.aspx">particle physics</a></li> </ul> </li> <li><a href="/revisionpages/5. nuclear radiation/nuclear decay.aspx">nuclear radiation</a> <ul> <li><a href="/revisionpages/5. nuclear radiation/nuclear decay.aspx">nuclear decay</a></li> </ul> </li> <li><a href="/revisionpages/6. thermodynamics/thermodynamics topic list.aspx">thermodynamics</a> <ul> <li><a href="/revisionpages/6. thermodynamics/gas laws , kinetic theory.aspx">gas laws , kinetic theory</a></li> <li><a href="/revisionpages/6. thermodynamics/internal energy, absolute 0 , change of state.aspx">internal energy, absolute 0 , change of state</a></li> <li><a href="/revisionpages/6. thermodynamics/specific heat capacity.aspx">specific heat capacity</a></li> </ul> </li> <li><a href="/revisionpages/7. space/space topic list.aspx">space</a> <ul> <li><a href="/revisionpages/7. space/astrophysics.aspx">astrophysics</a></li> <li><a href="/revisionpages/7. space/cosmology.aspx">cosmology</a></li> </ul> </li> <li><a href="/revisionpages/8. oscillations/oscillations.aspx">oscillations</a> <ul> <li><a href="/revisionpages/8. oscillations/oscillations.aspx">oscillations</a></li> </ul> </li> </ul> </li> <li><a href="/revisiontestlist.aspx">tests topic</a> <ul> <li><a href="/testpages/1. further mechanics/further mechanics test list.aspx">further mechanics</a> <ul> <li><a href="/testpages/1. further mechanics/moments , energy test.aspx">moments , energy</a></li> <li><a href="/testpages/1. further mechanics/motion in circle test.aspx">motion in circle</a></li> </ul> </li> <li><a href="/testpages/2. gravitaional fields/universal gravitation test.aspx">gravitaional fields</a> <ul> <li><a href="/testpages/2. gravitaional fields/universal gravitation test.aspx">universal gravitation</a></li> </ul> </li> <li><a href="/testpages/3. electric , magnetic fields/electric , magnetic fields test list.aspx">electric , magnetic fields</a> <ul> <li><a href="/testpages/3. electric , magnetic fields/capacitance test.aspx">capacitance</a></li> <li><a href="/testpages/3. electric , magnetic fields/electric fields test.aspx">electric fields</a></li> <li><a href="/testpages/3. electric , magnetic fields/magnetic fields test.aspx">magnetic fields</a></li> </ul> </li> <li><a href="/testpages/4. nuclear , particle physics/nuclear , particle physics test list.aspx">nuclear , particle physics</a> <ul> <li><a href="/testpages/4. nuclear , particle physics/electrons , nuceli test.aspx">electrons , nuclei</a></li> <li><a href="/testpages/4. nuclear , particle physics/particle physics test.aspx">particle physics</a></li> </ul> </li> <li><a href="/testpages/5. nuclear radiation/nuclear decay test.aspx">nuclear radiation</a> <ul> <li><a href="/testpages/5. nuclear radiation/nuclear decay test.aspx">nuclear decay</a></li> </ul> </li> <li><a href="/testpages/6. thermodynamics/thermodynamics test list.aspx">thermodynamics</a> <ul> <li><a href="/testpages/6. thermodynamics/gas laws , kinetic theory test.aspx">gas laws , kinetic theory</a></li> <li><a href="/testpages/6. thermodynamics/internal energy, absolute 0 , change of state.aspx">internal energy, absolute 0 , change of state</a></li> <li><a href="/testpages/6. thermodynamics/specific heat capacity.aspx">specific heat capacity</a></li> </ul> </li> <li><a href="/testpages/7. space/space test list.aspx">space</a> <ul> <li><a href="/testpages/7. space/astrophysics test.aspx">astrophysics</a></li> <li><a href="/testpages/7. space/cosmology.aspx">cosmology</a></li> </ul> </li> <li><a href="/testpages/8. oscillations/oscillations test.aspx">oscillations</a> <ul> <li><a href="/testpages/8. oscillations/oscillations test.aspx">oscillations</a></li> </ul> </li> </ul> </li> <li><a href="/formula analysis.aspx">formula analysis</a></li> <li><a href="/sylabus breakdown.aspx">sylabus breakdown</a></li> <asp:loginview runat="server" viewstatemode="disabled"> <anonymoustemplate> <ul class="nav navbar-nav navbar-right"> <li><a runat="server" href="~/account/register">register</a></li> <li><a runat="server" href="~/account/login">log in</a></li> </ul> </anonymoustemplate> <loggedintemplate> <ul class="nav navbar-nav navbar-right"> <li><a runat="server" href="~/account/manage" title="manage account">hello, <%: context.user.identity.getusername() %>!</a></li> <li> <asp:loginstatus runat="server" logoutaction="redirect" logouttext="log off" logoutpageurl="~/" onloggingout="unnamed_loggingout" /> </li> </ul> </loggedintemplate> </asp:loginview> </ul> <div> <asp:contentplaceholder id="maincontent" runat="server"> </asp:contentplaceholder> <footer> <p>© <%: datetime.now.year %> - synther physics</p> </footer> </div> </form> </body> </html>
try putting position: relative; , z-index on dropdown menu container
.main-navigation { position: relative; z-index: 2; ... }
Comments
Post a Comment