I've searched the web for an answer to my problem but I couldn't find any good solutions.
I am trying to create a drop down list that shows up when the mouse is hovering over an icon. That works, but when I try to select an option in the drop down list it just dissapears. I can't figure out how to make it stay when i move the pointer from the "icon div" to the "list div". A problem I found many people encountered was that the "list div" wasn't close enough to the "icon div" or menu. I cheched this by setting different backgrounds and from what I can tell they are even overlapping.
I'll give you the code:
.settings_list {
height: 25px;
width: 39px;
position: fixed; top: 26px; right: 7px;
float: right;
display: block;
background: transparent url('resources/img/icons/list.png') center top no-repeat;
}
.settings_list:hover {
background-image: url('resources/img/icons/list_light.png');
}
.settings_list_sub {
display: none;
position: relative;
padding: 10px;
left: 40px;
width: 150px;
background-color: green;
color: #999;
opacity: 0.70;
}
.settings_list:hover + .settings_list_sub {
display: block;
}
.settings_list_sub li {
list-style: none;
margin-top: -5px;
background-color: yellow;
}
.settings_list_sub li a {
text-decoration: none;
display: block;
color: #999;
width: 135px;
padding: 5px 5px 5px 10px;
background-color: blue;
}
.settings_list_sub li a:hover {
text-decoration: none;
color: #FCFCFC;
background-color: #06C;
}
And the HTML:
<div class="settings_list"></div>
<div class="settings_list_sub">
<li>Test01</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Log out</li>
</div>
Maybe I'm doing this completely wrong. If you could help me I would be very grateful!
I actually have one more question. Is it possible to make my icon clickable (to open the drop-down list) without using JS?
Thank you in advance!
You should add:
.settings_list_sub:hover{
display:block;
}
to your code and it works :)
Related
I am trying to create one link, Buying Tips, in my navigation menu as a drop down menu. I am running into a few problems and nothing I do seems to fix these issues.
For some reason when I scroll over Buying Tips, the first option of my drop down menu overlaps the navigation menu. I am not sure why this is happening and how to correct this.
I would like the drop down arrow to show but not sure how to code this in CSS.
I would like the navigation links to be equally spaced out and Buying Tips is all on one line. (please view image to see problem) I tried changing the width of the navbar and change the font sizes of navigation links but that does not help.
Printscreen of navigation issues on webpage
.navbar {
width: 100%;
background-color: black;
overflow: auto;
}
.navbar a {
float: left;
padding: 5px;
color: white;
text-align: center;
text-decoration: none;
font-size: 20px;
width: 24%;
}
.navbar a:hover {
color: #FFA500
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .BuyTip {
float: left;
color: white;
text-align: center;
text-decoration: none;
font-size: 20px;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 200px;
}
.dropdown-content a {
float: none;
color: black;
display: block;
text-align: left;
font-size: 10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 480px) {
.navbar a {
float: none;
display: block;
width: 100%;
}
}
<div class="navbar">
Chade's Bicycle Company
<div class="dropdown">
<a class="BuyTip">Buying Tips</a>
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Choosing The Correct Bike
Setting A Budget
Test-Ride Before Buying
Choosing The Correct Size
The Essential Accessories
</div>
</div>
Company Calendar
Contact Us
</div>
I've changed your code to achieve the desired result.
As for the questions you've asked:
Since you've made the element bearing the .dropdown class absolutely positioned it will stick to the top since it has no relative parent.
I've used a CSS border property to create an arrow. You can customize it as you wish. (even replace it with the caret class you've used originally, as long as you position it appropriately.)
You can control the spacing between the navigation links using CSS margin or padding properties. read-more about padding and margin.
.navbar {
width: 100%;
background-color: black;
overflow: auto;
font-size: 0;
}
.navbar li {
display: inline-block;
margin: 0 10px;
}
.navbar li a {
display: block;
padding: 5px;
color: white;
text-align: center;
text-decoration: none;
font-size: 20px;
}
.navbar a:hover {
color: #FFA500
}
.dropdown>a {
position: relative;
padding-right: 10px;
}
.dropdown>a:after {
content: "";
display: block;
border-width: 6px;
border-style: solid;
border-right: 6px solid transparent;
border-color: red transparent transparent;
width: 0;
height: 0;
position: absolute;
right: -14px;
top: 14px;
}
.dropdown-content {
display: none;
position: absolute;
padding: 10px 0;
}
.navbar li .dropdown-content a {
color: black;
display: block;
text-align: left;
font-size: 10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 800px) {
.navbar li a {
font-size: 16px;
}
.dropdown>a:after {
border-width: 5px;
border-right: 5px solid transparent;
right: -10px;
top: 12px;
}
}
<div class="navbar">
<ul>
<li>Chade's Bicycle Company</li>
<li class="dropdown">
<a>Buying Tips</a>
<div class="dropdown-content">
Choosing The Correct Bike
Setting A Budget
Test-Ride Before Buying
Choosing The Correct Size
The Essential Accessories
</div>
</li>
<li>Company Calendar</li>
<li>Contact Us </li>
</ul>
</div>
My CSS Dropdown menu by hover is only working after the user clicks on the option, right after the click the dropdown shows and when hovering its acts perfectly,
I can't figure why it is happen and how to make the hover not wait for a click,
heres the html code:
<li>
events
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>
weddings
<div class="underline"></div>
</li>
<li>
parties
<div class="underline"></div>
</li>
<li>
birthdays
<div class="underline"></div>
</li>
</ul>
</div>
</div>
</li>
heres the related css:
.nav-item {
display: inline-block;
padding: 20px, 30px;
height: 0px;
width: 130px;
color: black;
text-decoration: none;
border-color: black;
line-height: 40px;
}
.nav-content{
position: absolute;
background-color: white;
border-color: black;
color: #000000; font-family: "Varela Round";
font-size: 15px;
line-height: 24px;
text-align: right;
list-style-type: none;
z-index: 99999;
display: none;
left: 1110px;
}
.nav-sub{
padding: 1px;
border: 1px solid #000000;
position: relative;
z-index: 10;
}
.nav-sub ul li:hover {
background-color: black;
}
.nav-sub ul li:hover > .nav-item{
color: white;
}
.nav-item:focus{
background-color:whitesmoke;
}
.nav-item:hover ~ .nav-content{
display: block;
}
.nav-content:hover{
display: block;
}
Generally, your code here is pretty solid for a drop-down nav menu. It also works, as is, on jsFiddle. If it is not showing up until you click, some of your other code (not posted) is interfering. You might have to post the rest of your code in order to get help figuring out what is causing that behavior.
Note:
You will notice that positioning will be a chore unless you make a couple of changes. This is because positioning absolutely with relation to the window generally causes nothing but trouble.
/* Makes absolute children relative to the container */
li {
position: relative;
}
.nav-content {
...
left: 0;
...
}
The fiddle shows the changes, simply because it was otherwise causing inaccessible demonstration.
A link on a "navbar" on my website can't be clicked for some reason and I can't seem to find the reason why. It is in the viewport(Here is the link to the website:https://codetheworld.000webhostapp.com/. The link on the website is supposed to be the "Learn to code" button). One interesting thing is that, once I open an inspect element window, it works. Here is the code snippet for just the navbar:
#first {
margin-top: 500px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
top: -1150px;
left: 100px;
z-index: 4;
}
li a {
width: 200px;
height: 50px;
font-size: 2em;
text-decoration: none;
color: white;
font-family: Georgia, serif;
padding: 10px;
border: 2px solid white;
border-radius: 7px;
text-align: center;
line-height: 30px;
}
li a:hover {
background-color: grey;
color: white;
text-decoration: none;
}
<ul id="first">
<li>Learn to code</li>
</ul>
You positioned your element outside of the viewport, so it can't be clicked.
Remove the margin-top & top positioning and everything will work:
#first {
background: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
left: 100px;
z-index: 4;
}
li a {
width: 200px;
height: 50px;
font-size: 2em;
text-decoration: none;
color: white;
font-family: Georgia, serif;
padding: 10px;
border: 2px solid white;
border-radius: 7px;
text-align: center;
line-height: 30px;
}
li a:hover {
background-color: grey;
color: white;
text-decoration: none;
}
<ul id="first">
<li>Learn to code</li>
</ul>
Well, you have a <div id="up2"> and it's right over your button. That's the reason why you can't click that button.
You could increase the top value of your div#up2 and edit/decrease the top values of the elements in the div#up2.
#Alessi 42 commented the correct solution, however Dekel was the one who posted it.
I did a fiddle and verified certainty: https: // jsfiddle.net / drpeck / tgeyfpd8 /
So learning from the experience I would say:
First test with and without CSS, and once you have determined that without CSS the element appears.
Start introducing CSS selectors and add/removing the different attributes
Once you find the attribute that is affected proceed to play with the values.
For my own sake, although not required, having the absolute path always helps me personally to avoid any unexpected misunderstanding (in other words to have clarity), even if the file is under the root directory. i.e:
Insted of this: href="tutorial.html" I would do href="./tutorial.html"
My AIM: is to make a navigation bar go across the whole screen, with a greyish colour (#839496). And have each link/button to have a border to the left and the right of it. Just like the navigation bar on:
http://www.theberrics.com/dailyops
However,
My Problem is: the link/button is only going across as far as is goes. I want each button to go across with the width of 150px (which works fine). BUT also have the grey bar continue through the whole screen horizontally (which isnt working and just displays nothing).
Here is my css:
nav {
background-color: #839496;
padding: 0.02px 0;
margin-bottom: 10px;
}
nav ul {
width: 100%; /*RIGHT HERE: i would like the whole unordered list to go across the screen. But it doesnt work*/
position: relative;
left:10%;
margin: 0;
padding-left: 100px;
}
nav li {
float: left;
}
nav li a{
display: block;
width: 150px;
background-color: #839496;
color: #fff;
text-align: center;
font-weight: bold;
text-transform: uppercase;
padding: 5px;
border-right: 1px solid;
border-left: 1px solid;
}
nav a:hover {
background-color: white;
color: #000;
text-decoration: underline;
}
And here is my html:
<nav>
<ul>
<li>Home<li>
<li>Top 10</li>
<li>Skaters</li>
<li>Submit</li>
</ul>
</nav>
Also: i dont want each button to be 25% of the page. Just 150px wide.
Sorry if my code or anything i said is confusing. Thank you for reading!
update your css like the below (i.e. include overflow: hidden; to nav
CSS
nav {
background-color: #839496;
margin-bottom: 10px;
overflow: hidden;
padding: 0.02px 0;
}
I'm new to web development sorry. ok so i want to make html and css menu drop when you click on it. i google and all i could find was menus which expand when you hover over them.
basically i want something like this
so far i have tried this
CSS
.menu-item {
background: #fff;
width: 50px;
}
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}
.menu-item:focus ul {
height: 93px;
}
.menu-item h4 a {
display: block;
text-decoration: none;
width: 200px;
cursor: pointer;
}
HTML
<div class="menu-item">
<h4>▼</h4>
<ul>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
i would also be very pleased if you guys can give me link to any tutorial which would help me make this menu.
You can use jQuery for making it simple. It is a JavaScript file which provides you ease for creating such menus with ease. One of them which is easy to use can be found here: http://patrickkunka.github.io/easydropdown/