Navbar Dropdown Issue

Navbar Dropdown Issue - html

I'm just starting out with web coding and I don't have much knowledge with css. I think I made some mistakes and I hope I can find a solution here. The issue is when dropdown item opens, "Add New" slipping sideways. How i can fix this problem? Here is my HTML an CSS code. When i write position: absolute; dropdown menu is dissappering too. I'm
nav {
background-color: #c1c1c1;
height: 75px;
}
nav .container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
nav .logo img {
height: 56px;
width: 56px;
padding-top: 8px;
}
.logo {
width: 30%;
}
.nav-items {
display: flex;
}
.menu {
float: right;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.menu ul li {
float: left;
padding-left: 10px;
}
.menu ul li a {
padding: 8px;
color: black;
text-decoration: none;
}
.menu-item-has-children {
position: relative;
display: inline-block;
}
.menu-item-has-children ul {
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.menu-item-has-children ul li {
float: none;
}
.menu-item-has-children ul li a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.menu-item-has-children:hover ul {
display: block;
}
.menu-item-has-children:hover ul li a:hover {
background-color: #f1f1f1
}
<!DOCTYPE html>
<html>
<head>
<title>NAVBAR</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="nav-first">
<div class="container">
<div class="nav-items">
<div class="logo">
<img src="https://www.postakutun.com/wp-content/uploads/2020/08/cropped-logo-png-120p-2.png" alt="Logo">
</div>
<div class="menu">
<ul class="menu-ul">
<li>Home</li>
<li>Privacy</li>
<li>Contact</li>
<li class="menu-item-has-children">Profile
<ul>
<li>My Profile</li>
<li>Security</li>
<li>Options</li>
</ul>
</li>
<li>Add New</li>
</ul>
</div>
</div>
</div>
</nav>
</body>
</html>

Related

Hover effect does not work on small screen

When I resize the screen for mobile devices and I hover over links in menu, nothing happens. I don't understand what is wrong. Funny thing is, when I click on the link, the color changes to what it should be when I hover. I tried hover over li and a and both are non functional. Did I miss something?
<nav id="myNav">
<div class="menu-icon" onclick="myFunction()">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<div class="top-nav">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Work</li>
</ul>
</div>
</nav>
nav {
position: fixed;
width: 100%;
line-height: 60px;
transition: all 1.5s;
}
nav ul {
line-height: 60px;
list-style: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
.menu li:hover {
background-color: rgba(240, 255, 255, 0.3);
}
nav ul li {
display: inline-block;
padding: 16px 40px;
}
.menu a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
#media only screen and (max-width: 769px) {
nav ul {
max-height: 0px;
background: #000;
}
.show-menu {
max-height: 400px;
}
.menu li:hover {
background-color: azure;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
text-align: center;
display: block;
}
nav ul li a {
display: block;
font-size: 26px;
}

Problem is when it hits the media size your max list height is 0px. So it will not render Visibly
#media only screen and (max-width: 769px) {
nav ul {
max-height: 0px;
background: #000;
}
Remove the max-height: 0px;
function myFunction() {
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
transition: all 1.5s;
}
nav ul {
line-height: 60px;
list-style: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
.menu {
background-color: lightgray;
}
.menu li:hover {
background-color: green;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
}
.menu a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
#media only screen and (max-width: 769px) {
nav ul {
background: #000;
}
.show-menu {
max-height: 400px;
}
.menu li:hover {
background-color: red;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
text-align: center;
display: block;
}
nav ul li a {
display: block;
font-size: 26px;
}
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<nav id="myNav">
<div class="menu-icon" onclick="myFunction()">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<div class="top-nav">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Work</li>
</ul>
</div>
</nav>

Dropdown menu did not work after I resize the page

I am using CSS to make drop-down menu. When I resized the page, the drop-down menu didn't work. It didn't do anything when I click on the menu. Also I would like to know that when I resize my page, the About menu from the nav bar does not show after resizing. I do not know how to fix the size when I resize the page.
This is my first time using CSS and HTML. I would love to learn from you guys here.
This is my HTML code
<head>
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<link href="css/pj2.css" rel="stylesheet" type"text/css">
<meta name="viewport" content="width-device-width, initial-scale=1">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset= "UTF-8">
<title>KeeNok</title>
</head>
<body>
<div class="wrap">
<!--Responsive menu-->
<div class="topnav" id="myTopnav">
Home
<div class="dropdown">
<button class="dropbtn">Events
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Past Events
Future Events
</div>
</div>
About
☰
</div>
<!--Menu-->
<div id="main_menu">
<div class="logo_area">
<img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\graphics\KeeNokLogo.jpg" alt="logo">
</div>
<div class="inner_main_menu">
<ul id="menu">
<li>Events
<ul>
<li>Past Events</li>
<li>Future Events</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
</div>
<!--Popup Photos-->
<div class="thumbs">
<div id="Mian Kham" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Mian Kham.png" alt="Mian Kham"></div>
<div id="Gai Tod" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Gai Tod.png" alt="Gai Tod"></div>
<div id="Tom Khao Pod" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Tom Khao Pod.png" alt="Tom Khao Pod"></div>
</div>
<footer></footer>
</div>
</body
This is my CSS code
body {
margin: auto;
background: rgba(255, 255, 255, 0.945);
font-family: 'Ubuntu', sans-serif;
overflow: auto;
height:100%;
}
.wrap {
position: fixed;
top: 0;
left: 0;
border: 20px solid #9fd7fd;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.inner_main_menu {
margin: 0 auto;
width: 1300px;
}
.inner_main_menu ul{
margin: 60px;
padding: 0;
list-style: none;
text-align: right;
padding-top: 30px;
z-index: 1;
}
.inner_main_menu ul li{
float: none;
display: inline-block;
position: relative;
}
.inner_main_menu ul li:nth-child(1){
float: left;
}
.inner_main_menu ul li a {
color: #262626;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 10px 20px;
}
.inner_main_menu ul li a:hover {
color: #eb3332;
}
.inner_main_menu ul li ul {
position: absolute;
top: 40px;
left: 0;
width: 200px;
padding: 0;
display: none;
margin: 0;
}
.inner_main_menu ul li:hover ul {
display: block;
}
.inner_main_menu ul li ul li{
float: left;
}
.inner_main_menu ul li ul li a{
font-size: 15px;
}
#main_menu {
width: 100%;
position: relative;
}
.logo_area img{
max-width: 300px;
position: absolute;
left: 50%;
top: 0;
content: " ";
margin-left: -150px;
text-align: center;
}
#main_menu:after {
content: "";
display: table;
clear: both;
}
.thumbs {
display: flex;
justify-content: space-between;
margin: 80px 0;
}
.thumbs img{
max-width: 300px;
}
.topnav {
background-color:#555d61;
overflow: hidden;
}
.topnav a {
float:left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.active {
color: black;
}
.topnav .icon {
display: none;
}
.dropdown {
float:left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
padding: 14px 16px;
}
.dropdown-content {
display: none;
position: absolute;
background-color:#555d61;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover {
background-color: #aaadad;
color: black;
}
.dropdown:hover .dropbtn {
background-color: #aaadad;
color: black;
}
.dropdown-content a:hover {
background-color: #aaadad;
color: black;
}
.dropdown:hover .dropdown-content {
display:block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
This is how my page look like before resizing
This is my page looks like after resizing

I see in your CSS that there's a comment which reads:
The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon
I think you are missing the JavaScript you need to add the class to your navigation.
It will look something like this:
const icon = document.querySelector(".icon")
const nav = document.querySelector(".topnav")
icon.onclick = function() {
nav.classList.toggle('responsive');
}

Responsive design topnavigation

Im trying to get my navigationbar in my media quires to display its sublist as normal under the parent element "checkbox", though the submenu is placed on top of the rest of the list, and are not "pushing" the rest of the list down as i want. Im a beginner with html and css so i have problably made some stupid misstake, but would be very thankful for any help in the matter, i really cant figure out what i´ve done wrong..
The problem is related to the media quires max-width: 576px.
nav {
width: 17%;
float: left;
padding-top: 4px;
margin-left: 0.5em;
margin-right: 0.6em;
}
/*210/1200*/
nav ul {
list-style: none;
padding-left: 2.14%;
}
/*3/140? = 0.125% ändra padding til procent här?*/
nav ul ul {
margin-left: 5%;
}
nav li {
margin-top: 2px;
display: block;
}
nav a {
display: block;
border: 1px solid grey;
padding: 4px;
text-decoration: none;
color: white;
border-radius: 5px 5px 5px 5px;
background-color: #225d66;
}
/*display block gör att länkarna fyller ut hela bredden för kolumen*/
nav a:link {
background-color: #225d66;
}
nav a:hover {
background-color: #22a4b3;
}
nav ul li ul li {
padding-top: 1px;
display: block;
}
#lokalnav a {
background-color: #2e7d87;
}
#lokalnav a:hover {
background-color: #3fa9b5;
}
nav #thisPage:before {
content: "> ";
}
nav #thisPage {
color: yellow;
}
nav #thisSection:before {
content: "> ";
}
nav #thisSection {
color: yellow;
}
.submenu {
cursor: pointer;
display: block;
}
.submenu ul {
display: none;
}
.submenu input {
display: none;
}
.submenu input:checked~ul {
display: block;
}
#media screen and (max-width: 620px) {
nav {
float: none;
width: 100%;
margin-top: -22px;
margin-left: 1px;
}
nav ul li {
display: inline-block;
position: relative;
}
nav a {
text-align: center;
border-radius: 0px 0px 5px 5px;
padding: 7px 12px 7px 12px;
}
#lokalnav {
position: absolute;
z-index: 1;
}
nav ul li ul li {
margin-top: 0px;
margin-bottom: 0;
}
nav ul li a:not(:only-child):after {
content: " ▾";
padding-left: 6px;
}
#dropdownbtn {
padding-top: 4px;
}
.topnav a {
padding-right: 2px;
}
main {
margin: 2px;
}
header {
height: 170px;
margin-bottom: 0px;
padding-bottom: 0px;
}
#coursenotes {
float: none;
font-size: 11px;
width: 100%;
margin-bottom: -70px;
font-size: 12px;
padding-left: 10px;
}
#content {
float: none;
width: 100%;
}
#coursenotes a:hover {
font-size: 10px;
}
}
#media screen and (max-width:576px) {
header {
background-size: contain;
}
#steps figure {
float: none;
}
}
#media screen and (max-width: 480px) {
nav ul li {
display: block;
width: 100%;
}
}
<nav>
<ul>
<li>Hem</li>
<li><label class="submenu"><a id="dropdownbtn">Ämnen</a><input type="checkbox">
<ul id="lokalnav">
<li>Matte</li>
<li>Svenska</li>
<li>Engelska</li>
<li>NO</li>
<li>Bild</li>
<li>SO</li>
</ul>
</label>
</li>
<li>Mina Inlämningar</li>
<li>Läxhjälp</li>
<li>Kontakt</li>
</ul>
</nav>

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<br>
</body>
</html>

remove position:absolute from below class in media query. also check updated code snippet
#lokalnav {
z-index: 1;
}
nav {
width: 17%;
float: left;
padding-top: 4px;
margin-left: 0.5em;
margin-right: 0.6em;
}
/*210/1200*/
nav ul {
list-style: none;
padding-left: 2.14%;
}
/*3/140? = 0.125% ändra padding til procent här?*/
nav ul ul {
margin-left: 5%;
}
nav li {
margin-top: 2px;
display: block;
}
nav a {
display: block;
border: 1px solid grey;
padding: 4px;
text-decoration: none;
color: white;
border-radius: 5px 5px 5px 5px;
background-color: #225d66;
}
/*display block gör att länkarna fyller ut hela bredden för kolumen*/
nav a:link {
background-color: #225d66;
}
nav a:hover {
background-color: #22a4b3;
}
nav ul li ul li {
padding-top: 1px;
display: block;
}
#lokalnav a {
background-color: #2e7d87;
}
#lokalnav a:hover {
background-color: #3fa9b5;
}
nav #thisPage:before {
content: "> ";
}
nav #thisPage {
color: yellow;
}
nav #thisSection:before {
content: "> ";
}
nav #thisSection {
color: yellow;
}
.submenu {
cursor: pointer;
display: block;
}
.submenu ul {
display: none;
}
.submenu input {
display: none;
}
.submenu input:checked~ul {
display: block;
}
#media screen and (max-width: 620px) {
nav {
float: none;
width: 100%;
margin-top: -22px;
margin-left: 1px;
}
nav ul li {
display: inline-block;
position: relative;
}
nav a {
text-align: center;
border-radius: 0px 0px 5px 5px;
padding: 7px 12px 7px 12px;
}
#lokalnav {
z-index: 1;
}
nav ul li ul li {
margin-top: 0px;
margin-bottom: 0;
}
nav ul li a:not(:only-child):after {
content: " ?";
padding-left: 6px;
}
#dropdownbtn {
padding-top: 4px;
}
.topnav a {
padding-right: 2px;
}
main {
margin: 2px;
}
header {
height: 170px;
margin-bottom: 0px;
padding-bottom: 0px;
}
#coursenotes {
float: none;
font-size: 11px;
width: 100%;
margin-bottom: -70px;
font-size: 12px;
padding-left: 10px;
}
#content {
float: none;
width: 100%;
}
#coursenotes a:hover {
font-size: 10px;
}
}
#media screen and (max-width:576px) {
header {
background-size: contain;
}
#steps figure {
float: none;
}
}
#media screen and (max-width: 480px) {
nav ul li {
display: block;
width: 100%;
}
}
<nav>
<ul>
<li>Hem</li>
<li><label class="submenu"><a id="dropdownbtn">Ämnen</a><input type="checkbox">
<ul id="lokalnav">
<li>Matte</li>
<li>Svenska</li>
<li>Engelska</li>
<li>NO</li>
<li>Bild</li>
<li>SO</li>
</ul>
</label>
</li>
<li>Mina Inlämningar</li>
<li>Läxhjälp</li>
<li>Kontakt</li>
</ul>
</nav>

Add this css style to media quires max-width: 576px
#lokalnav {
position: relative;
}

On-click menu - stay visible

I have a responsive (HTML/CSS) "hamburger" menu when the size of screen is below 768px.
Clicking on the hamburger the menu appears, but it won't stay visible. Any ideas on how to keep it visible so that one can click on the links of the menu?
CSS
nav {
float:right;
padding:25px 20px 0px 0px;
}
#menu-icon {
display:hidden;
width:40px;
height:40px;
background: url(img/icons/nav-dark.png) center;
}
ul {
list-style:none;
}
nav ul li {
font-family: 'verdana', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
padding: 10px;
}
nav ul li a{
color:#6991AC;
}
.current {
color:#F0F;
}
a:hover {
color:#A5BDCD;
}
#media screen and (max-width: 768px) {
#menu-icon {
display: inline-block;
}
nav ul, nav:active ul {
display:none;
z-index:1000;
position:absolute;
padding:20px;
background:#F5F5F5;
border:1px solid #A5BDCD;
right:20px;
width:50%;
border-radius:3px 0 3px 3px;
opacity:.95;
}
nav li {
text-align:center;
width:100%;
}
nav:active > ul {
display: block;
}
}
HTML
<header>
<nav>
<ul class="main">
<li>Home</li>
<li>Skills</li>
<li>Portfolio</li>
<li>Our Team</li>
<li>Contact</li>
</ul>
</nav>
</header>

you schould use :focus instead of :active.. and you have to select the "hamburger" not the whole nav.
here is my solution:
nav {
float: right;
padding: 25px 20px 0px 0px;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(img/icons/nav-dark.png) center;
}
ul {
list-style: none;
}
nav ul li {
font-family: 'verdana', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
padding: 10px;
}
nav ul li a {
color: #6991AC;
}
.current {
color: #F0F;
}
a:hover {
color: #A5BDCD;
}
#media screen and (max-width: 768px) {
#menu-icon {
display: inline-block;
}
.main {
display: none;
z-index: 1000;
position: absolute;
padding: 20px;
background: #F5F5F5;
border: 1px solid #A5BDCD;
right: 20px;
width: 50%;
border-radius: 3px 0 3px 3px;
opacity: .95;
}
nav li {
text-align: center;
width: 100%;
}
#menu-icon:focus ~ .main {
display: block !important;
}
}
<header>
<nav>
#
<ul class="main">
<li>Home</li>
<li>Skills</li>
<li>Portfolio</li>
<li>Our Team</li>
<li>Contact</li>
</ul>
</nav>
</header>
View this solution in a Fiddle:
https://jsfiddle.net/smwn4sdg/
an other solution providing close-on-click: https://jsfiddle.net/smwn4sdg/1/
Note: Just remove the "#" of the "burger"... i've used it because jsfiddle dosn't know your image ;)
EDIT:
adding this to your css makes your links clickable, too:
.main:hover {
display: block !important;
}
New Fiddle: https://jsfiddle.net/smwn4sdg/3/

CSS ul drop down list issue [duplicate]

This question already has answers here:
Dropdown list alignment issue (HTML/CSS)
(3 answers)
Closed 7 years ago.
I've asked a question like this before, but received no answers. This is important, as it is an integral part of my website.
I am trying to create a dropdown menu. The 'Team' and 'News' links (when you hover over them) are the issue. I want the links beneath them to be in line with their parent.
I've tried to resolve the issue with padding, but have gotten nowhere.
Please help.
http://codepen.io/DocRow10/pen/hjIkq
<body>
<div id="container">
<div id="banner" class="clearfix">
<img id="crest" src="images/cecc-logo.png" />
<h1>Test Website</h1>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>About</li>
<li>News
<ul>
<li>Social Events</li>
</ul>
</li>
<li>Team
<ul>
<li>Players</li>
<li>Fixtures/Results</li>
<li>Statistics</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Menu
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>
body {
background-color: rgb(200, 220, 255);
/* #455868 */
}
#container {
height: 1000px;
margin-left: auto;
margin-right: auto;
}
#banner {
width: 100%;
text-align: center;
}
#crest {
height: 150px;
width: 180px;
display: inline-block;
}
#banner h1 {
display: inline-block;
}
/* Bat Colour rgb(38, 124, 196); */
#media only screen and (min-width : 480px) {
#banner h1 {
font-size: 30px;
display: inline-block;
}
}
#media only screen and (min-width : 768px) {
#banner h1 {
font-size: 36px;
display: inline-block;
}
}
#media only screen and (min-width : 980px) {
#banner h1 {
font-size: 47px;
display: inline-block;
}
}
nav {
height: 40px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: rgb(238, 0, 0);
font-size: 13pt;
font-family: neris;
border-bottom: 2px solid #283744;
}
nav > ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav > ul > li {
display: inline;
float: left;
}
nav ul a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul ul li {
display: block;
}
main {
width: 90%;
height: 200px;
margin-right: auto;
margin-left: auto;
background-color: rgb(38, 124, 196);
}
footer {
width: 90%;
height: 50px;
margin-right: auto;
margin-left: auto;
background-color: rgb(0, 0, 0);
}

If I understood correctly, this should help:
ul ul {
padding: 0;
}

I think it will helps you,
HTML
<body>
<div id="container">
<div id="banner" class="clearfix">
<img id="crest" src="images/cecc-logo.png" />
<h1>Test Website</h1>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>About</li>
<li>News
<ul>
<li>Social Events</li>
</ul>
</li>
<li>Team
<ul>
<li>Players</li>
<li>Fixtures/Results</li>
<li>Statistics</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Menu
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>
css
body {
background-color: rgb(200, 220, 255);
/* #455868 */
}
#container {
height: 1000px;
margin-left: auto;
margin-right: auto;
}
#banner {
width: 100%;
text-align: center;
}
#crest {
height: 150px;
width: 180px;
display: inline-block;
}
#banner h1 {
display: inline-block;
}
/* Bat Colour rgb(38, 124, 196); */
#media only screen and (min-width: 480px) {
#banner h1 {
font-size: 30px;
display: inline-block;
}
}
#media only screen and (min-width: 768px) {
#banner h1 {
font-size: 36px;
display: inline-block;
}
}
#media only screen and (min-width: 980px) {
#banner h1 {
font-size: 47px;
display: inline-block;
}
}
nav {
height: 40px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: rgb(238, 0, 0);
font-size: 13pt;
font-family: neris;
border-bottom: 2px solid #283744;
}
nav > ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav > ul > li {
display: inline;
float: left;
}
nav > ul > li > ul {
padding: 0;
}
nav > ul > li > ul li a {
border: 0;
text-align: left;
width: 100%;
}
nav ul a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover,
nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul ul li {
display: block;
}
main {
width: 90%;
height: 200px;
margin-right: auto;
margin-left: auto;
background-color: rgb(38, 124, 196);
}
footer {
width: 90%;
height: 50px;
margin-right: auto;
margin-left: auto;
background-color: rgb(0, 0, 0);
}

You're missing
nav ul ul li { padding: 0; }

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Navbar Dropdown Issue - html

Related

Hover effect does not work on small screen

Dropdown menu did not work after I resize the page

Responsive design topnavigation

On-click menu - stay visible

CSS ul drop down list issue [duplicate]

Categories

Resources