We Keep Coding

My drop down menu isn't dropping down (its appearing sideways) & how to sticky the bar

I've created a navigation bar, but the drop down isn't quiet functioning properly. the drop down isn't a list downwards, but rather drops down sideways (messing up the entire navbar). What could the issue be?
I also have a follow up question on how I can sticky the nav bar. So, when a user scroll down, there is a small animation of a background fade in. Then if u scroll back up, it fades out.
#import url('https://fonts.googleapis.com/css?family=Roboto');
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
header {
height: 100vh;
}
.top-nav {
position: fixed;
width: 74%;
left: 50%;
margin-left: -37%;
line-height: 60px;
background-color: red;
}
.top-nav ul {
float: right;
margin: 0;
padding-right: 42px;
list-style: none;
}
.top-nav ul li {
display: inline-block;
padding: 16px 32px;
}
.top-nav ul li a {
font-family: Roboto, arial;
font-size: 16px;
font-weight: 500;
color: #fff;
text-decoration: none;
display: block;
}
.top-nav ul li ul {
display: none;
}
.top-nav ul li:hover ul {
display: block;
}
.top-nav-logo {
position: fixed;
width: 187px;
height: 50px;
float: left;
padding: 0;
margin: 16px 48px;
background-color: blue;
}
<header>
<div class="top-nav">
<div class="top-nav-logo">
<img src="/logo.png">
</div>
<ul>
<li>
Section 1
</li>
<li>
Section 2
</li>
<li>
More
<ul>
<li>More 1</li>
<li>More 2</li>
</ul>
</li>
<li>
Section 3
</li>
</ul>
</div>
</header>

Try this css to mange drop down and apply position relative for ul li(dropdown)
.top-nav ul li ul {
display: none;
position: absolute;
background-color: red;
}

First u need to give position: relative to list which has ul inside it, then apply position: absolute to the child ul. Add the following code in the style.css, it will work
.top-nav ul ul {
position: absolute;
top: 50px;
left: 30px;
float: left;
width: 100%;
padding: 0;
}
.top-nav ul li:nth-child(3) {
position: relative;
}
.top-nav ul ul {
width: 100%;
display: inline-block;
}
.top-nav ul ul li {
padding: 0;
}

Z-Index not working for drop down navbar

I know similar questions have been asked to do with the z index not working for a dropdown, but all of these have either not worked for my case, or were not applicable for one reason or another.
Anyway, I have an issue that whenever I hover over the main block to trigger the dropdown menu, when it does it appears behind the div that I have in front of it. (Not sure if it matters, but when I hover over an option on the dropdown, it changes colour as it is supposed to do when hovered over and it then jumps in front of the div like it was supposed to do initially).
I am not sure what is causing this as I have tried messing around with the z-index and positions in the css and just can't get it to work, and it would be a great help if someone could find out why this isn't working? I will post the relevant code below.
Thanks
P.S. I have tried in multiple browsers and this problem persists.
HTML:
<nav id="navdiv">
<ul class="navlinks">
<li><a class="active" href="portfolio.html">Home</a></li>
<li><a class="About Me" href="about.html">About me</a></li>
<li class="dropdown">Programming
<div class="dropdown-content">
Python Programs
Android Programs
Other Programs
</div>
</li>
<li><a class="contact" href="contact.html">Contact Me</a></li>
<li><a class="Course Content" href="coursecontent.html">Course Content</a></li>
</ul>
</nav>
<div1>
<p>PLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDER</p>
</div1>
css:
#navdiv {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
}
.navlinks {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
display: inline;
}
li a, .dropbutton {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.active {
background-color: #4CAF50;
}
li a:hover, .dropdown:hover .dropbutton {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #30313;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: relative;
z-index: 1;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: red;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
div1 {
color: white;
font-family: "Times New Roman", Times, Sans-Serif;
text-size: 16px;
z-index: -1;
width: 100%;
top: 0;
position: relative;
height: 200px;
}

here is my revision, i put a blue background for seen correct over menu to content.
And there is no element called div1 in DOM html.
i put #navdiv at top of zIndx, because is container of nav.
https://jsfiddle.net/exxe4ksc/
CSS:
#navdiv {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
position:relative;
z-index:100;
}
.navlinks {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #999;
}
li {
display: inline;
}
li a, .dropbutton {
display: inline-block;
color: white;
background:#440099;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.active {
background-color: #4CAF50;
}
li a:hover, .dropdown:hover .dropbutton {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #30313;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: relative;
z-index: 1;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: red;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
div#content {
color: white;
font-family: "Times New Roman", Times, Sans-Serif;
text-size: 16px;
z-index: 1;
width: 100%;
top: 0;
position: relative;
height: 200px;
}
HTML:
<nav id="navdiv">
<ul class="navlinks">
<li><a class="active" href="portfolio.html">Home</a></li>
<li><a class="About Me" href="about.html">About me</a></li>
<li class="dropdown">Programming
<div class="dropdown-content">
Python Programs
Android Programs
Other Programs
</div>
</li>
<li><a class="contact" href="contact.html">Contact Me</a></li>
<li><a class="Course Content" href="coursecontent.html">Course Content</a></li>
</ul>
</nav>
<div id ="content">
<p>PLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDER</p>
</div>

It's working just fine as is - you're font off the get go is white though on white background so you don't see it.
Here is a link to a working version.
http://codepen.io/hoonin_hooligan/pen/PpqxBL
.dropdown-content a {
color: #000;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: relative;
z-index: 1;
}

The problem is not the z-index, try with other color on you hover dropdown like this code:
.dropdown:hover .dropdown-content {
display: block;
background: blue;
}

responsive navbar using display:none still shows even it is meant to show when the screen resized using media query

i'm trying to fix my responsive navigation bar. supposed to be, when the screen is resized smaller, the navigation will change to a single button which is "menu" and when clicked, it will toggle the navigation vertically. the problem is, even at full screen size, the menu still shows up. this should only appear when screen was changed. thank you
HTML:
<div class="nav">
<ul>
<li ><a class="active" href="index.php">Home</li>
<li >About us
<ul>
<li>Company Profile</li>
<li>Management</li>
<li>Testimonials</li>
<li>Services</li>
</ul>
</li>
<li >Contacts</li>
<li >Careers</li>
<li >Blog
<ul>
<li>Tips</li>
<li>Success Story</li>
</ul>
</li>
<li class="contact">Login</li>
</ul>
<div class="handle"> Menu </div>
</div>
CSS:
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
MEDIA
********************************************/
.handle.hidden {
width: 100%;
background: white;
text-align: left;
box-sizing: border-box;
padding: 15px 10px;
cursor: pointer;
color: white;
display: none;
}
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.showing { max-height: 20em; }
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
.handle{
display: block;
background-color: rgba(0,0,0,0.8);
}
}
SCRIPT:
<script type="text/javascript">
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
</script>

With your current code you would need to add the class .hidden dinamically to the .menu html element which is not very convenient but there is a simpler way to make the menu disappear. Just try:
.handle { /* now we don't use the .hidden class */
width: 100%;
background: white;
text-align: left;
box-sizing: border-box;
padding: 15px 10px;
cursor: pointer;
color: white;
display: block;
}
...
/* inside media query */
#media screen and (min-width: 650px) {
.handle {
display: none; /* this hides the menu on bigger screens */
background-color: rgba(0,0,0,0.8);
}
}

Why does my Horizontal List disappear with this code?

I got this code from JavaScript Kit and it's not working properly... Their site isn't very active so I posted here instead. The list is displaying correctly, however, if I hover over the menu(main menu, submenus, etc) and then hover out, the entire menu disappears. When you hover back over the main menu, it reappears. The rest of the submenus appear correctly. Any ideas?
JS:
var cssmenuids=["navigation"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
var csssubmenuoffset=-1 //Offset of submenus from main menu. Default is 0 pixels.
function createcssmenu2(){
for (var i=0; i<cssmenuids.length; i++){
var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML=" "
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.style.zIndex=100
this.getElementsByTagName("ul")[0].style.visibility="visible"
this.getElementsByTagName("ul")[0].style.zIndex=0
}
ultags[t].parentNode.onmouseout=function(){
this.style.zIndex=0
this.getElementsByTagName("ul")[0].style.visibility="hidden"
this.getElementsByTagName("ul")[0].style.zIndex=100
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", createcssmenu2, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu2)
HTML:
<div id="navigation">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Rosters
<ul>
<li>Counter-Strike: Source</li>
<li>Team Fortress 2</li>
<li>Black Ops 2</li>
<li>Complete Roster</li>
</ul></li>
<li>Matches
<ul>
<li>Schedule</li>
<li>Results</li>
</ul></li>
<li>Servers</li>
<li>Recruiting</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
CSS:
#navigation {
background: url(images/navigation_bg.gif) repeat-x;
border-top: #666666;
border-bottom: #333333;
height: 59px;
margin: 0px;
padding: 0px;
text-align: center;
line-height: 59px;
}
#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
z-index: 100;
}
#navigation ul li {
position: relative;
display: inline-block;
float: left;
}
#navigation ul li a {
display: bock;
width: 160px;
padding: 2px 8px;
border: 0px;
text-decoration: none;
background: url(images/navigation_item_bg.gif) repeat-y left;
color: #737373;
font-size: 14px;
font-weight: bold;
}
#navigation ul li.last a {
display: bock;
width: 160px;
padding: 2px 8px;
border: 0px;
text-decoration: none;
background: url(images/navigation_item_bg.gif) repeat-y left, url(images/navigation_item_bg.gif) repeat-y right;
color: #737373;
font-size: 14px;
font-weight: bold;
}
#navigation ul li ul {
top: 0;
left: 0;
border-top: 1px solid #202020;
position: absolute;
display: block;
visibility: hidden;
zIndex: 100;
}
#navigation ul li ul li {
display: inline;
float: none;
margin: 0px;
padding: 0px;
}
#navigation ul li ul li a {
width: 175px;
font-weight: bold;
text-decoration: none;
background: #000;
border-width: 0px 1px;
padding: 0px 5px;
display: block;
}
#navigation ul li ul li a:hover {
background: #333333;
}

That script needs to exclude the topmost div and ul of the menu from hiding:
if (this !== ultags[0].parentNode) {
this.style.zIndex = 0;
this.getElementsByTagName("ul")[0].style.visibility = "hidden";
this.getElementsByTagName("ul")[0].style.zIndex = 100;
}
jsfiddle

Create a custom drop down select like the one used on twitter when user logs out

I'm trying to create custom drop-down select like the one used on twitter when user logs out and till now I did not succeed :
This is what I achieved but is not working on IE9 :|
http://fiddle.jshell.net/Hz2JH/
<ul id="main">
<li class="username" tabindex="1" >
<a>USER</a>
<ul class="curent_buser">
<li class="help">Help</li>
<li class="logoff">Log Off</li>
</ul>
</li>
</ul>
ul#main {
color: 232323;
width: 120px;
border:2px solid #ccc;
list-style: none;
font-size: 12px;
letter-spacing: -1px;
font-weight: bold;
text-decoration: none;
height:30px;
background:#f1f1f1;
}
ul#main:hover {
opacity: 0.7;
text-decoration: none;
}
#main > li{
background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat;
outline:0;
padding:10px;
}
ul#main li ul {
display: none;
width: 116px;
background: transparent;
border-top: 1px solid #eaeaea;
padding: 2px;
list-style: none;
margin: 7px 0 0 -3px;
}
ul.curent_buser li a {
color: gray;;
cursor: pointer;
}
ul.curent_buser{
background:lime !important;
}
ul#main li ul li a {
display: block;
padding: 5px 0;
position: relative;
z-index: 5;
}
#main li:focus ul, #main li.username:active ul {
display: block;
}
.help{
background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ;
height: 25px;
margin-bottom: 2px;
border-bottom: 1px solid white;
}
.help:hover{
background: #f4f4f4;
}
.logoff{
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ;
height: 25px;
}
.logoff:hover{
background: #f4f4f4 ;
height: 25px;
}
.help a,.logoff a{
color:gray;
font-family: Museo700Regular,sans-serif;
letter-spacing: 0;
font-size: small;
}
​
So how can I build a custom select like the one used on twitter?

This works for me, doesnt require a click to get the drop down. Just add li elements to put the custom images on each menu item. Straight CSS and works on all browsers I have tested, if you find a browser that doesnt work let me know please.
#addMenu, #addMenu ul {
list-style: none;
}
#addMenu {
float: left;
}
#addMenu > li {
float: left;
}
#addMenu li a {
display: block;
padding: 0 8px;
text-decoration: none;
}
#addMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#addMenu ul li a {
width: 70px;
color: #000;
font-weight: bold;
}
#addMenu li:hover ul.noJS {
display: block;
background: #ccc;
color: #000;
}
#addMenu ul li:hover a {
background: #ddd;
}
HTML
<ul id='addMenu'>
<li>
<a href='#'>MENU</a>
<ul class='noJS'>
<li><a href='URL'>Option1</a></li>
<li><a href='URL'>Option2</a></li>
<li><a href='URL'>Option3</a></li>
<li><a href='URL'>Option4</a></li>
</ul>
</li>
</ul>