We Keep Coding

Dropdown - cant click on the items

I'm trying to fix my dropdown, whenever I hover over my dropdown I can't click on the items because it disappears before I can click on them. I don't know how to fix it. Here is a bit of code I have.
#navContainer {
margin: 0;
padding: 0;
padding-top: 17px;
width: 220px;
}
#navContainer ul {
margin: 0;
padding: 0;
list-style: none;
}
#navContainer ul li {
position: relative;
}
#navContainer ul li span {
display: block;
}
#navContainer ul li a {
text-decoration: underline;
color: orange;
display: block;
padding: 8px;
font-weight: bold;
font-size: large;
}
#navContainer ul ul {
position: absolute;
display: none;
}
#navContainer ul li:hover ul {
width: 80%;
position: absolute;
display: block;
left: 88px;
top: 0;
}
<div id="navContainer">
<ul>
<li><span>Home</span></li>
<li>
<span>About </span>
<ul>
</ul>
</li>
<li>
<span>Quiz's</span>
<ul>
<li>McDonalds</li>
<li>KFC</li>
<li>Burger King</li>
<li>Subway</li>
</ul>
</li>
<li><span>Info</span></li>
</ul>
</div>
This is how my page looks, if i try to move my mouse from McDonalds to KFC my navbar disapears
I tried to make it so the navbar toggles when i click on Quiz's but i couldn't make it work. I hope someone can help me fix it.

Just a couple of issues with your selectors in your CSS. I added background-color so you can see visually how they are connected. Also, the span seemed unnecessary.
#navContainer {
margin: 0;
padding: 0;
padding-top: 17px;
width: 220px;
position: relative;
}
#navContainer ul {
margin: 0;
padding: 0;
list-style: none;
background: lightgrey;
position: relative;
}
ul>li {
position: relative;
}
#navContainer ul li a {
text-decoration: underline;
color: orange;
display: block;
padding: 8px;
font-weight: bold;
font-size: large;
position: relative;
}
#navContainer ul>li>ul {
position: absolute;
display: none;
left: 100%;
width: 100%;
background-color: pink;
top: 0px;
}
#navContainer>ul>li:hover>ul {
display: block;
}
<div id="navContainer">
<ul>
<li>Home</li>
<li>
About
<ul>
</ul>
</li>
<li>
Quiz's
<ul>
<li>McDonalds</li>
<li>KFC</li>
<li>Burger King</li>
<li>Subway</li>
</ul>
</li>
<li>Info</li>
</ul>
</div>

You set the submenu ul to be visible when hovered on parent li item here: #navContainer ul li:hover ul, so as soon as mouse leaves parent li, the submenu ul visibility is set back to none.
Added a border to the li elements to demonstrate.
https://jsfiddle.net/rojqczsp/
You have to work around this. May be try making parent li elements big enough to hold the submenu ul and set the submenu ul position to absolute to keep it within the parent element's dimensions. Or something else. But hope you understand how it works.

Active Scrolling On single page Website Not working

im trying to find solutions but i cant.
my scrolling spy is not working
this is the navigation html.
<nav class="menu">
<ul>
<li><a class = "active" href="#" data-scroll = "home">Home</a></li>
<li>About</li>
<li>Our Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
My nav CSS JUST INCASE because i think there is a problem with the CSS but on thewebsite it appears just fine and the hover and active effects are working but not the on-scroll.
.menu{
z-index: 100;
position: fixed;
top: 0;
left: 25%;
width: 50%;
overflow: hidden;
background-color: transparent;
/* padding: 20px 0; */
}
.menu ul{
margin: 5px;
padding: 0;
text-align: center;
}
.menu ul li{
list-style: none;
margin:0 20px ;
display: inline;
}
.menu ul li a {
color: black;
font-size: 1em;
line-height: 1em;
text-transform: uppercase;
text-decoration: none;
padding: 3px 8px;
transition: 0.5s;
}
.menu ul li a.active{
border-bottom: 1px solid black;
border-top: 1px solid black;
color: #FFC300 ;
}
.menu ul li:hover{
border-bottom: 1px solid black;
}
/* On scroll */
.menu.scroll{
background: yellow;
}
And mY jquery/javascript. I am new to working with Jquery so i'm not too sure if this code is correct and most of the code online is not working for me.
$('nav a').on('click', function() {
var scrollAnchor = $(this).attr('data-scroll'),
scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
return false;
})
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
$('nav').addClass('fixed');
$('.content section').each(function(i) {
if ($(this).position().top <= windscroll - 20) {
$('.menu ul li a.active').removeClass('active');
$('.menu ul li a ').eq(i).addClass('active');
}
});
} else {
$('nav').removeClass('fixed');
$('.menu ul li a.active').removeClass('active');
$('.menu ul li a.first').addClass('active');
}
}).scroll();
Anyone with some good advice or a tutorial i can refer to?

i want to execute a function every time i click on a button Using JQuery

I want to make a dynamic list of colors using jQuery and CSS (and ofc php but this is not related to my issue).
There is a problem when they click on 'choose a color' button my color list will appear and if user click on any of them others will get a display none and here is a problem if user try to change a selected color it doesn't work!
<div class="onfocus">
<div class="color-select">
<ul class="ul-color">
<li id="slect-color">choose a color</li>
<li>color1</li>
<li>color2</li>
<li>color3</li>
<li>color4</li>
<li>color5</li>
</ul>
</div>
</div>
$('.ul-color li').on('click',function(){
$(this).css('display','none');
for(var x = 0 ; x < 10; x++){
$('.ul-color li').eq(x).css('left', 90*x+'px');
}
$('.ul-color li').click(function(){
$('.ul-color li').css('display','none');
$(this).css('display','block');
$(this).css('left','20px');
});
});
.onfocus{
position: absolute;
left : 50%;
top :50%;
width: 1700px;
height: 300px;
background-color: #2c3e50;
transform: translate(-50%,-50%);
}
.color-select{
margin-top: 20px;
margin-left: 20px;
}
.color-select ul{
list-style: none;
max-width: 70px;
display: flex;
}
.color-select ul li{
margin-right: 10px;
padding: 10px;
position: absolute;
transition: .5s;
}
.color-select ul li:nth-child(1){
z-index: 10;
background-color: black;
border-radius: 5px;
}
.color-select ul li+li{
left: 20px;
}
.color-select ul li a{
color : #fff
}
.color-select ul li:hover{
background-color: #e74c3c;
border: none;
border-radius: 5px;
}
Before any click :
pic-1
After i clicked on 'choose a color' :
pic-2
if i select any color others will get a display none except the one that we selected and it will get a 'left 20px' too:
pic-3
so now if i want to change my selected color i have to click on my previous one and it should be something like 2nd picture but nothing gonna happen
pic-4

Try this,
HTML
<div class="onfocus">
<div class="color-select">
<ul class="ul-color">
<li id="slect-color">choose a color</li>
<li class="color">color1</li>
<li class="color">color2</li>
<li class="color">color3</li>
<li class="color">color4</li>
<li class="color">color5</li>
</ul>
</div>
</div>
CSS
.ul-color{
list-style-type:none;
display:flex;
}
.ul-color li{
margin:5px 10px;
border-radius:5px;
background:#333;
display:none;
}
.ul-color li a{
text-decoration:none;
display:inline-block;
padding:10px 15px;
color:#FFF;
border-radius:5px;
}
.ul-color li a:hover{
background:#e74c3c;
}
#slect-color{
display:inline-block;
}
Javascript
$('#slect-color').on('click',function(){
$('ul li').show();
});
$('.color').on('click',function(){
$('.color').hide();
$(this).css('display','block');
});

This is a bit too complex to handle everything with display: block and display: none. I slightly changed your code to add a few classes:
ul.initial is you initial state, where "Choose a color" is visible
ul.opened is when all colors are shown, for one to be picked
li.selected is the color you've picked
What you want is that any li shows up if:
We're in the initial state, and the li is the "Choose a color" one
We've opened the list, and the li is NOT the "Choose a color" one
The li is the one selected
Here's the CSS part that is interesting for you:
.color-select ul.initial #select-color,
.color-select ul.opened li:not(#select-color),
.color-select ul li.selected {
display: block;
}
And below, a working snippet based on your code, with my improvements:
$('.ul-color li').on('click',function() {
var list = $('.ul-color');
if (!list.hasClass('opened')) {
// Show all colors
$('.ul-color li').removeClass('selected');
} else {
// A color has been picked
$(this).addClass('selected');
}
list.toggleClass('opened');
list.removeClass('initial');
});
.onfocus{
/* Be careful, this part one changed only to be visible in the snippet */
position: absolute;
width: 100%;
height: 300px;
background-color: #2c3e50;
}
.color-select {
margin-top: 20px;
margin-left: 20px;
}
.color-select ul {
list-style: none;
display: flex;
}
.color-select ul li {
margin-right: 10px;
padding: 10px;
display: none;
z-index: 10;
background-color: black;
border-radius: 5px;
}
.color-select ul.initial #select-color,
.color-select ul.opened li:not(#select-color),
.color-select ul li.selected {
display: block;
}
.color-select ul li a {
color : #fff
}
.color-select ul li:hover{
background-color: #e74c3c;
border: none;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="onfocus">
<div class="color-select">
<ul class="ul-color initial">
<li id="select-color">choose a color</li>
<li>color1</li>
<li>color2</li>
<li>color3</li>
<li>color4</li>
<li>color5</li>
</ul>
</div>
</div>

How can I animate border-radius of li element with jquery?

I just started doing some jquery and php and I followed the tutorial from Udemy on how to build some php web site. Now I want to animate the li elements so that their border-radius changes on mouseenter().
Here is my code:
$(document).ready(function() {
$('.list_el').mouseenter(function() {
$(this).animate(borderRadius(300), 200);
});
function borderRadius(radius) {
return {
borderTopLeftRadius: radius,
borderTopRightRadius: radius,
borderBottomLeftRadius: radius,
borderBottomRightRadius: radius,
};
}
});
#nav {
margin: -27px 0 0;
margin-top: 50px;
}
#nav ul {
display: inline-block;
text-align: left;
list-style: none;
}
#nav ul li {
display: inline-block;
width: 90px;
height: 44px;
margin: 0 10px;
text-align: center;
}
#nav ul li a {
display: block;
padding: 10px 15px;
color: white;
border: solid 2px white;
background: #353535;
outline: solid 2px #353535;
text-decoration: none;
}
#nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
<div id="nav">
<ul id="my_navbar">
<li class="list_el">Home
</li>
<li class="list_el">Team
</li>
<li class="list_el">Menu
</li>
<li class="list_el">Contact
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
But when I enter the mouse on any of the li element (menu,contact..) it doesn't animate, I mean when I press F12 and target the li it shows me that the border-radius is changing but on the website it doesn't curve the border. So what am I doing wrong?
Just in case :

The animation works, it just has no visual effect: your a elements contains all the style, you'll see some change if you animate the a's border-radius or if you put overflow: hidden for list_el
$('.list_el').mouseenter(function() {
$(this).find("a").animate(borderRadius(300), 200);
});
this will work for instance
http://codepen.io/anon/pen/PGPrgY

You should use mouse enter and leave event together
$('.list_el').on("mouseenter", function() {
$(this).find("a").animate(borderRadius(300), 200);
}).on("mouseleave", function() {
$(this).find("a").animate(borderRadius(0), 200);
});

On any modern browser, you can also achieve this transition with simply:
.list_el:hover a {
border-radius: 300px;
transition: 0.2s;
}
That animates the border-radius of the contained a element over a period of 200ms when the .list_el containing the a is hovered.
Note that this assumes you were planning to add a mouseleave handler that undoes the border-radius. It doesn't apply if you were planning to leave the updated radius in place when the mouse leaves the element.
Example using 1s rather than 0.2s so it's more obvious:
#nav {
margin: -27px 0 0;
margin-top: 50px;
}
#nav ul {
display: inline-block;
text-align: left;
list-style: none;
}
#nav ul li {
display: inline-block;
width: 90px;
height: 44px;
margin: 0 10px;
text-align: center;
}
#nav ul li a {
display: block;
padding: 10px 15px;
color: white;
border: solid 2px white;
background: #353535;
outline: solid 2px #353535;
text-decoration: none;
}
#nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
.list_el:hover a {
border-radius: 300px;
transition: 1s;
}
<div id="nav">
<ul id="my_navbar">
<li class="list_el">Home
</li>
<li class="list_el">Team
</li>
<li class="list_el">Menu
</li>
<li class="list_el">Contact
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

List items not sliding for new items

I have a nested unordered list that I want to expand accordion-like for new sub-items when a parent is clicked.
The functionality is working fine, but the parent list isn't sliding down to accomodate the newly visible sub-list (so the sub-list just slides on top of the unmoving parent list). I tried this on a fiddle and strangely it worked fine there. I'm guessing it has something to do with the CSS I'm using to format the list?
The code....
HTML:
<ul>
<li>
news
<ul>
<li>2013</li>
<li>2012</li>
<li>2011</li>
</ul>
</li>
<li>scores</li>
<li>standings</li>
<li>the ddl</li>
<li>records</li>
<li>teams</li>
</ul>
Javascript:
$(document).ready(function() {
$('#nav-bar ul li').on('click', function() {
$(this).children().slideDown('fast');
$(this).siblings().children().slideUp('fast');
});
});
CSS:
#nav-bar { /*left bar*/
float: left;
width: 110px;
text-align: center;
height: inherit;
}
#nav-bar ul { /*main menu*/
list-style-type: none;
text-align: left;
padding: 0px;
}
#nav-bar ul li { /*main menu item*/
height: 75px;
background-color: #666;
color: #ccc;
border-bottom: 3px solid #333;
}
#nav-bar ul li ul { /*sub-menu*/
display: none;
}
#nav-bar ul li ul li { /*sub-menu item*/
height: 35px;
background-color: #aaa;
color: #666;
border-bottom: 1px solid #333;
}

you fixed an height where it should be , IMHO, a min-height:
http://jsfiddle.net/7VPG6/36/
#nav-bar > ul> li { /*main menu item*/
min-height: 75px;
background-color: #666;
color: #ccc;
border-bottom: 3px solid #333;
}
take a look at : http://www.w3.org/TR/css3-selectors/