I am having an issue whenever I try to use a id element selector for the ul element. When I use the code currently commented out
/*#wrapper h1, h2, ul {
text-align: center;
font-weight: bold;
padding: 10px 0;
}*/
my nested drop down menu becomes out of position, however it shouldn't be doing that since my nav bar isn't even enclosed in the wrapper.
* {
margin: 0;
padding: 0;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
padding: 0;
margin: 0;
font-family: 'Lato', Arial, sans-serif;
}
header {
background-color: #595959;
color: #fff;
padding-top: 30px;
min-height: 90px;
border-bottom: 3px solid #FFD700;
}
header .banner {
float: left;
}
header .banner h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header ul {
float: left;
}
header li {
float: left;
position: relative;
width: 150px;
list-style: none;
}
header a {
display: block;
text-decoration: none;
font-size: 16px;
padding: 5px 15px;
color: #fff;
border: 2px solid black;
background: #595959;
font-weight: bold;
}
header a:hover {
color: #FFD700;
}
header ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
opacity: 0;
}
header ul ul ul {
left: 100%;
top: 0;
}
header li:hover,
header li:hover li,
header li li:hover,
header li li:hover li,
header li li li:hover {
background: rgba(89, 89, 89, 0.9);
transition-duration: 0.5s;
}
header li:hover>ul {
visibility: visible;
opacity: 1;
}
/*#wrapper h1, h2, ul {
text-align: center;
font-weight: bold;
padding: 10px 0;
}*/
<!DOCTYPE html>
</head>
<body>
<header>
<div id="banner-container">
<div class="banner">
<h1>A-Level</h1>
<nav>
<ul>
<li>Home</li>
<li>A-level
<ul>
<li>Maths
<ul>
<li>PLC</li>
<li>Revision</li>
<li>Exam Papers</li>
</ul>
</li>
<li>Physics
<ul>
<li>PLC</li>
<li>Revision</li>
<li>Exam Papers</li>
</ul>
</li>
<li>Computer Science
<ul>
<li>PLC</li>
<li>Revision</li>
<li>Exam Papers</li>
</ul>
</li>
</ul>
</li>
<li>TimeTable</li>
<li>Logout</li>
</ul>
</nav>
</header>
</body>
By defining 'h1, h2 & ul' in #wrapper, those elements in #wrapper will get the CSS you're defining. To use them inside #wrapper, use #wrapper h1, #wrapper h2, etc.
Related
My intention is to make a top navigation bar, in which the list item PROJECTS is supposed to be a dropdown. So far the dropdown is working, but it takes as much width as the parent element. I want to dissociate the dropdown content from the navigation item without changing formatting properties, such that it occupies just as much space needed by its items and is also positioned right below PROJECTS.
My code:
body{
margin: 0;
padding: 0;
}
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
}
nav li{
float: left;
}
nav li a{
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
}
nav li a:hover:not(.active){
background-color: #444;
}
nav li a.active{
background-color: rgba(0, 150, 0, 1);
}
main{
padding-top: 30px;
}
.dropdown_content{
display: none;
width: auto;
}
.dropbtn:hover .dropdown_content{
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li> Home </li>
<li> About </li>
<li class="dropbtn">
Projects
<div class="dropdown_content">
HTML
CSS
JavaScript
</div>
</li>
<li> Contact </li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
How the result looks now:
How I want it to look(image edited)
Thank you in advance.
Just add position: fixed and background-color: #666666 for dropdown_content. Like that:
.dropdown_content {
...
position: fixed;
background-color: #666666;
}
This will not break the positioning of the dropdown menu, because the ul tag also has a fixed positioning.
body {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
}
nav li {
float: left;
}
nav li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
}
nav li a:hover:not(.active) {
background-color: #444;
}
nav li a.active {
background-color: rgba(0, 150, 0, 1);
}
main {
padding-top: 30px;
}
.dropdown_content {
display: none;
width: auto;
position: fixed;
background-color: #666666;
}
.dropbtn:hover .dropdown_content {
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li class="dropbtn">
Projects
<div class="dropdown_content">
HTML
CSS
JavaScript
</div>
</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main></main>
<footer></footer>
</body>
You can try absolute positioning.
body {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
font-size: 0;
}
nav li {
display: inline-block;
}
nav li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
font-size: 16px;
}
nav li a:hover:not(.active) {
background-color: #444;
}
nav li a.active {
background-color: rgba(0, 150, 0, 1);
}
main {
padding-top: 30px;
}
.dropdown_content {
position: absolute;
display: none;
background-color: #666666;
}
.dropbtn:hover .dropdown_content {
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li> Home </li>
<li> About </li>
<li class="dropbtn">
Projects
<div class="dropdown_content">
HTML
CSS
JavaScript
</div>
</li>
<li> Contact </li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
I'm trying to make a simple dropdown menu but the sub items of Meme don't stay in block.
If I remove float left of header li, the menu of Memes appears under Home.
HTML:
<header>
<div class="container">
<div id="brand">
<h1><span class="highlight">My</span> website</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Curriculum Vitae</li>
<li>PC Gaming</li>
<li>Memes
<ul>
<li>Hot</li>
<li>Trending</li>
<li>Upload File</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #brand {
float: left;
}
header #brand h1 {
margin: 0;
}
header nav {
float:right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover{
color: #ccc;
font-weight: bold;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display:none;
position: absolute;
}
nav ul ul li {
display: block;
background: #e8491d;
}
Remove the float left and change the following:
header li {
position: relative;
display: inline;
padding: 0 20px 0 20px;
}
nav ul ul {
display:none;
position: absolute;
top: 100%;
left: 0;
}
demo
If you use a flexbox for the embedded menus, it handles with width of the sub-items better than floating does.
You can also change this flex to use flex-direction: row if you prefer that to the column.
Had to change a few other things in order to position the absolute element properly based on its parent menu element. But not too much has changed and I even included a following element to show how they will be aligned even with following submenus.
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
display: inline-block;
padding: 0 20px;
}
header #brand {
float: left;
}
header #brand h1 {
margin: 0;
}
header nav {
float:right;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover{
color: #ccc;
font-weight: bold;
}
nav ul li:hover ul {
display: flex;
align-items: start;
flex-direction: column;
background: #e8491d;
}
nav > ul{
height: 20px;
}
nav ul li{
position: relative;
white-space: nowrap;
}
nav ul ul {
display:none;
position: absolute;
right: 0;
top: 100%;
width: auto;
padding: 0;
}
nav ul ul li {
padding: 0 5px;
}
<header>
<div class="container">
<div id="brand">
<h1><span class="highlight">My</span> website</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Curriculum Vitae</li>
<li>PC Gaming</li>
<li>Memes
<ul>
<li>Hot</li>
<li>Trending</li>
<li>Upload File</li>
</ul>
</li>
<li>Memes2
<ul>
<li>Hot</li>
<li>Trending</li>
<li>Upload File</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
Remove the float:left off of header li and make it display:inline-block; instead.
Edit: I don't know how it doesn't work then, because it does in this fiddle, with the same code that you provided. There must be other code that you have that is conflicting, that you didn't include.
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
display: inline-block;
padding: 0 20px 0 20px;
}
header #brand {
float: left;
}
header #brand h1 {
margin: 0;
}
header nav {
float:right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover{
color: #ccc;
font-weight: bold;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display:none;
position: absolute;
}
nav ul ul li {
display: block;
background: #e8491d;
}
<header>
<div class="container">
<div id="brand">
<h1><span class="highlight">My</span> website</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Curriculum Vitae</li>
<li>PC Gaming</li>
<li>Memes
<ul>
<li>Hot</li>
<li>Trending</li>
<li>Upload File</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
I have horizontal menu bar, and I trying to add sub menu for one of item, but I am not able to add it, Its appending to my main menu, please someone help me to where i missing
thanks
HTML
<div id="talltabs-maroon">
<ul>
<li class="first">Home <span>Page</span></li>
<li class="active"><span>About us</span></li>
<li class="dropdown"><a class="dropbtn" href="#"> <span> Report </span></a>
<ul class="dropdown-content" style="left:0">
<li>
<a href="">
<p>Valve Report</p>
</a>
</li>
<li>
<a href="">
<p>Cylinder Report</p>
</a>
</li>
</ul>
</li>
<li class="last">Contact <span>Us</span></li>
</ul>
</div>
CSS for Main menu
#talltabs-maroon {
clear: left;
float: left;
padding: 0;
border-top: 3px solid #CD324F;
width: 100%;
overflow: hidden;
font-family: Georgia, serif;
height: 90px;
position: inherit;
}
#talltabs-maroon ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
position: relative;
left: 50%;
text-align: center;
}
#talltabs-maroon ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
#talltabs-maroon ul li a {
display: block;
float: left;
margin: 0 3px 0 0;
padding: 0px 10px 6px 10px;
background: #CD324F;
text-decoration: none;
color: #fff;
}
#talltabs-maroon ul li a p:hover {
color: aqua;
}
#talltabs-maroon ul li a:hover {
padding: 20px 10px 6px 10px;
color: black
}
#talltabs-maroon ul li.active a,
#talltabs-maroon ul li.active a:hover {
padding: 25px 10px 6px 10px;
border-width: 5px;
border-color: aqua;
color: aqua;
}
CSS for drop down menu i tried.
.dropbtn {
list-style-type: none;
color: white;
padding: 14px;
font-size: 14px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
list-style-type: none;
display: none;
position: absolute;
right: 0;
/*background-color: black;*/
background-image: url('../../Images/black-olive.jpg'); /*dropdowm popup*/
min-width: 160px;
box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.2);
z-index: 1;
padding-right: 2px;
margin-right: 2px;
}
.dropdown-content a {
color: white;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
/*background-color: gray;*/
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
/*background-color: #3e8e41;*/
}
pleas help me.
thanks
tink.
Here is my answer for same example, I changed complete css,
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
display: inline-block;
margin-right: -1px;
position: relative;
padding: 15px 20px;
background: #CD324F;
cursor: pointer;
color: black;
height: 40px;
width: auto;
text-align:center;
}
ul li a{
color:black;
}
ul li:hover {
background: #CD324F;
color: #fff;
height: 45px;
}
ul li a:hover {
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 68px;
left: 0;
width: 160px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #ce5068;
display: block;
color: #CD324F;
height: 35px;
}
ul li ul li:hover {
background: #CD324F;
height: 35px;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<div style="height: 77px; width:100%; margin-top:65px;text-align:center; border-top:solid; border-top-color:#CD324F">
<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
Result: on hover portfolio, drop down will appear
Working example on JSFiddle.
I really recommend to look at bootstrap's drop down menu. It is easy to use and most things are already done for you. good luck
Here is the link: https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
your code is bit confusing , i have created a simple demo for you how to do it.
here is my HTML code
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
}
p {
text-align: center;
}
nav {
margin: 50px 0;
background-color: #E64A19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>WordPress
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li>Web Design
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials
</ul>
</nav>
</div>
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'd like to have the navigation bar centered and the text placed to left as it is, but when I add the h3-tag the navigation bar moves to the right. How can I do this?
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
display: inline-block;
float: left;
font-style: bold;
font-size: 2em;
color: white;
}
.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;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1em;
display: inline-block;
margin-right: -4px;
}
.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;
}
}
<div class="nav">
<h3 id="toptext">Text text text text</h3>
<ul>
<li class="home"><a class="active" href="#">Home</a>
</li>
<li class="about">About
</li>
<li>Other
<ul>
<li>Site1
</li>
<li>Site2
</li>
</ul>
</li>
<li class="contact">Contact
</li>
</ul>
</div>
I used the navigation bar from: http://css-snippets.com/drop-down-navigation/
Anything that is in the document flow is going to affect the position of the menu. So you would would have to take the h3 out of the flow by positioning it absolutely.
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
font-style: bold;
font-size: 2em;
color: white;
position: absolute;
}
This has other issues but solves your initial problem.
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
/*
display: inline-block;
float: left;
*/
font-style: bold;
font-size: 2em;
color: white;
position: absolute;
}
.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;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1em;
display: inline-block;
margin-right: -4px;
}
.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;
}
}
<div class="nav">
<h3 id="toptext">Text text text text</h3>
<ul>
<li class="home"><a class="active" href="#">Home</a>
</li>
<li class="about">About
</li>
<li>Other
<ul>
<li>Site1
</li>
<li>Site2
</li>
</ul>
</li>
<li class="contact">Contact
</li>
</ul>
</div>
Its because your h3 is inside the nav div. try making the h3 absolute positioned and your .nav class relatively positioned.