Submenus disappear too quickly

HTML-CSS
1

I am trying to make a drop down menu and have been following this video but trying to implement this on his other video below on how to create a loginsystem. Something seems to be preventing my drop down menus to be displayed. Whenever I go further than 2 sub menus, the menus will disappear quickly… I am new here so not sure how the format system works… Do I need to format my code but doing the backticks?

Here is my html code:

     <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="#">Primer Level</a>
           <ul>
              <li><a href="#">Level 1</a></li>
              <li><a href="#">Level 2</a></li>
               <li><a href="#">Level 3</a></li>
            </ul>
        </li>
        
        <li><a href="signup.php">Signup</a></li>
        <li><a href="update.php">Update Profile</a></li>
        <li><a href="reset.php">Reset Password</a></li>
        <li><a href="qa.php">Q/A</a>
           <ul>
             <li><a href="contact.php">Contact Us</a></li>
        <li><a href="donation.php">Donation</a></li>
        <li><a href="maintenance.php">Status</a></li>
        <li><a href="review.php">Review</a></li>
        <li><a href="activate.php">Activate Email</a></li>
        <li><a href="bulletin.php">Bulletin</a></li>


           </ul>
         </li>

Here is my CSS:

body {
background-color: #ccc;

}

header nav {
width: 100%;
height: 150px;
background-color: #fff;
}

header nav ul {
float: left;

}

header nav ul li {
float: left;
list-style:none;
position: relative;
padding-top: 50px

}

header nav ul li a{
font-family: arial;
font-size: 14px;
color: #111;
font-weight: bold;
display: block;
text-decoration: none;

}

header nav ul li ul{
display: none;
position: absolute;

background-color: #fff;
padding: 10px;
border-radius: 0px 0px 4px 4px;

}

header nav ul li:hover ul{
display: block;

}

header nav ul li ul li {
width: 180px;
border-radius: 4px;
}

header nav ul li ul li a {
padding: 8px 14px;
}

header nav ul li ul li a:hover {
background-color: #f3f3f3;
}

At the moment, it the sub menus is not showing below this point:

I was planning to take a picture of it but it is hard to do when I only have one mouse…

2

You can try to put all your relevant html/css code into a codepen or jsfiddle and share the link with us. This way you’ll probably get quicker suggestions on how to solve your problem.

3

Thanks and appreciate your quick repy! Is there a way to take a snapshot of the screen while not using the mouse with sniptool?

4

How can we see the above by just providing a snapshot? Just take your all your header code and css for that part and place it somewhere we can test and SEE whats going on.

5

I have got the link here but it looks okay when viewing it from pencode but doesn’t look quite right on my browser…

6

what browser are you using for testing?

7

I am using chrome and IE … I might know roughly where is the problem but can’t quite fix it because in the other tutorial in loginsystem, he has a nav bar and after changing the

header nav {
width: 100%;
height: 150px;
background-color: #fff;
}

… if I increase the height, it seems to fit the submenus but it just doesn’t look nice because the nav bar tends to push down the screen too much…

image
image1118×669 16.7 KB

For some reason, if I get rid of the reset stylesheet, especially this paragraph, then it does work…

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

Should that have made any difference?