I am currently struggling to align the dropdown menu I have created. I need it to align to the left as it is currently aligning to the centre. I have created a jsfiddle to demonstrate my current code and the issue.
JSFiddle - https://jsfiddle.net/wu9gnsj5/
.menu {
float: right;
margin-top: 22px;
margin-left: 45px;
margin-right: 140px;
padding:0;
list-style: none;
font-weight: 700;
}
.menu div {
float: left;
margin-left: 30px;
}
.menu div a {
color: #42494e;
}
.header div.menu div a:hover {
color: #e60000;
}
.dropbtn {
color: black;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
padding-bottom: 20px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top:100%;
left: 0%;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {}
Any help would be greatly appreciated.
You have a css class that targets all .menu > div elements with margin-left: 30px;, including your dropdown.
You can override this by resetting the margin in your dropdown class.
.dropdown-content {
margin-left: 0;
}
Related
I am trying to use Superfish jQuery menu in one of my websites. Results so far are rather dissapointing as I get nowhere near the same look and feel when I follow the install instructions shared (under Quick Start Guide).
My intention is for the menu to be at the very top of the page, fixed (so it does not disappear when scrolling down) and cover 100% width. Using this attribute (100% width) stops the drop-down menus from working in this basic CSS version (I am learning the ropes so I am most likely not coding properly) and I cannot figure out why.
Anyhow, I want to achieve the same with Superfish and I would appreciate some coding assistance, I do not require the specific color styling but "install instructions" (if that makes any sense) would be of great help.
See below current code:
.banner {
color: #000000;
font-size: 2em;
font-family: "Public Sans";
font-weight: bolder;
letter-spacing: -0.05em;
padding-left: 0.2em;
padding-right: 0.2em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #d0d3d4;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #abacac;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #d0d3d4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #abacac;}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<!--- nothing --->
<li class="banner">nassau</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
Your help will be greatly appreciated.
For the basic CSS version, if you wrap it in a div and give that a position of fixed, top of 0 and width of 100% it does work.
Your code doesn't show any CSS showing position fixed anywhere.
.banner {
color: #000000;
font-size: 2em;
font-family: "Public Sans";
font-weight: bolder;
letter-spacing: -0.05em;
padding-left: 0.2em;
padding-right: 0.2em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #d0d3d4;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #abacac;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #d0d3d4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #abacac;}
.dropdown:hover .dropdown-content {
display: block;
}
.fixed{
position:fixed;
width:100%;
top:0;
}
<div class="fixed">
<ul>
<!--- nothing --->
<li class="banner">nassau</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
<div style="margin-top:100px;height:1000px;">sssssssx</div>
I'm making a navigation bar for a site that I'm working on, and one of the links will show a dropdown on hover. Currently, my dropdown content displays nowhere near below the dropdown where I would like it to be. This is probably a simple problem, but I would appreciate any help!
HTML:
<nav>
HOME
ABOUT
BLOG
<div class="dropdown">
PROJECTS
<div class="dropdown-content">
Client Work
Personal Projects
</div>
</div>
</nav>
CSS:
nav {
margin-top: 4.3vmin;
text-align: center;
display: none;
}
.nav-item:link {
color: #9422ed;
text-decoration: none;
padding: 3.7vmin;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.nav-item:visited {
color: #9422ed;
}
.nav-item:hover {
color: #5c0d99;
text-decoration: none;
}
.nav-item:active {
color: #5c0d99;
}
.dropdown {
overflow: hidden;
display: inline;
}
.dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
z-index: 1;
background-color: #f9f9f9;
min-width: 160px;
}
.dropdown-content a {
float: none;
text-decoration: none;
display: block;
text-align: left;
padding: 10px 14px;
}
.dropdown-content a:hover {
background-color: #e7e7e7;
}
.dropdown:hover .dropdown-content {
display: block;
}
Thanks in advance!
Set your .dropdown to position: relative; and then set .dropdown-content left & top or margin styles for fine positioning.
This question already has answers here:
Make a nav bar stick
(11 answers)
Closed 3 years ago.
want to ask. How do I stick my nav bar at the top when scrolling down? I have searched for some tutorial but I don't know how to combine the code together with mine. When I added the entire nav bar will go out of place.
Below is my style code for the nav bar:
<style>
.navbar {
overflow: hidden;
background-color:#333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
Here is a related question which might be able to help: Make a nav bar stick to the top when scrolling with css
Basically you need to set something like this:
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
It sounds like you're looking for a Sticky Navbar ("sticks" to the top of the viewport). Are you using Bootstrap? If so check out Bootstrap's NavBar Documentation.
I am trying to display a vertical menu in a defined column on the right using a statement with a specific class "vmenu". Everything seems to work, and I get the menu items on screen but they are not stacked one on top of the other like this:
Menu 1
Menu 2
Menu 3
Menu 4
instead they are shown like they are in two columns:
Menu 1 | Menu 2
Menu 3 | Menu 4
The CSS file also has a horizontal menu defined and I'm not sure if that is interfering with the results (the horizontal & drop down menus are working just great). Any help would be greatly appreciated.
I have tried to add a [class="vmenu"] to both the [ul] and each [li] statement without any change in the results.
The CSS Code For Vertical Menus:
.vmenu ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}
.vmenu li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.vmenu li {
text-align: center;
border-bottom: 1px solid #555;
}
.vmenu li:last-child {
border-bottom: none;
}
.vmenu li a.active {
background-color: #4CAF50;
color: white;
}
.vmenu li a:hover:not(.active) {
background-color: #555;
color: white;
}
The CSS Code for Horiz. Menus:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.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: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #4CAF50;
}
The HTML Code:
<div class="column2right">
<p> The Right Side</p><br>
<div class="vmenu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</div>
</div>
Your problem lies in horiz.css which is affecting all ul, li, a elements. Make it look as you did for .vmenu like this:
.hmenu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.hmenu li {
float: left;
}
.hmenu li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.hmenu li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.hmenu li.dropdown {
display: inline-block;
}
.hmenu .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: 1;
}
.hmenu .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.hmenu .dropdown-content a:hover {background-color: #f1f1f1;}
.hmenu .dropdown:hover .dropdown-content {
display: block;
}
.hmenu .active {
background-color: #4CAF50;
}
Hope the issue is with the float property being applied through horizontal menu.
Easy fix can be to remove the float for vmenu as
.vmenu li {
text-align: center;
border-bottom: 1px solid #555;
float:none;
}
My current fiddle is working fine apart from one thing. When I hover over the button I see the list displayed. Then when I hover over a list item the background changes colour which is all fine. However when the list item changes colour there is almost a box to the left of the item which is not highlighted and can't seem to get rid of it?
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.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;
}
.dropdown-content li {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content li:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #4C66E9;}
If i understand you. i believe you are looking to remove ui margin. you can do that using
ul{
padding: 0;
margin: 0;
}
By default most of HTML tags has some default styling, same is here in ul tag and that's the reason that when you hover li tags the left-side is not highlighted.
Default ul styling,
ul{
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
$(document).ready(function() {
var $region = $('#regionList');
$region.append('<li id="Europe">Europe</li>');
$region.append('<li id="Japan">Japan</li>');
$region.append('<li id="North America">North America</a></li>');
$("#regionList li").click(function() {
alert('Clicked list. ' + this.id);
});
})
/* Dropdown Button */
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
ul {
padding: 0px;
margin: 0px;
}
/* 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 li {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content li: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: #4C66E9;
}
.selected {
background: #FF00FF;
}
/*Add this*/
ul{
padding-left:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="dropbtn">Regions</button>
<div class="dropdown-content">
<ul id="regionList"></ul>
</div>
</div>
I believe below approach solves your problem. It was caused by ul element having default padding. I also added box-sizing: border-box to list elements, so padding won't make li elements stick out of ul.
I added explanation below snippet.
Solution key part
.dropdown-content #regionList {
padding: 0;
}
.dropdown-content li {
color: black;
padding: 12px 16px;
box-sizing: border-box;
text-decoration: none;
display: block;
}
Snippet
$(document).ready(function() {
var $region = $('#regionList');
$region.append('<li id="Europe">Europe</li>');
$region.append('<li id="Japan">Japan</li>');
$region.append('<li id="North America">North America</a></li>');
$("#regionList li").click(function() {
alert('Clicked list. ' + this.id);
});
})
/* Dropdown Button */
.dropbtn {
background-color: #9FACEC;
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 #regionList {
padding: 0;
}
.dropdown-content li {
color: black;
padding: 12px 16px;
box-sizing: border-box;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content li: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: #4C66E9;
}
.selected {
background: #FF00FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="dropbtn">Regions</button>
<div class="dropdown-content">
<ul id="regionList"></ul>
</div>
</div>
Explanation
Problem is caused by browser's default CSS rules, which are for Chrome:
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
You can see more here.
The other answers are correct. I just wanted to explain what's going on.
Your user agent stylesheet contains -webkit-padding-start: 40px; for ul elements.
Represented here in green.
As other answers said, override the padding style for ul elements set by your user agent stylesheet.
Just add padding 0 to your regionList
#regionList{
padding : 0;
}