So I'm trying to configure a simple dropdown list from a list item but I can't for the life of me figure out why it wont stop covering the list item when I hover over it. Here's the html:
<div class="dropdown" style="float:right">
<li><a class="active dropbtn" href="">Profile</a></li>
<div class="dropdown-content">
Link 1
Link 2
<span class="glyphicon glyphicon-log-out"></span> Logout</a>
</div>
</div>
And the css to style this is:
tr:hover {background-color: #f5f5f5}
th, td {
padding: 15px;
text-align: left;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 10;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
In addition to this, despite changing the z-index of the dropdown elements I can't get the menu to appear outside of the menu where the parent list is located
All help is appreciated
Well, the code gave me a few errors.... Please look at this JSfiddle and tell me if it's working now? Also please, tell me what you want because I'm a bit confused..
https://jsfiddle.net/xxsycmyj/
<div class="dropdown" style="float:left">
<li><a class="active dropbtn" href="">Profile</a></li>
<div class="dropdown-content">
Link 1
Link 2
<span class="glyphicon glyphicon-log-out"></span> Logout
</div>
The CSS looked fine to me.
Related
I have been puzzled for a while. I am making a personal website with multiple navigation buttons including one dropdown menu. The dropdown menu should be triggered when the cursor hovers over the about button. I used W3School's code as part of the foundation.
I have tried to create one myself however, when I hover over any button the menu triggers.
I played around with using and using but neither was successful. I tried also creating a second but then I ran into another issue where I could not get the buttons (Gallery and Contact) to sit next to the other button (About). Below is the HTML and further is the CSS.
<nav class="dropdown">
<button class="about" href="about.html">About </button>
<button class="gallery" href="gallery.html">Gallery </a>
<button class="contact" href="contact.html">Contact </a>
<div class="dropdown-content">
Achievements
Education
Hobbies
Career
</div>
.dropdown{
font-size: 22px;
font-family: "Arvo", serif;
font-weight: bold;
text-align: right;
position:relative;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: relative;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}.dropdown-content a:hover {
background-color: #ddd;
}
.about:hover .dropdown-content {
display: block;
}
.about:hover {background-color: transparent;
}
You need to update the CSS. The dropdown-content is not a child of .about so doing .about:hover .dropdown-content wont work. You need to use General Sibling Selector
Update it to .about:hover ~ .dropdown-content
EDIT
You also have an issue with your HTML you are opening button tags but closing a tags update them and it should work
I am doing a school project in which I'm not allowed to use Javascript or Bootstrap, and I cannot find a way to make a dropdown menu when the site is opened in smaller screens. Most guides and videos show using Bootstrap or JS and it has gotten me all confused, is it possible to do with just HTML and CSS?. Can anyone give me some quick tips or alternatives? Thank you beforehand!
Answer below using HTML and CSS only.
If my answer works, please check it as final answer and upvote it so other people with same problem will get help too. Cheers
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<style>
/* Style The Dropdown Button */
.dropbtn {
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px;
text-decoration: none;
display: block;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
</style>
CSS has been my greatest weakness and even after a few tutorials here and there, I am still quite a novice in terms of positioning things.
I would like to move a drop-down hover button next to another button (split button dropdown). However even after using position:auto and left:auto, it is still showing up on the other side, where I do not want it to be in. Looking for a HTML/CSS guru that can show this novice the way :)
Here is a picture of what I'm talking about:
Element I want moved
The way I would like the Split Button to look like (note: just the positioning of one another, not the colour or size etc..).
Split Button Look
Here is my HTML Code:
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- The "All Referral" Dropdown hover button -->
<button class="btn">All Referral</button>
<div class="dropdown">
<!-- The Dropdown button with the arrow and the links -->
<button class="btn" style="border-left:1px solid orange">
<i class="fa fa-caret-down"></i>
</button>
<!-- The links for all referral in the dropdown button -->
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
And here is my CSS:
/* Dropdown Button */
.btn {
background-color: orange;
color: white;
padding: 2px 20px 3px 20px;
float: right;
font-size: 14px;
font-weight:bold;
text-decoration:none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
padding: 2px 20px 3px 20px;
float: right;
font-size: 14px;
font-weight:bold;
text-decoration:none;
/* position: absolute; */
/* display: inline-block; */
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: silver;
min-width: 160px;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: orange}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.btn:hover, .dropdown:hover .btn {
background-color: silver;
}
Also are there any youtube tutorials or absolutely handy pdf/books whatever for "semi-advanced" css tips and tricks? I kinda have an idea with the basics but it's just so difficult for me to move things around the page and where it should go etc...
Again, many thanks for any help that comes my way!
I suggest using flexbox for positioning. Take a look at the link below.
https://codepen.io/jcbryant/pen/dyObVbL
What I did: added a div container wrapped around the buttons. Gave each button its own unique id for better control. Removed the float properties and replaced them with display: flex. Removed the padding property on the drop down button and added margin-left: 0px;.
Do a display: flex; on the container of that All refferals button and the dropdown then do margin-left: 0; in the .dropdown btn
The HTML Code:
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- The "All Referral" Dropdown hover button -->
<div id="buttonContainer"> <!--BUTTON CONTAINER-->
<button id="button">All Referral</button> <!--CHANGED TO ID -->
<div class="dropdown">
<!-- The Dropdown button with the arrow and the links -->
<button id="dropButton" style="border-left:1px solid orange"> <!--CHANGED TO ID -->
<i class="fa fa-caret-down"></i>
</button>
<!-- The links for all referral in the dropdown button -->
<div class="dropdown-content">
Link 1
Link 1
Link 1
</div>
</div>
</div>
<span style="float:left;">
<a class="btnWhiteblueMin marleft" href="#">Button 1</a>
<a class="btnWhiteblueMin marleft" href="#">Button 2</a>
<a class="btnWhitepurpleMin" href="#">Button 3</a>
</span>
<br class="clr" />
</div>
The CSS Code:
/* Participant Profile Header Drop-down Button -CoachPanda Edit */
/* Dropdown Button */
#buttonContainer {
display: flex;
float: right; /*Q change*/
}
#button {
background-color: orange;
color: white;
padding: 2px 20px 3px 20px;
display: flex;
font-size: 14px;
font-weight:bold;
text-decoration:none;
}
#dropButton {
background-color: orange;
display: flex;
margin-left: 0px;
font-size: 14px;
padding: 5px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
font-weight:bold;
text-decoration:none;
font-size: 14px; /*Q change */
right: 0px;
/* position: absolute; */
/* display: inline-block; */
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
font-size: 14px; /*Q change font size*/
display: none;
position: absolute;
background-color: silver;
min-width: 160px;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: orange}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.btn:hover, .dropdown:hover .btn {
background-color: silver;
}
I am trying to use this dropdown as a Mediawiki template and allow for Mediawiki parameters in the URL creation (I.e. {{PAGENAME}}). Apparently, this type of html elements is not parsed. Trying $wgRawHtml = true; resulted in the template being displayed, but, apart from being a security risk, there was no way to have parsable elements. I did find this template but I could not figure out how do adapt it to work with the styling of the dropdown in question.
In the page MediaWiki:Common.css (or MediaWiki:Skinname.css, if you only want it for a certain skin), add your desired CSS:
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
If everything in the template is going to be an internal link, make this your template:
<div class="dropdown">
<div class="dropbtn">{{{title|Dropdown}}}</div>
<div class="dropdown-content"><!--
-->{{#if:{{{1|}}}|[[{{{1}}}]]}}<!--
-->{{#if:{{{2|}}}|[[{{{2}}}]]}}<!--
-->{{#if:{{{3|}}}|[[{{{3}}}]]}}<!--
-->{{#if:{{{4|}}}|[[{{{4}}}]]}}<!--
-->{{#if:{{{5|}}}|[[{{{5}}}]]}}<!--
</div>
</div>
And then invoke it like this:
{{dropdown|Foo|Bar|Baz}}
And it will make a dropdown with links to the pages Foo, Bar, and Baz on your wiki.
If you have to support external links or plaintext, use this instead:
<div class="dropdown">
<div class="dropbtn">{{{title|Dropdown}}}</div>
<div class="dropdown-content plainlinks"><!--
-->{{#if:{{{1|}}}|<span>{{{1}}}</span>}}<!--
-->{{#if:{{{2|}}}|<span>{{{2}}}</span>}}<!--
-->{{#if:{{{3|}}}|<span>{{{3}}}</span>}}<!--
-->{{#if:{{{4|}}}|<span>{{{4}}}</span>}}<!--
-->{{#if:{{{5|}}}|<span>{{{5}}}</span>}}<!--
--></div>
</div>
Change the as in the CSS to spans, and add a rule to make sure they are black instead of blue:
/* Links inside the dropdown */
.dropdown-content span {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content span:hover {background-color: #ddd;}
.dropdown-content a, .dropdown-content a:hover{
color: black;
text-decoration: none;
}
And then, you can invoke it like
{{dropdown|[[Foo]]|[https://www.google.com/ Google]|Plain text}}
and it has a link to the page Foo, a link to Google, and a plain-text menu item.
Note: If a parameter contains an equals sign (=), you need to specify all the parameter names, like this:
{{dropdown|1=[https://duckduckgo.com/?q=foo&ia=web Search for Foo]|2=Bar}}
See also: Passing an equal sign ('=') to a parameter in a MediaWiki template
So I tried to use this, and I'm having an issue where the rest of the page content that is after the dropdown, is in the dropdown itself. IT doesn't look like any of the parameters aren't closed, so I'm not sure why it's doing that. Using MW1.32
I am working on creating dropdown menus for my eBay listings. I have gotten to a point where I like the functionality of my menus, but want to perfect them. I currently have hoverable dropdown menus. When I hover over a menu, a drop down list is shown from the menu and each title is hyperlinked to its respective page. What I want to do is add a hyperlink to the hoverable title itself. For example, if I hover over the title of the menu, a dropdown list appears. What I would like to do is be able to click on the title of the menu and have it also take me to a specific web page.
I don't have much experience programming CSS. I have been successful in creating menus from researching it on w3schools.com. I have not figured out a way to do this, and haven't had any luck researching it.
<style>
.dropbtn {
background-color: #21205F;
color: white;
width: 130px;
padding: 10px;
font-size: 1.325em;
font-family: "Times New Roman", Times, serif;
margin: 2px;
border: none;
cursor: pointer;
border-radius: 10px;
}
.dropdown {
float: left;
display: inline-block;
}
.dropdown-content {
border-radius: 10px;
display: none;
position: absolute;
background-color: #21205F;
min-width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
border-radius: 10px;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #66BD29}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #66BD29;
}
</style>
<div class="dropdown">
<button class="dropbtn">Menu Title</button>
<div class="dropdown-content">
Link 1 Title
Link 2 Title
Link 3 Title
</div>
</div>
I hope to add an href link to the Menu Title. When clicked on the menu title, I hope that could take the user to a specific link. I hope that I could do it with the code provided, but maybe it would require a complete reconstruction of how I program this menus. I am currently using .dropbtn with .dropdown and .dropdown-content from w3schools.com.
You can just add an A tag inside your button.
HTML:
<button class="dropbtn">
<a href="#"> <!––added-->
Menu Title
</a>
</button>
CSS :
.dropbtn>a { /*added*/
text-decoration: none;
color: inherit;
}
You just need to replace the button tag with an A tag.
<div class="dropdown">
Menu Title
<div class="dropdown-content">
Link 1 Title
Link 2 Title
Link 3 Title
</div>
</div>