I've been copying and pasting my dropdown menus for years but not fully understanding the function behind them. I decided to start my own from scratch with a minimum of code. The basics are there, but I can't figure out how to align the dropdown horizontally. I've looked at dozens of examples posted here, but I'm missing something.
Currently:
Desire:
Sample:
* { font-family: verdana;
box-sizing: border-box; /* use instead of padding-left: 0 ?? */}
li { list-style: none; padding: 4px 0; border: 1px solid green; }
a { text-decoration: none; }
ul li a { color: blue; }
ul li ul li a { color: red; }
ul li a:hover { opacity: 0.3; }
/*--------------
Salient code
----------------*/
ul li {
float: left; /* horizontal */
width: 120px;
position: relative;
}
ul li:hover ul {
/* left: auto; */
display: block
}
ul li ul {
position: absolute;
display: none; /* left: -999em; */
top: 28px;
padding-left: 0;
}
<ul>
<li>Top One</li>
<li>Top Two</li>
<li>Top Three
<ul>
<li>Middle One</li>
<li>Middle Two</li>
<li>Middle Three</li>
</ul>
</li>
</ul>
Just set padding-left to zero on your UL. Marked up code below.
* {
font-family: verdana;
}
li {
list-style: none;
padding: 4px 0;
border: 1px solid green;
}
a {
text-decoration: none;
}
ul li a {
color: blue;
}
ul li ul li a {
color: red;
}
ul li a:hover {
opacity: 0.3;
}
/*--------------
Salient code
----------------*/
ul li {
float: left;
/* horizontal */
width: 120px;
position: relative;
}
ul li:hover ul {
left: auto;
}
ul li ul {
position: absolute;
left: -999em;
top: 28px;
/* Just set padding-left to zero here */
padding-left:0;
}
<ul>
<li>Top One</li>
<li>Top Two</li>
<li>Top Three
<ul>
<li>Middle One</li>
<li>Middle Two</li>
<li>Middle Three</li>
</ul>
</li>
</ul>
Related
The submenu is not working correctly. It should appears when hover on specific item, but its appearing when hover any item
HTML
<div class="sty">
<ul class="met_clean_list">
<li>Link 01</li>
<ul>
<li><b>Sublink 01</b></li>
<li><b>Sublink 02</b></li>
</ul>
<li>Link 02</li>
<li>Link 03</li>
</ul>
</div>
CSS
.sty {
background:#aaa;
float:left;
width:600px;
}
.sty ul li {
list-style:none;
position:relative;
padding:25px 10px;
float:left;
}
.sty ul ul{
display:none;
}
.met_clean_list:hover ul {
display:block;
background:red;
}
https://jsfiddle.net/59opc6tj/119/
That's because the hover rule you specified doesn't do what you wish it will do.
You have written: If I hover on .met_clean_list, make all uls within it displayed.
What you wanted to write: If I hover on one of the lis, make the following ul visible.
Thus, you should write .met_clean_list li:hover + ul
.sty {
background: #aaa;
float: left;
width: 600px;
}
.sty ul li {
list-style: none;
position: relative;
padding: 25px 10px;
float: left;
}
.sty ul ul {
display: none;
}
.met_clean_list li:hover + ul {
display: block;
background: red;
}
.sty ul ul:hover {
display: block;
}
<div class="sty">
<ul class="met_clean_list">
<li>Link 01</li>
<ul>
<li><b>Sublink 01</b></li>
<li><b>Sublink 02</b></li>
</ul>
<li>Link 02</li>
<li>Link 03</li>
</ul>
</div>
Notice that I also added:
.sty ul ul:hover {
display: block;
}
So the dropdown won't disappear when you hover on it.
I hope this code will be useful for you
Html:
<ul>
<li>Home</li>
<li>Blog</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
css:
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;
}
demo:
https://jsfiddle.net/faridvatani/54qypuds/
why Increased Height item Contact when hover on it? how fix it?
This is My code :
ul {
padding: 0;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}
#nav > li {
float: left;
}
#nav li {
list-style: none;
width: 150px;
position: relative;
border: 1px solid red;
box-sizing: border-box;
}
#nav a {
display: block;
background-color: #000;
color: red;
text-decoration: none;
padding: 10px 20px;
text-align: center;
box-sizing: border-box;
border: 2px solid transparent;
}
#nav ul ul {
position: absolute;
left: 150px;
top: 0;
}
#nav li:hover > a {
color: orange;
}
#nav li:hover > a:after {
content:'\25B6';
color: red;
margin-left: 5px;
padding: 0;
}
#nav > li:hover > a:after {
content: '\25BE';
color: red;
margin-left: 5px;
padding: 0;
}
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Products
<ul>
<li>Product 1</li>
<li>Product 2
<ul>
<li>Model 1</li>
<li>Model 2</li>
<li>Model 3</li>
</ul>
</li>
<li>Product 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Service 1</li>
<li>Service 2</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
See This Image :
When you hover over the list items - you're adding an arrow to the anchor tag via generated content.
Thant's what's causing the increase in height.
To fix this - just set position:absolute on the generated content.
ul {
padding: 0;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}
#nav > li {
float: left;
}
#nav li {
list-style: none;
width: 150px;
position: relative;
border: 1px solid red;
box-sizing: border-box;
}
#nav a {
display: block;
background-color: #000;
color: red;
text-decoration: none;
padding: 10px 20px;
text-align: center;
box-sizing: border-box;
border: 2px solid transparent;
}
#nav ul ul {
position: absolute;
left: 150px;
top: 0;
}
#nav li:hover > a {
color: orange;
}
#nav li:hover > a:after {
content:'\25B6';
color: red;
margin-left: 5px;
padding: 0;
position:absolute;
}
#nav > li:hover > a:after {
content: '\25BE';
color: red;
margin-left: 5px;
padding: 0;
}
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Products
<ul>
<li>Product 1</li>
<li>Product 2
<ul>
<li>Model 1</li>
<li>Model 2</li>
<li>Model 3</li>
</ul>
</li>
<li>Product 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Service 1</li>
<li>Service 2</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
Because of
#nav > li:hover > a:after {
content: '\25BE';
}
the height (font size) is to high of this content.
maybe you should try a background-img.
Or position it absolute and the a-tag relative.
Its because of the :after content attribute (#nav > li:hover > a:after) you are adding on hover(the small arrow icon)
To avoid this, applying line-height: 0 is an efficient way of doing it.
#nav > li:hover > a:after {
content: '\25BE';
color: red;
margin-left: 5px;
padding: 0;
line-height: 0; //fix
}
Also you have this code twice, make sure you remove the redundant one.
It simple line height issue.
ul {
padding: 0;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}
#nav > li {
float: left;
}
#nav li {
list-style: none;
width: 150px;
position: relative;
border: 1px solid red;
box-sizing: border-box;
}
#nav a {
display: block;
background-color: #000;
color: red;
text-decoration: none;
padding: 10px 20px;
text-align: center;
box-sizing: border-box;
border: 2px solid transparent;
line-height: 20px;
}
#nav ul ul {
position: absolute;
left: 150px;
top: 0;
}
#nav li:hover > a {
color: orange;
}
#nav li:hover > a:after {
content:'\25B6';
color: red;
margin-left: 5px;
padding: 0;
}
#nav > li:hover > a:after {
content: '\25BE';
color: red;
margin-left: 5px;
padding: 0;
}
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Products
<ul>
<li>Product 1</li>
<li>Product 2
<ul>
<li>Model 1</li>
<li>Model 2</li>
<li>Model 3</li>
</ul>
</li>
<li>Product 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Service 1</li>
<li>Service 2</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
I'm working on this project: http://www.livingthelighterlife.com/
The top navigation bar (Home, About, Contact, Work With Me) is giving me some difficulty. I have a hover submenu right now under the "About" section, but it is appearing under the header, for lack of a better explaination. I've messed with the z-index and that doesn't seem to be doing anything. Not quite sure what else to try.
Thanks in advance!
#top-navigation {
float: left;
}
#top-navigation ul {
list-style: none;
position: relative;
}
#top-navigation ul a {
display: block;
color: #ffffff;
text-decoration: none;
}
#top-navigation ul li {
position: relative;
float:left;
margin: 0px 10px;
}
#top-navigation ul li:hover {
background: #f6f6f6;
}
#top-navigation ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #ffffff;
padding: 0;
}
#top-navigation ul ul li {
float:none;
width:200px
}
#top-navigation ul ul a {
line-height: 120%;
padding: 10px 15px;
}
#top-navigation ul ul ul {
top: 0;
left: 100%;
}
#top-navigation ul li:hover > ul {
display: block;
}
<div class="before-header"><section id="text-5" class="widget widget_text"><div class="widget-wrap"> <div class="textwidget"><nav id="top-navigation">
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>
Contact
</li>
<li>
Work With Me
</li>
</ul>
</nav></div>
</div></section>
</div>
In header section in this class .before-header you are using overflow hidden. That's why your submenu doesn't show. You can not use overflow hidden where you want to use submenu. Just remove overflow hidden.
check the header div with class .before-header, Do the following change:
.before-header {
z-index: 500;
background: #6d5d68;
clear: both;
/* overflow: hidden; */
padding: 7px 0;
text-align: center;
font-family: 'Arquitecta-Medium', 'Source Sans Pro', Helvetica, Arial, sans-serif;
font-size: 12px;
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
}
I'm new to this - sorry if this is a silly problem. When I hover over the dropdown menu options, the submenu appears, but the background of the submenu has a width of 100%, like the main menu. How can I alter it so that the submenu has a width only of, say, the tab it originates from?
Also, apologies for messy coding. I was playing around with jquery so there are some unnecessary tags in there...
Here is the CSS code:
#menu {
float:left;
width:100%;
background-color:#f23918;
overflow:hidden;
position:relative;
}
#menu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
font-weight: bold;
color: #ffffff;
white-space: nowrap;
background-color: #f23918;
text-align: center;
padding: 10px;
text-transform: uppercase;
}
ul li a:hover {
background: #f29c18;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li { /*Controls dropdowns*/
float: none;
font-size: 11px;
}
li:hover a { background: #f23918;
}
li:hover li a:hover
{
background: #f29c18;
}
and Here is the HTML code:
<div id="menu">
<ul id="navbar">
<li class="active"><span>Home</span></li>
<li class="has-sub"><span>Alpaca Wool Products</span>
<ul class="submenu">
<li><span>Fur Hats</span></li>
<li><span>Capes</span></li>
<li><span>Ponchos</span></li>
<li><span>Shawls</span></li>
<li class="last"><span>Scarves</span></li>
</ul>
</li>
<li class="has-sub"><span>Home Décor</span>
<ul class="submenu">
<li><span>Rugs</span></li>
<li><span>Tapestries</span></li>
<li><span>Throws</span></li>
<li><span>Upholstery</span></li>
<li class="last"><span>Teddy Bears</span></li>
</ul>
</li>
<li><span>About Us</span></li>
<li class="last"><span>Artisans</span></li>
</ul>
</div>
Ok. Here a workout. There might better solution exists.
First you need to give a fixed height to div#menu. Also I dont think you need a float there. Remove overflow hidden and position relative.
#menu {
width:100%;
background-color:#f23918;
height: 38px;
}
Then for submenu add following
li ul {
display: none;
min-width: 100%;
white-space: nowrap;
}
Last solution actually credited to https://stackoverflow.com/a/13775531/2120162
Here you can find how it looks. https://jsfiddle.net/theprog/3h8wpx97/1/
Update: Fixed moving part. Thanks #dowomenfart
li ul {
display: none;
min-width: 100%;
white-space: nowrap;
position:absolute !important;
z-index: 100;
}
Rather than tweaking your code I rewrote a simplified version based on what you need.
$(document).ready(function () {
$("#navbar > li").mouseover(function () {
if (!$(this).hasClass("active")) {
$(this).addClass("active");
$(this).mouseout(function () {
$(this).removeClass("active");
});
}
});
});
#navbar {
background: #f23918;
padding: 0;
margin: 0;
font-size: 0; /*fix inline block gap*/
}
#navbar > li {
font-size: 16px;
list-style: none;
position: relative;
display: inline-block;
padding: 0;
margin: 0;
}
#navbar > li > a {
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
font-weight: bold;
padding: 10px;
display: block;
color: #fff;
}
#navbar > li > a:hover,
#navbar > li.active > a,
#navbar > li > ul {
background: #f29c18;
}
#navbar > li > ul {
display: none;
white-space: nowrap;
padding: 0 0 5px;
margin: 0;
position: absolute;
left: 0;
top: 36px;
}
#navbar > li > ul > li {
display: block;
margin: 10px 20px;
padding: 0;
}
#navbar > li > ul > li > a {
color: #fff;
}
#navbar > li:hover > ul {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="navbar">
<li>
Item A
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item B
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li class="active">
Item C
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item D NoSub
</li>
</ul>
I've read all the questions concerning centering submenus. But I don't get my problem solved.
I have a simple navigation bar with 2 submenus.
You can find it here: Fiddle.
ul#nav, ul#sub1, ul#sub2 {
list-style-type: none;
}
ul#nav {
position: relative;
}
ul#nav li {
width: 125px;
text-align: center;
float: left;
margin-right: 4px;
}
ul#nav a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
color: #000;
}
ul#sub1 a, ul#sub2 a {
margin-top: 4px;
}
ul#nav li:hover > a {
background-color: #6E6E6E;
color: #FFF;
}
ul#nav li:hover a:hover {
background-color: #E2E2E2;
color: #000;
}
ul#sub1, ul#sub2 {
display: none;
position: absolute;
left: 0px;
}
ul#nav li:hover ul#sub1 {
display: block;
}
ul#sub1 li:hover ul#sub2 {
display: block;
}
<nav>
<ul id="nav">
<li>Reisen
<ul id="sub1">
<li>Europa</li>
<li>Amerika</li>
<li>Asien
<ul id="sub2">
<li>Thailand</li>
<li>Bhutan</li>
<li>China</li>
<li>Vietnam</li>
<li>Japan</li>
</ul>
</li>
<li>Afrika</li>
<li>Australien</li>
</ul>
</li>
<li>Magazin</li>
<li>Karriere
<ul id="sub1">
<li>Thema 1</li>
<li>Thema 2</li>
<li>Thema 3</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
</nav>
I want the submenu centered. When I hover over "Reisen" the submenu gets the same width like the main menu.
When I hover over "Karriere", I want the submenu centered under "Karriere" and not positioned left under "Reisen".
I was thinking of a span-element to the button "Karriere" but I couldn't solve it.
Thanks for your help.
I don't really now if this is what you're looking for or not, but maybe something like this?
Note: I made a few changes to your CSS and HTML, mainly changing everything to use classes instead of IDs
JS Fiddle Example
HTML
<nav>
<ul id="nav">
<li>Reisen
<ul class="sub">
<li>Europa</li>
<li>Amerika</li>
<li>Asien
<ul class="sub-second">
<li>Thailand</li>
<li>Bhutan</li>
<li>China</li>
<li>Vietnam</li>
<li>Japan</li>
</ul>
</li>
<li>Afrika</li>
<li>Australien</li>
</ul>
</li>
<li>Magazin</li>
<li>Karriere
<ul class="sub">
<li>Thema 1</li>
<li>Thema 2</li>
<li>Thema 3</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
CSS
ul#nav, ul.sub {
list-style-type: none;
}
ul#nav {
position: relative;
}
ul#nav li {
width: 125px;
text-align: center;
float: left;
margin-right: 4px;
position: relative;
}
ul#nav a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
color: #000;
}
ul.sub a {
margin-top: 4px;
}
ul#nav li:hover > a {
background-color: #6E6E6E;
color: #FFF;
}
ul#nav li:hover a:hover {
background-color: #E2E2E2;
color: #000;
}
ul.sub {
display: none;
position: absolute;
left: 0px;
padding-left: 0;
}
ul.sub-second {
display: none;
list-style: none;
left:100px;
top: 0;
position: absolute;
}
ul#nav li:hover ul.sub {
display: block;
}
ul#nav li:hover ul.sub li:hover ul.sub-second {
display:block;
}
}