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; }
Related
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>
How to make a responsive make the navbar collapse into a hamburger menu bar after a certain width without bootstrap, but from scratch?
Here is the fiddlehttps://jsfiddle.net/6951Lscu/
#myNavbar{
position: fixed;
width: 100%;
background: white;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #E8E8E8;
text-decoration: none;
}
ul{
list-style: none;
}
.medium{
font-family: "Roboto", sans-serif;
font-weight: 500;
}
.right-nav{
padding: 8px 15px;
float: right;
}
div.container{
font-family: Raleway;
margin: 0 auto;
padding: 6px 3em;
text-align: center;
}
div.container a
{
color: #000;
text-decoration: none;
margin: 0px 20px;
padding: 5px 5px;
position: relative;
}
<div id="myNavbar">
<div class="container">
<ul>
<li style="float:left"><img class="navlogo" src="svg/navlogo.svg" alt=""></li>
<li class="right-nav"><span class="medium">KONTAKT</span></li>
<li class="right-nav"><span class="medium">PRIS</span></li>
<li class="right-nav"><span class="medium">GARANTIER</span></li>
<li class="right-nav"><span class="medium">OM MEG</span></li>
</ul>
</div>
</div>
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
header {
background: #181818;
height: 200px;
padding-top: 40px;
}
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
.logo {
text-decoration: none;
color: #777;
font-weight: 800;
font-size: 30px;
line-height: 40px;
}
h1 {
text-align: center;
width: 100%;
margin-top: 120px;
color: #eee;
font-weight: 800;
font-size: 40px;
}
nav > ul {
float: right;
}
nav > ul > li {
text-align: center;
line-height: 40px;
margin-left: 70px;
}
nav > ul li ul li {
width: 100%;
text-align: left;
}
nav ul li:hover {
cursor: pointer;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover > a {
color: #777;
}
nav > ul > li > a {
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-decoration: none;
}
nav > ul > li {
float: left;
}
nav a {
color: white;
}
nav > ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 2000;
}
nav > ul li ul li > a {
text-decoration: none;
}
[type="checkbox"],
label {
display: none;
}
#media screen and (max-width: 768px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
right: 20px;
top: 0px;
}
label:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}
[type="checkbox"]:checked ~ ul {
display: block;
z-index: 9999;
position: absolute;
right: 20px;
left: 20px;
}
nav a {
color: #777;
}
nav ul li {
display: block;
float: none;
width: 100%;
text-align: left;
background: #222;
text-indent: 20px;
}
nav > ul > li {
margin-left: 0px;
}
nav > ul li ul li {
display: block;
float: none;
}
nav > ul li ul {
display: block;
position: relative;
width: 100%;
z-index: 9999;
float: none;
}
h1 {
font-size: 26px;
}
}
<header>
<div class="inner">
<nav>
Logo
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li>Home</li>
<li>
Work
<ul>
<li>Web</li>
<li>Print</li>
</ul>
</li>
<li>Service</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
You should refer to Hanlin Chong's CodePen which utilizes #media queries to handle responsive behavior based on max-width of the screen.
Or start with the basic W3Schools Responsive Navbar tutorial: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
You should read about #media rule in CSS3. Here is url Click. There is no other way to do that without bootstrap. Good luck!
Having trouble with how the drop-down-menu looks like when the mouse hovers over it. Note that the problem only started when I converted my nav li's from fixed to fluid. (instead of specifying it in px I specify it in %)
Here is my code:
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, Helvetica, sans-serif;
font-size: 100%;
width: 99%;
max-width: 800px;
margin: 0 auto;
background-color: rgba(255, 248, 228, 0.95);
border: 2px solid #585858;
}
a:link {
color: #e07400;
}
a:visited {
color: gray;
}
a:hover,
a:focus {
font-style: italic;
}
header img {
float: left;
width: 100%;
max-width: 136.078px;
}
.orange_header {
color: #e07400;
}
header h1 {
margin: 0;
font-size: 200%;
text-shadow: 2px 1px 1px black;
/*text-align: center;*/
padding-left: 7em;
padding-top: 0.7em;
padding-bottom: 0.5em;
}
/*====================NAV MENU========================*/
#nav_menu a {
margin: 0;
}
#nav_menu a.current {
color: white;
display: block;
background-color: #a78349;
}
#nav_menu ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 34px;
}
#nav_menu ul li {
float: left;
/*width:165.985px;*/
/*(800-136.06)/4 - fixed layout - uncomment to see that the dropdown menu at the lessons tab looks fine*/
width: 20.748125%;
/* 165.985/800*100 - here the dropdown menu looks strange...how to I fix this?*/
}
#nav_menu ul li a {
display: block;
text-align: center;
text-decoration: none;
padding: 0.5em 0;
margin: 0;
background-color: #ab6b06;
color: white;
}
#nav_menu ul ul {
display: none;
position: absolute;
top: 100%;
}
#nav_menu ul ul li {
float: none;
}
#nav_menu ul li:hover>ul {
display: block
}
#nav_menu>ul::after {
content: "";
clear: both;
display: block;
}
<body>
<header>
<img src="images/guitarlogo2.png" alt="Guitar" height="109.93">
<h1 class="orange_header">Annemie's Guitar School</h1>
</header>
<nav id="nav_menu">
<ul>
<li>Home</li>
<li>Useful links</li>
<li>Lessons
<ul>
<li>Sitting position</li>
<li>Reading music</li>
<li>Right Hand Technique</li>
<li>Left Hand Technique</li>
<li>Practising and Memorization</li>
</ul>
</li>
<li>Bio</li>
</ul>
</nav>
</body>
Change this css:
#nav_menu ul li {
float: left;
/* width: 165.985px; */
width: 20.748125%;
}
to this
#nav_menu > ul > li {
float: left;
/* width: 165.985px; */
width: 20.748125%;
}
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/
The code below has issues.
The CSS code for the menu bar does not seem to be working along with the HTML.
<!DOCTYPE html>
<html>
<body class="news">
<head>
<style type="text/css">body {
margin: 0;
padding: 0;
background: #ccc;
}
.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;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}</style>
</head>
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">About</a></li>
<li class="about">Newsletter</li>
<li class="news">Media</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>
</body>
</html>
I do not understand why the code does not work.
This is correct code which you need...
body {
margin: 0;
padding: 0;
background: #ccc;
}
.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;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
<!DOCTYPE html>
<html>
<body class="news">
<head>
</head>
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">About</a></li>
<li class="about">Newsletter</li>
<li class="news">Media</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>
</body>
</html>