I have a menu with margin-top and margin-left of 12 pixels for the elements that are inside another , but when the cursor is between that space (margin), the menu is hidden. I can solve that if I remove position:absolute, but I need it. How can I solve this?
HTML
<ul>
<li>Home</li>
<li>Food
<ul>
<li>Chilean food</li>
<li>Chinese food</li>
<li>Mexican food
<ul>
<li>Nachos</li>
<li>Quesadillas</li>
<li>Tacos</li>
</ul>
</li>
</ul>
CSS
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
ul li {
position: relative;
}
ul li ul {
display: none;
position: absolute;
margin-top: 4px;
}
ul li:hover > ul {
display: block;
}
ul li a {
text-decoration: none;
padding: 12px;
display: block;
background: black;
color: white;
white-space: nowrap;
}
ul li ul li ul {
top: 0;
left: 100%;
margin-top: 0;
margin-left: 4px;
}
JSFiddle: https://jsfiddle.net/v3ebd6hy/3/
Thanks!
Change the margin-top to padding-top in ul li ul.
Fiddle for Reference
Related
I'm trying to create a drop-down menu but my text-align command wouldn't seem to work (same applies with font-size and other text-related codes). I tried putting my text-align codes in nav ul li and nothing seem to happen. I've also tried putting it on the main .drop-down menu on CSS but it still has no changes. Can anyone help me out here? I couldn't figure out the reasoning behind this.
My HTML and CSS codes are:
nav{
flex:1;
text-align: right;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 60px;
position: relative;
}
nav ul li a{
text-decoration: none;
color: #fff;
font-size: 13px;
transition: all 0.5s;
}
nav ul li a:hover{
color: #E6C7F3;
}
.dropdown-menu{
display: none;
}
nav ul li:hover .dropdown-menu {
display: block;
position: absolute;
left: -35;
top: 100%;
width: 100px;
background-color:black;
opacity: .8;
border-radius: 10px;
}
.dropdown-menu ul{
display: block;
padding-top: 10px;
}
.dropdown-menu ul li{
width: 0px;
left: -58;
bottom: 5;
padding: 10px;
padding-right: 40px;
text-align: center;
}
<div class="navbar">
<img src="image/durra.png" class="logo">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>SHOP
<div class="dropdown-menu">
<ul>
<li>Bestsellers</li>
<li>Accessories</li>
<li>Jewelry</li>
<li>Miscellaneous</li>
</ul>
</div>
</li>
<li>FEEDBACK</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
text-align works with a element having width. But you have used width: 0px . So it's pretty obvious you cannot use alignment there.
Hi First you have to add padding to ul under dropdown-menu. and then set width of li item to 100%. Please refer below code.
.dropdown-menu ul {
display: block;
padding-top: 10px;
padding: 10px 0 0;
}
.dropdown-menu ul li {
width: 100%;
left: -58;
bottom: 5;
padding: 10px 0;
/* padding-right: 40px; */
text-align: center;
}
I have container with width of 100% and inside of it i have a menu. When i want to apply background color to menu container nothing happens, its killing me i cant figure it out.
It works when i apply display inline-block on it but why would i need to display it differently its only a container 100% width
menu {
width: 100%;
background: #333;
}
.menu > ul {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
.menu > ul > li {
float: left;
background: #e9e9e9;
display: inline-block;
padding: 0;
margin: 0;
}
.menu > ul > li > a {
text-decoration: none;
padding: 1.5em 3em;
display: inline-block;
outline: 0 none;
}
.menu > ul > li > ul {
display: none;
background: #333;
padding: 20px 30px;
position: absolute;
width: 100%;
z-index: 99;
left: 0;
color: #fff;
margin: 0;
}
.menu > ul > li:hover > ul {
display: block;
}
and this is my html
<div class="menu">
<ul>
<li>Home
<ul>
This is also mega menu
</ul>
</li>
<li>Who are we?
<ul>
This is mega menu
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
also when i try to float my UL to right nothing happens. Did i mess up my display: in any element ?
That's because your LI elements are floated. In this case, container will have a height of 0 pixels. You need to clear the container (.menu) first. There's also a slight error on the MENU element - you forgot to add the DOT .menu (to be a class, as in your html code).
To clear floats, read this > https://css-tricks.com/the-how-and-why-of-clearing-floats/
.menu:before,
.menu:after {
content: "";
display: table;
}
.menu:after {
clear: both;
}
A working scenario, on jsfiddle, here > jsfiddle.net/4pgvzxs0/
I am new to website design, and there are a few flaws in my navbar that I cannot fix.
I cannot get the navbar to center properly.
When the screen resolution changes, the list overflows into the next line.
there is 1 list element that is sized differently and I cannot seem to figure out why.
Here is the code:
https://jsfiddle.net/b02nm6ae/#update
CSS:
.nav_wrapper {
z-index: 9999;
padding: 0;
margin: 0;
width: 100%;
min-width: 50px;
}
.nav_wrapper ul {
display: block;
position: relative;
position: fixed;
/* fixes automatic values set by ul */
margin: 0;
padding: 0;
}
.nav_wrapper ul li {
list-style: none;
display: list-item;
background-color: #993300;
float: left;
}
/* hides the submenu by default */
.nav_wrapper ul ul {
display: none;
position: absolute;
}
/* makes the sub menu appear on hover over list element */
.nav_wrapper ul li:hover > .sub_nav1 {
display: list-item;
list-style: none;
}
/* lists the list items on top of one another */
.nav_wrapper ul .sub_nav1 li {
float: none;
position: relative;
}
.nav_wrapper ul li a{
display: block;
text-decoration: none;
color: #ffffff;
padding: 12px;
}
.nav_wrapper li a:hover{
color: #000;
background-color: #ffffff;
}
/* Dropdown Menu arrow */
.nav_wrapper ul li > a:after {
content: '\25BE';
}
.nav_wrapper ul li > a:only-child:after {
content: '';
}
HTML:
<body>
<!-- NAV -->
<div class="nav_wrapper">
<ul class="nav">
<li>Home</li>
<li>Calandar</li>
<li>About Us
<ul class="sub_nav1">
<li>The Pastor</li>
<li>History</li>
<li>About Byzantines</li>
</ul>
</li>
<li>Mass Times</li>
<li>Contact Us</li>
</ul>
<div>
<!-- SECTION 1 -->
</body>
</html>
Once you float the li then centering becomes problematical. In these instances, it's often preferred to use display:inline-block and center then by applying text-align:center to the parent ul.
This does have a white-space downside but there are methods around that, one of which (font-size) I have used here.
As for the single element with the greater height...that was caused by the pseudo-element...so slapped a quick patch over it. Frankly, I would be applying a class to the parent li and using a pseudo-element on the li but that's another debate entirely.
body {
font-family: 'Didact Gothic', sans-serif;
padding: 0;
margin: 0;
background-color: #CCCCFF;
}
.nav_wrapper ul {
display: block;
margin: 0;
padding: 0;
text-align: center;
font-size: 0;
/* remove whitespace */
}
.nav_wrapper ul li {
list-style: none;
display: inline-block;
vertical-align: top;
background-color: #993300;
position: relative;
font-size: 1rem;
/* font-size reset */
}
/* hides the submenu by default */
.nav_wrapper ul ul {
display: none;
top: 100%;
left: 0;
position: absolute;
}
/* makes the sub menu appear on hover over list element */
.nav_wrapper ul li:hover > .sub_nav1 {
display: block;
width: 100%;
}
/* lists the list items on top of one another */
.nav_wrapper ul .sub_nav1 li {
position: relative;
width: 100%;
}
.nav_wrapper ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 12px;
}
.nav_wrapper li a:hover {
color: #000;
background-color: #ffffff;
}
/* Dropdown Menu arrow */
.nav_wrapper ul> li > a:after {
content: '\25BE';
line-height: 0;
}
.nav_wrapper ul li > a:only-child:after {
content: '';
}
<div class="nav_wrapper">
<ul class="nav">
<li>Home
</li>
<li>Calendar
</li>
<li>About Us
<ul class="sub_nav1">
<li>The Pastor
</li>
<li>History
</li>
<li>About Byzantines
</li>
</ul>
</li>
<li>Mass Times
</li>
<li>Contact Us
</li>
</ul>
<div>
Well I notice that if I set a 25 pixel height to
.nav_wrapper ul li a
that removes the extra space for example..
.nav_wrapper ul li a{
height:25px;
display: block;
text-decoration: none;
color: #ffffff;
padding: 12px;
}
https://jsfiddle.net/b02nm6ae/9/
Having some trouble with my nav, i'm trying to create a dropdown menu when you hover over the "Match" link. every time I hover the mouse over the link, list will stay underneath said link and disrupt how the navigation bar looks. Any helps will be much appreciated
HTML
<nav>
<span class= "navbar-button"></span>
<ul class="navbar">
<li>Home</li>
<li>Gallery</li>
<li>Match
<ul>
<li>City</li>
<li>Coastal</li>
<li>Rural</li>
</ul>
</li>
</ul>
</nav>
CSS
body{
padding: 0;
margin: 0;
font-family: 'main';
}
.navbar {
list-style: none;
background-color: #333;
color: #fff;
margin: 0;
text-align: center;
}
.navbar > li {
display: inline-block;
padding: 1.3% 2%;
}
.navbar > li:hover {
background-color: #585858;
}
.navbar > li > a{
text-decoration: none;
font-size: 30px;
color: #fff;
}
.navbar li ul {
display: none;
}
.navbar li:hover ul{
display: block;
}
you need to use absolute positioning to break it out of the container so it won't disrupt the rest of the elements:
.navbar li ul {
position: absolute;
display: none;
background-color: #333;
margin: 0;
text-align: center;
padding: 20px;
}
Be sure to set its parent to position: relative or the body will become its container:
.navbar > li {
position: relative;
display: inline-block;
padding: 1.3% 2%;
}
JSFIDDLE
Add position absolute to: .navbar li ul
This is what I'm trying to do:
If you noticed there is space between the menu and the submenu.
The problem is that the submenu doesn't work this way, because when the mouse pointer leaves the menu the submenu disappears.
It only works if it looks like this:
How can I leave the space between the menu and the submenu and get it to work?
My Code:
JSFIDDLE CODE
HTML:
<body>
<nav>
<ul>
<li>One
<ul>
<li>1.1</li>
<li>1.2
</ul>
</li>
<li>Two
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>Three
<ul>
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
<li>Four</li>
</ul>
</nav>
</body>
CSS:
body {
background-color: #cac3bc
}
nav {
float: left;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background-color: #fff;
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
margin-right: -80px;
}
nav ul li {
float: left;
}
nav ul li:hover {
border-bottom: 5px solid #f5aa65;
color: #fff;
}
nav ul li a:hover {
color: #000;
}
nav ul li a {
display: block;
padding: 15px 15px;
font-family: 'PT Sans', sans-serif;
color: #000;
text-decoration: none;
}
nav ul ul {
background-color:#fff;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #000;
}
You could make use of :before to extend the "hoverable" area:
nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
See this demo.
The accepted answer is beautifully simple and perfect. However, I want to add an alternative for others like myself who had to use a variation of the answer above. In my situation my sub menu is full width so to do that I do an absolute position on my sub menu to start just below the main menu - I introduce the :before element to bring in a gap of 100px. Therefore my :before code is
// Define the 100px gap between menu and submenu.
&:hover ul.sub-menu:before {
content: "";
display: block;
//Note: This height starts at the top:100% of the position absolute for the ul.sub-menu below,
//pushing the sub-menu down by the height defined here.
height: 100px;
width: 100%;
background-color: transparent;
}
The code to place the sub-menu at an absolute position below the main menu and full width is
&:hover ul.sub-menu {
background-color: transparent;
display: block;
position: absolute;
border-top: 10px solid red;
top: 100%;
left: 0;
width: 100%;
// Sub-menu appears on top of main menu.
z-index: 1;
enter code here