When I hover over "Dropdown >", the dropdown menu appears at the left side below the top bar. How do I align it just below "Dropdown >"?
Note that I am trying to do this with only CSS and HTML.
My Code:
* {
margin: 0;
padding: 0;
}
header {
position: fixed;
height: 35px;
width: 100%;
background: black;
}
.top-container {
margin-top: 7px;
}
/* Code for drop-down list */
.dropdown {
margin-left: 100px;
display: inline;
color: #FFF;
}
.dropdown_list {
list-style: none;
display: none;
position: absolute;
color: red;
}
.dropdown_list li {
background: yellow;
}
.dropdown:hover {
background: #333;
}
.dropdown:hover .dropdown_list,
.dropdown_list:hover {
display: block;
top: 100%;
}
<body>
<header>
<div class="top-container">
<div class="dropdown">Dropdown ❱
<ul class="dropdown_list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
</header>
</body>
Change .dropdown from inline to inline-block:
.dropdown {
display: inline-block;
}
Snippet:
* {
margin: 0;
padding: 0;
}
header {
position: fixed;
height: 35px;
width: 100%;
background: black;
}
.top-container {
margin-top: 7px;
}
/* Code for drop-down list */
.dropdown {
margin-left: 100px;
display: inline-block;
color: #FFF;
}
.dropdown_list {
list-style: none;
display: none;
position: absolute;
color: red;
}
.dropdown_list li {
background: yellow;
}
.dropdown:hover {
background: #333;
}
.dropdown:hover .dropdown_list,
.dropdown_list:hover {
display: block;
top: 100%;
}
<body>
<header>
<div class="top-container">
<div class="dropdown">Dropdown ❱
<ul class="dropdown_list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
</header>
</body>
Try this
Add position:relative to class .dropdown now your .dropdown_list is relative to the .dropdown you can use top left right bottom to place your .dropdown_list as you want.
* {
margin: 0;
padding: 0;
}
header {
position: fixed;
height: 35px;
width: 100%;
background: black;
}
.top-container {
margin-top: 7px;
}
/* Code for drop-down list */
.dropdown {
margin-left: 100px;
display: inline;
color: #FFF;
position: relative;
}
.dropdown_list {
list-style: none;
display: none;
position: absolute;
color: red;
top: 0;
left: 0;
}
.dropdown_list li {
background: yellow;
}
.dropdown:hover {
background: #333;
}
.dropdown:hover .dropdown_list,
.dropdown_list:hover {
display: block;
top: 100%;
}
<body>
<header>
<div class="top-container">
<div class="dropdown">Dropdown ❱
<ul class="dropdown_list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
</header>
</body>
Add position: relative to .dropdown and left:0 to .dropdown_list
.dropdown {
margin-left: 100px;
display: inline;
position: relative;/*add this*/
color: #FFF;
}
.dropdown_list {
list-style: none;
display: none;
position: absolute;
color: red;
left: 0; /*add this*/
}
Apply the left-margin to the container and set position: relative for the popup menu.
Example: https://jsfiddle.net/jt83vj28/
Related
In this jsfiddle I do have a menu which displays dropdown menus for some items. The main menu and the submenu items do have an increased height. I am using the line-height property for this purpose.
/* body ---------------------------------------------------------- */
body {
font-family: Calibri, sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
}
/* header ---------------------------------------------------------- */
header {
width: 100%;
}
.header-div {
width: 920px;
margin-left: auto;
margin-right: auto;
}
/* main-menu ---------------------------------------------------------- */
div.float-left-menu {
float: left;
clear: both;
}
ul#main-menu {
display: inline;
padding: 0;
position: relative;
font-size: 1.1em;
text-align: center;
}
ul#main-menu li {
display: inline-block;
line-height: 200%;
list-style: none;
vertical-align: middle;
width: 120px;
}
ul#main-menu li:hover {
background-color: #4f569d;
}
ul#main-menu li a {
background: none;
color: #4f569d;
text-decoration: none;
text-transform: uppercase;
}
ul#main-menu li span {
background: none;
color: #4f569d;
text-transform: uppercase;
}
ul#main-menu li:hover>a {
color: #fff;
text-decoration: none;
}
ul#main-menu li:hover>span {
color: #fff;
}
ul#main-menu li:hover>ul {
display: block;
position: absolute;
/*top: 138%; hack for FF, otherwise there is a gap between the main menu and the dropdown menu*/
}
/* header-submenu ---------------------------------------------------------- */
ul#header-submenu {
display: none;
padding: 0;
text-align: left;
z-index: 1;
}
ul#header-submenu li {
display: block;
line-height: 200%;
padding-left: 5%;
background-color: #bbb;
list-style: none;
vertical-align: middle;
width: 240px;
}
ul#header-submenu li:hover {
background-color: #4f569d;
}
ul #header-submenu li a {
background: none;
color: #4f569d;
text-decoration: none;
}
ul#header-submenu li:hover>a {
color: #fff;
text-decoration: none;
}
<header>
<div class="header-div">
<div class="float-left-menu">
<nav>
<ul id="main-menu">
<li>Item 1</li>
<li>
<span>Sub 1</span>
<ul id="header-submenu">
<li>SItem 1</li>
<li>SItem 2</li>
</ul>
</li>
<li>
<span>Sub 2</span>
<ul id="header-submenu">
<li>SItem 1</li>
<li>SItem 2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</nav>
</div>
</div>
</header>
While the dropdown menu is displayed seemlessly below its parent item in Chrome, IE and Edge, Firefox displays a gap, which not only looks unfavourable but also makes the dropdown go away when the mouse cursor is moved there for selection. The problem does not appear with 'normal' height.
For line-height: 200%; I was able to fix the problem by adding top: 138%; to the ul of the dropdown, but frankly this approach is too much try-and-error.
Is there a cleaner solution for Firefox?
Use position to get the same
Update css part
ul#main-menu li {
display: inline-block;
line-height: 200%;
list-style: none;
vertical-align: middle;
width: 120px;
position:relative; /*add this*/
}
ul#header-submenu {
display: none;
padding: 0;
text-align: left;
z-index: 1;
position:absolute; /*add this*/
top:auto; /*add this you can change as your need */
left:0px; /*add this you can change as your need */
}
/* body ---------------------------------------------------------- */
body {
font-family: Calibri, sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
/* put the top margin into the header, otherwise there will always be a vertical scrollbar */
}
/* header ---------------------------------------------------------- */
header {
width: 100%;
}
.header-div {
width: 920px;
margin-left: auto;
margin-right: auto;
}
/* main-menu ---------------------------------------------------------- */
div.float-left-menu {
float: left;
clear: both;
}
ul#main-menu {
display: inline;
padding: 0;
position: relative;
font-size: 1.1em;
text-align: center;
}
ul#main-menu li {
display: inline-block;
line-height: 200%;
list-style: none;
vertical-align: middle;
width: 120px;
position: relative;
}
ul#main-menu li:hover {
background-color: #4f569d;
}
ul#main-menu li a {
background: none;
color: #4f569d;
text-decoration: none;
text-transform: uppercase;
}
ul#main-menu li span {
background: none;
color: #4f569d;
text-transform: uppercase;
}
ul#main-menu li:hover>a {
color: #fff;
text-decoration: none;
}
ul#main-menu li:hover>span {
color: #fff;
}
ul#main-menu li:hover>ul {
display: block;
position: absolute;
/*top: 138%; hack for FF, otherwise there is a gap between the main menu and the dropdown menu*/
}
/* header-submenu ---------------------------------------------------------- */
ul#header-submenu {
display: none;
padding: 0;
text-align: left;
z-index: 1;
position: absolute;
top: auto;
left: 0px;
}
ul#header-submenu li {
display: block;
line-height: 200%;
padding-left: 5%;
background-color: #eee;
list-style: none;
vertical-align: middle;
width: 240px;
}
ul#header-submenu li:hover {
background-color: #4f569d;
}
ul #header-submenu li a {
background: none;
color: #4f569d;
text-decoration: none;
}
ul#header-submenu li:hover>a {
color: #fff;
text-decoration: none;
}
<!DOCTYPE html>
<body>
<header>
<div class="header-div">
<div class="float-left-menu">
<nav>
<ul id="main-menu">
<li>Item 1</li>
<li>
<span>Sub 1</span>
<ul id="header-submenu">
<li>SItem 1</li>
<li>SItem 2</li>
</ul>
</li>
<li>
<span>Sub 2</span>
<ul id="header-submenu">
<li>SItem 1</li>
<li>SItem 2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
Working fiddle also included
fiddle link
Drop down issues
I'm trying to make a purely CSS dropdown menu and I have looked at other questions about this, but none of the solutions seem to work. The problem I have is that when I hover over the drop down button, it does display the menu, however it brings the whole nav-bar down with it.
body {
background-color: #15083E;
margin: 0;
}
.top-buttons {
position: fixed;
width: 100%;
z-index: 99;
}
.top-buttons #logo {
font-family: arial;
text-align: center;
padding: 14px;
background-color: white;
}
.top-buttons>ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #15083E;
border-style: solid;
border-bottom: 1px solid white;
position: relative;
}
.top-buttons>ul>li {
float: left;
}
.top-buttons>ul>li>ul {
display: none;
background: #666;
padding: 0;
position: relative;
top: 100%;
}
.top-buttons>ul>li a {
display: block;
color: white;
font-family: arial, sans-serif;
text-align: center;
padding: 14px 16px;
text-decoration: none;
min-width: 7em;
}
.top-buttons li a:hover {
background-color: #CC3E54;
}
.active {
background-color: #CC3E54;
}
.top-buttons ul li:hover>ul {
display: block;
position: relative;
float: none;
max-width: 7rem;
}
.top-buttons ul ul {
display: none;
position: absolute;
vertical-align: top;
}
.top-buttons>ul ul>li {
background-color: #15083E;
list-style-type: none;
}
.top-buttons>ul ul>li a {
background-color: #15083E;
}
<nav class="top-buttons">
<ul>
<li id="logo">Logo</li>
<li><a class="active" href="index.htm">Home</a></li>
<li>Placeholder</li>
<li><a>DropDown</a>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Services</li>
</ul>
</nav>
My html probably isn't the best, i'm relatively new to it.
Any suggestions would be greatly appreciated!
Your HTML isn't bad. You were pretty close to a working solution. The main thing you were missing was that your dropdown needs to use absolute positioning inside it's relative positioned parent element. The reason the parent needs relative positioning is so that the absolute positioned child element (the dropdown menu) can be contained within it, otherwise it'll end up where you don't want it.
The other thing that was somewhat important to fix was overflow: hidden; on the top level ul. Once absolute positioning is in place for the dropdown, overflow hidden will hide anything that's outside of the ul. You don't want that. If you remove it then your bottom border doesn't end up where you want it so you need another way to clear the floated li. I used a clearfix to do this, hence the addition of the .cf class on the ul.
body {
background-color: #15083E;
margin: 0;
}
.top-buttons {
position: fixed;
width: 100%;
z-index: 99;
}
.top-buttons #logo {
font-family: arial;
text-align: center;
padding: 14px;
background-color: white;
}
.top-buttons>ul {
list-style-type: none;
margin: 0;
padding: 0;
/* overflow: hidden; */
background-color: #15083E;
border-style: solid;
border-bottom: 1px solid white;
/* position: relative; */
}
.top-buttons>ul>li {
position: relative;
/* added */
float: left;
}
.top-buttons>ul>li>ul {
display: none;
background: #666;
padding: 0;
/* position: relative; */
position: absolute;
/* top: 100%; */
}
.top-buttons>ul>li a {
display: block;
color: white;
font-family: arial, sans-serif;
text-align: center;
padding: 14px 16px;
text-decoration: none;
min-width: 7em;
}
.top-buttons li a:hover {
background-color: #CC3E54;
}
.active {
background-color: #CC3E54;
}
.top-buttons ul li:hover>ul {
display: block;
/* position: relative; */
/* float: none; */
max-width: 7rem;
}
/*
.top-buttons ul ul {
display: none;
position: absolute;
vertical-align: top;
}
*/
.top-buttons>ul ul>li {
background-color: #15083E;
list-style-type: none;
}
.top-buttons>ul ul>li a {
background-color: #15083E;
}
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
<nav class="top-buttons">
<ul class="cf">
<li id="logo">Logo</li>
<li><a class="active" href="index.htm">Home</a></li>
<li>Placeholder</li>
<li><a>DropDown</a>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Services</li>
</ul>
</nav>
I see a few areas of improvement for the CSS but overall not bad.
I've spent more time trying to do this than I'm willing to admit. I just can't seem to figure this out. I'm trying to build something which I believe is very simple. I've got a horizontal menu. And I want to have the submenu be vertical when someone hovers over a given link.
This is what I've got right now at RetirePhoenixArizona.com:
HTML
<nav class="secondary-navigation">
<div class="container">
<ul id="secondary-menu">
<li>Link 1
<ul class="secondary-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
</ul>
</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</nav>
CSS
#secondary-menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#secondary-menu li {
float: left;
width: 25%;
}
#secondary-menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#secondary-menu li a:hover {
background-color: #111;
}
#secondary-menu ul {
display: none;
}
#secondary-menu li:hover > ul {
position: relative;
display: inline;
width: 200px;
height: 45px;
position: absolute;
margin: 40px 0 0 0;
}
#secondary-menu li:hover > ul li {
float: none;
width: 100%;
}
Remove the float on the li of the submenu
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
width: 25%;
position: relative;
}
a {
display: block;
background: #333;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
ul ul {
display: none;
}
li:hover > ul {
display: block;
position: absolute;
left: 0;
top: 40px;
right: 0;
}
li:hover > ul li {
float: none;
width: 100%;
}
I Just do a responsive horizontal Menu ... here
If you don't need responsive remove all concern container , bar1,bar2,bar3, icon, change, #media screen and (max-width:680px) and the javascript
I'm trying to make a drop-down menu appear when mouse-hovered, but for some reason, the menu doesn't appear.
* {
margin: 0;
padding: 0;
}
.header {
position: fixed;
list-style-type: none;
height: 35px;
width: 100%;
overflow: hidden;
background: #333333;
}
.header > li {
display: inline-block;
padding: 8px;
}
.header > li:hover {
background: #000000;
}
.home {
margin-left: 10%;
}
.home a:link {
color: #FFF;
}
.home a:visited {
color: #AAA;
}
.home a:hover {
color: #00F;
}
.home a:active {
color: #F00;
}
.dropdown {
display: block; /* I guess that something is wrong here */
width: auto;
color: #FFF;
}
.dropdown li {
list-style-type: none;
display: block; /* I guess that something is wrong here too */
position: absolute; /* and here */
top: 100%;
color: red;
width: auto;
opacity: 0;
background: yellow;
border: 1px solid black;
transition: opacity 1s;
}
.dropdown:hover,
.dropdown li:hover {
opacity: 1;
}
.main {
margin-top: 20px;
padding-top: 20px;
height: 50px;
display: block;
background: white;
text-align: center;
font-size: 20px;
transition: background 1s;
}
.main:hover {
background: #CCCCCC;
}
<body>
<ul class="header">
<li class="home">⌂ Home
</li>
<li class="dropdown">Dropdown ❱
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
<br>
<section>
<div class="main">
Content...
</div>
</section>
</body>
I'm trying to do this using CSS and HTML only.
I've commented beside three lines which I think are causing the problem, but I can't seem to figure it out. What is the issue? How do I fix it?
Firstly, we remove the overflow:hidden from the header which would stop the submenus from showing at all.
Then the parent li should be set to position:relative and the child ul to position:absolute (not the individual li).
Remove the display:none on :hover and there you are.
* {
margin: 0;
padding: 0;
}
.header {
position: fixed;
list-style-type: none;
height: 35px;
width: 100%;
/*overflow: hidden;*/
background: #333333;
}
.header > li {
display: inline-block;
padding: 8px;
}
.header > li:hover {
background: #000000;
}
.home {
margin-left: 10%;
}
.home a:link {
color: #FFF;
}
.home a:visited {
color: #AAA;
}
.home a:hover {
color: #00F;
}
.home a:active {
color: #F00;
}
.dropdown {
color: #FFF;
position: relative;
}
.dropdown ul {
list-style-type: none;
position: absolute;
/* and here */
top: 100%;
left: 0;
color: red;
width: auto;
display: none;
background: yellow;
border: 1px solid black;
}
.dropdown:hover ul {
display: block;
}
.main {
margin-top: 20px;
padding-top: 20px;
height: 50px;
display: block;
background: white;
text-align: center;
font-size: 20px;
transition: background 1s;
}
.main:hover {
background: #CCCCCC;
}
<body>
<ul class="header">
<li class="home">⌂ Home
</li>
<li class="dropdown">Dropdown ❱
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
<br>
<section>
<div class="main">
Content...
</div>
</section>
</body>
All nested ULs need to be aligned to the right of their parent LI. Currently the nested ULs seem to be aligning to to the right of a higher level NAV element instead.
Live Code
Link here to fiddle with HTML and problem CSS
HTML
<body>
<div id="header">
<div id="header-content-container"> Logo!
<div id="top-nav-container">
<nav>
<ul>
<li>HOME
</li>
<li>SERVICES
<ul>
<li>Item 00000000
</li>
<li>Item 000000000000000
</li>
<li>Item 000000000000000
</li>
<li>Item 00000000000000
</li>
<li>Item 0000000000000
</li>
<li>Item 000000000000
</li>
<li>Item 000000000
</li>
</ul>
</li>
<li><a herf="#">LIBRARY</a>
</li>
<li>CONTACT
<ul>
<li>Item 0
</li>
<li>Item 00
</li>
<li>Item 000
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="clearer"></div>
</body>
CSS
.clearer {
clear: both;
}
body {
background: none repeat scroll 0 0 red;
font-family:sans-serif;
font-size: 13px;
margin: 0;
padding: 0;
position: relative;
vertical-align: baseline;
}
div#header {
background-color: white;
float: left;
height: 76px;
margin: 0;
padding: 0;
width: 100%;
}
div#header-content-container {
height: 100%;
margin: 0;
width: 768px;
background: black;
}
a#logo {
background: blue;
float: left;
height: 50px;
margin: 12px 0 0 19px;
width: 260px;
}
#top-nav-container {
float: right;
margin: 10px 0 0;
position: relative;
z-index: 9000;
}
nav {
float: right;
margin: 0 9px 0 0;
}
nav ul {
display: inline-table;
list-style: outside none none;
padding: 0;
position: relative;
}
nav ul::after {
clear: both;
content:"";
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: green;
}
nav ul li:hover > ul {
display: block;
}
nav ul li a {
color: #eee;
display: block;
padding: 16px 15px;
text-decoration: none;
}
nav ul li:hover a {
color: orange;
}
nav ul ul {
background: none repeat scroll 0 0 #343434;
border-radius: 0;
left: auto;
padding: 0;
position: absolute;
right: 0;
top: 100%;
display: none;
}
nav ul ul li {
float: none;
border-top: 1px solid purple;
border-bottom: 1px solid blue;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: yellow;
}
nav ul ul li a:hover {
background: cyan;
}
Problem
Check the updated fiddle.
I have modified the nav ul ul class
nav ul ul { background: none repeat scroll 0 0 #343434;
border-radius: 0;
padding: 0;
position: absolute;
left: -48px;
top: 100%;
display: none;
}