There is an issue with dropdown, when hover it.
Instead of normal opening, the dropdown menu expands header.
Where is an error in the code?
I wrote this code from example on w3school()Code example, by which this code is written
There are also several attempts to do the same:
first attempt
second attempt
And in all of these attempts i do the same error, but cannot find where
exactly.
Can somebody show where are the errors?
* {
margin: 0;
padding: 0;
overflow-x: hidden;
}
header, nav {
background-color: aliceblue;
color: darkcyan;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: auto;
text-align: center;
padding: 10px;
}
a {
text-decoration: none;
color: darkcyan;
padding: 10px;
display: inline-block;
}
.active {
padding-left: 0;
}
a, .dropdown {
display: inline-block;
width: 100px;
padding: 10px;
}
.dropdown .dropbutton {
border: none;
outline: none;
color: inherit;
background-color: inherit;
font-size: inherit;
}
.dropdown-content {
display: none;
position: absolute;
background-color: whitesmoke;
color: black;
width: auto;
}
.dropdown-content a {
float: none;
padding: 10px;
display: block;
text-align: center;
}
.dropdown:hover .dropdown-content {
display: block;
position: relative;
width: auto;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Third Version</title>
</head>
<body>
<header>
<h1>The Homework</h1>
<nav>
Home
Hobbies
Third Page
<div class="dropdown">
<button class="dropbutton">Dropdown</button>
<div class="dropdown-content">
One
Two
Three
</div>
</div>
</nav>
</header>
</body>
</html>
Make a simple change to position in css:
.dropdown:hover .dropdown-content {
display: block;
position: absolute;----------------------This One
width: auto;
text-align: center;
}
Use this link to understand: Difference Between relative and absolute
This is because you have given position:relative in css instead give position:absolute for following selector .inline:hover .dropdown
.inline:hover .dropdown {
display: block;
position: absolute;
padding: 10px;
background-color: white;
color: dimgray;
}
And one more modification is that for all sub menu you have mentioned the class dropdown instead of that under one div which is having class dropdown
<div class="inline">The Page
<div class="dropdown">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
</div>
here is working example : https://liveweave.com/NpUwOZ
.dropdown:hover .dropdown-content {
display: block;
position: absolute;
width: auto;
text-align: center;
}
just delete the position line or change position in to absolute
You forgot to link the CSS file in your HTML code. Make sure you do that first.
Othetwise it won't do anything.
Related
body {
background: #caa178;
}
.navbar {
overflow: hidden;
background-color: #605f5f;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
.navbar a {
display: block;
color: #cdcdcc;
text-decoration: none;
padding: 30px;
float: right;
margin-right: 10px;
postion: fixed;
}
.navbar a:hover {
background: #3a3b3b;
font-weight: 1000;
}
<!DOCTYPE>
<html>
<div class="navbar">
ABOUT ME
MY WORK
CONTACT ME
</div>
</html>
I want to bold the words inside the buttons of the navigation bar when I hover over them, but I do not want to move the other 2 buttons slightly, what can I do to solve this? Thank you.
You can either assign fixed widths to the a elements in your menu or you can use a monospace font:
body {
background: #caa178;
}
.navbar {
overflow: hidden;
background-color: #605f5f;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
.navbar a {
display: block;
color: #cdcdcc;
text-decoration: none;
padding: 30px;
float: right;
margin-right: 10px;
font-family: monospace;
}
.navbar a:hover {
background: #3a3b3b;
font-weight: 1000;
}
<html>
<div class="navbar">
ABOUT ME
MY WORK
CONTACT ME
</div>
</html>
Also note that you tried to apply position: fixed to the a elements which wouldn't work properly (they would overlap by default), which only doesn't apply because you have a typo in there ("postion: fixed").
I am trying to create a horizontal subnavigation bar in CSS (without an unordered list), but I can't get the dropdown menu to appear.
Here's my code in HTML:
<div class="navbar sticky">
Home
<div class="subnav">
<button class="subnavbtn">Learn <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Print
Review
Examples
More Info
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Game <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Play Now!
How to Play
Cards
</div>
</div>
Minigames
</div>
Here's my code in CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.navbar {
overflow: hidden;
background-color: green;
position: sticky;
top: 0;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: chartreuse;
color: black;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
visibility: hidden;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
display: inline;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
visibility: visible;
display: block;
}
I've tried changing the opacity or even using visibility, but it just won't work for me. Sometimes the drop down will appear, however the top nav bar will transform (the "Game" link will shift right, starting at the point where "More Info" ends even though they are on different bars).
Most solutions I've seen while searching this issue is that they are not using (display: block;), but I have been and I don't know what to do at this point.
Here's fiddle
Remove overflow:hidden; from your .navbar declaration and replace it with float:left; and width:100%;
Floated elements are removed from the calculated height of the parent element. However, overflow:hidden; invokes the height to be calculated via block formatting context but, was hiding your dropdowns cause overflow is hidden.
Also, floating the parent element means the children dictate the parent's height making it more dynamic.
Revised Fiddle Here
Just remove the position property from the div with class name navbar.
.navbar {
overflow: hidden;
background-color: green;
top: 0;
}
Dropdown menu appear out of the navbar.
So, you should replace overflow: hidden with height: 50px in .navbar:
.navbar {
height: 50px;
background-color: green;
position: sticky;
top: 0;
}
I am having some trouble with my dropdown menu bar and the dropdown is not aligned properly as well.
Modified code on JSFiddle
HTML
<div class="container">
Home
<div class="dropdown">
<button class="dropbtn">Recipes</button>
<div class="dropdown-content">
Choc Chip Cookie
Choc Brownie
Choc Pretzels
</div>
</div>
Gallery
Contact
</div>
CSS
.container {
overflow: hidden;
background-color: #3399CC;
border-style: solid;
border-color: black;
border-width: medium;
width: 50%;
margin: auto;
text-align: center;
font-family: 'Lobster',cursive;
}
.container a {
float: left;
font-size: 22px;
color: black;
text-align: center;
padding: 10px 14px;
text-decoration: none;
align-content: center;
width: 21%; /* Modified by me to change the width of Home, Gallery and Contact element */
display: block;
}
.dropdown {
float: left;
overflow: hidden;
width: 24%; /* Modified by me to change the width of Recipe element */
}
.dropdown .dropbtn {
font-size: 22px;
border: none;
outline: none;
color: black;
padding: 10px 14px;
background-color: inherit;
font-family: 'Lobster',cursive;
}
.container a:hover, .dropdown:hover { /* Modified by me. Change the background color of dropdown element instead of the button */
background-color: #52C3EC;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #3399CC;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 250px;
}
.dropdown-content a {
float: none;
color: black;
text-align: left;
padding: 10px 14px;
padding-left: 40px; /* Modified by me to align the list item in the dropdown menu */
text-decoration: none;
display: block;
width: 78%; /* Modified by me to change the width of the list item in the dropdown menu */
}
.dropdown-content a:hover {
background-color: #52C3EC;
}
.dropdown:hover .dropdown-content {
display: block;
}
I'm not changing your page's structure, only the CSS code used in them. I've marked which part of the code that I modified along with the explataion.
You can still see a little bit of space and the end of Contact element. That's because scaling the size in percentage is hard. You can fix that by changing the unit to pixel. I'll leave the decision to you.
Also the result is best viewed in your browser not in JSFiddle due to size constraint.
Hey I want to make a website with a frontpage just like this one: http://foreword.io/ .
I need help with the horizontal list to get it just like the one on foreword.io.
I want the yellow area to be stretched all the way to the sides. When I hover over a link it only marks the upper part of the square, so I want it to mark the whole square for each link.
Please help and thanks in advance.
Here is my code:
body {
font-family: Times New Roman;
}
.h1 {
position: absolute;
height: 200px;
top: 90px;
width: 1585px;
text-align: center;
font-size: 350%;
font-family: Times New Roman, Georgia;
}
u {
text-decoration: none;
border-bottom: 5px solid black;
}
.fakta {
position: absolute;
height: 190px;
top: 340px;
width: 700px;
left: 500px;
font-size: 50px;
}
ul {
position: absolute;
height: 100px;
top: 600px;
left: 100px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: yellow;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 20px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: white;
}
<div class="h1">
<h1>
<u>DatabaseNavn</u>
</h1>
</div>
<div class="fakta">
<p>Database med ansatte <br> og avdelinger</p>
</div>
<ul>
<li>Side1</li>
<li>Side2</li>
<li>Side3</li>
<li>Side4</li>
<li>Side5</li>
</ul>
You can do this just adding the Height option to "li a" section in the css as below:
li a {
display: block;
color: black;
height: 100px;
text-align: center;
padding: 20px;
text-decoration: none;
font-size:20px;
}
it will set the height of the square so the whole yellow part will change to white.
in the case of the yellow bar size and item positions:
set the width of the ul to 100% so it will use the whole available space on the browser also remove the "left" and finally add 'position:relative', 'left:20%' and 'width:10%; to the li section.
li {
position: relative;
left: 20%;
width: 10%;
float: left;
}
SOURCE: My head :-P
Use display: inline-block; instead of display: block; and you will get an horizontal list.
Weave: http://kodeweave.sourceforge.net/editor/#2b1da7103aeec07f8b53045481c63c77
For something so simple you're using position absolute in places where it's not needed which could be replaced with margin. Thus your code is fairly WET (especially with me being on a tablet right now) So I made a simple mockup that's DRY and can work for RWD as well if you utilize media-queries.
I removed a lot of the unnecessary positioning. By setting the ul tag to text-align center I was able to center the anchors by telling the li tag to be displayed as an inline-block. Then I filled the width using width: 100%; margin: 0; padding: 0;
How this snippet helps.
body {
font-family: Times New Roman;
}
.h1 {
width: 100%;
text-align: center;
font-size: 350%;
font-family: Times New Roman, Georgia;
}
u {
text-decoration: none;
border-bottom: 5px solid black;
}
.fakta {
width: 100%;
font-size: 50px;
text-align: center;
}
ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: yellow;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 20px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: white;
}
<div class="h1">
<h1>
<u>DatabaseNavn</u>
</h1>
</div>
<div class="fakta">
<p>Database med ansatte og avdelinger</p>
</div>
<ul>
<li>Side1</li>
<li>Side2</li>
<li>Side3</li>
<li>Side4</li>
<li>Side5</li>
</ul>
I'm trying to show a relevant submenu when the user hovers over an item in the main menu. The problem I am having is that I need to have a common parent for the hover selector to do its magic, but then that seems to screw up my styling. Any suggestions that forgo javascript/jquery would be appreciated as I use that as a crutch too much for things that I should probably be solving with css alone.
HTML
<div id="header">
<div id="header_headline">
Heading
</div>
<div id="menu">
<div id="menu_inset">
HOME
PROFILE<div class="sub_menu_arrow"></div>
PROJECTS<div class="sub_menu_arrow"></div>
NEWS
CONTACT
</div>
</div>
<div id="sub_menu">
<div class="sub_menu_inset" id="sub_menu_profile">
1
2
3
</div>
<div class="sub_menu_inset" id="sub_menu_projects">
1
2
3
4
</div>
</div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
font-family: 'Pathway Gothic One', sans-serif;
color: #212121;
}
a {
text-decoration: none;
color: #212121;
}
#header {
width: 100%;
}
#header_headline {
margin: 1em 1em 1em 1em;
font-size: 2em;
text-transform: uppercase;
}
#menu {
margin-top: 1em;
width: 100%;
text-align: center;
white-space: nowrap;
}
#menu_inset {
display: inline-block;
word-spacing: 5em;
}
.menu_item {
position: relative;
}
.menu_item:hover .sub_menu_arrow {
display: inline-block;
}
#menu_item_profile:hover ~ #sub_menu_profile {
display: inline-block;
}
#menu_item_people:hover ~ #sub_menu_people {
display: inline-block;
}
.sub_menu_arrow {
position: absolute;
display: none;
left: 0;
width: 100%;
bottom: -1.05em;
}
.sub_menu_arrow:after {
content: '';
margin: 0 auto;
border-width: 0 .5em .5em;
border-style: solid;
border-color: #CCCCCC transparent;
display: block;
width: 0;
}
#sub_menu {
margin-top: 1em;
background-color: #CCCCCC;
width: 100%;
text-align: center;
white-space: nowrap;
position: relative;
height: 2em;
}
.sub_menu_inset {
display: none;
top: 0.5em;
position: absolute;
left: 0;
width: 100%;
background-color: #CCCCCC;
word-spacing: 5em;
}
http://jsfiddle.net/u9v0mcvo/
You don't necessarily have to use <ul> and <li> elements. Although, you should avoid nesting <a> tags in <a> tags. I think this is what you might be trying to accomplish (hover over project):
http://jsfiddle.net/u9v0mcvo/1/
When making CSS-only drop downs, tooltips, or whatever, it helps to nest the initially hidden item in the element that is in charge of opening it.
Your menu's should be <ul> and the submenu should be <ul> inside the <li>s.
The sub ul should then be positioned absolutely and display: none. the top level <li>s should have a :hover that changes the inner <ul>s to disbplay block.