I'm having trouble with the dropdown menu of my blog. When I hover over "Plamo Reviews", it doesn't drop down the sub-menus. I read some articles related to this but still cannot find any solution. I think I did something wrong with the CSS.
Could anyone help me?
I'd appreciate any help. Thank you in advance!
nav.fixnavbar {
position: relative;
display: block;
width: 100%;
background: #778595;
z-index: 99;
padding: 0;
margin-bottom: 0;
font-size: 0;
opacity: 1;
}
.fixednav {
position: relative;
margin: 0 auto;
padding: 0;
max-width: 1010px;
}
.fixednav li {
display: inline-block;
position: relative;
}
.fixednav li a {
display: inline-block;
padding: 20px;
color: #fff;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
}
.fixednav li a:hover {
background: #6c7a89;
color: #fff;
}
.nav-icon {
display: none;
}
nav.fixnavbar.main-nav-scrolled {
position: fixed;
top: 0;
left: 0;
opacity: 0.97;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.sub-menu li {
display: none;
}
.fixednav li {
position: relative;
}
.sub-menu {
display: none;
position: absolute;
}
.fixednav li:hover .sub-menu {
display: block;
}
<nav class='fixnavbar'>
<ul class='fixednav' id='togglemenu'>
<li><a href='/'>Home</a></li>
<li><a href='/search/label/list'>List bài viết</a></li>
<li><a href='/search/label/kinh-nghiem'>Kinh nghiệm</a></li>
<li><a href='/search/label/review'>Plamo Reviews</a>
<ul class="sub-menu">
<li>No1</li>
<li>No2</li>
</ul>
</li>
<li class='indzign-box' onclick='document.getElementById('indzignbox').style.top='60px';document.getElementById('count-box').style.display='none';'><i class='fa fa-bars' /></li>
</ul>
</nav>
To achieve the behaviour you want, there are two things you should probably change:
You can get rid of the CSS rule that gives your sub-menus li elements a value of display: none as it's unnecessary. If the parent .sub-menu is set to display: none then the children will inherit that automatically.
You've set your .sub-menu to be position: absolute, but you haven't specified any additional CSS rules to indicate where it should go relative to its parent. So, for example, you can try making your .sub-menu rules look like the following:
.sub-menu {
display: none;
position: absolute;
top: 75px;
background: #ccc;
}
This way, you're saying that your menu should be positioned 75 pixels beneath its parent. The background is just so that your sub-menu is visible against the rest of your app (you can modify this to whatever you like, of course).
I don't think Stackoverflow is a place to get your homework done. Yet, here's a working sample with the minimal fixes to make it work.
You were missing the position (top) for the sub-menu and it was right beneath the fixed-nav.
There was no background-color for the sub-menu items, so the text which is white was not visible.
nav.fixnavbar {
position: relative;
display: block;
width: 100%;
background: #778595;
z-index: 99;
padding: 0;
margin-bottom: 0;
font-size: 0;
opacity: 1;
}
.fixednav {
position: relative;
margin: 0 auto;
padding: 0;
max-width: 1010px;
}
.fixednav li {
display: inline-block;
position: relative;
background-color: #6b7684;
}
.fixednav li a {
display: inline-block;
padding: 20px;
color: #fff;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
}
.fixednav li a:hover {
background: #6c7a89;
color: #fff;
}
.nav-icon {
display: none;
}
nav.fixnavbar.main-nav-scrolled {
position: fixed;
top: 0;
left: 0;
opacity: 0.97;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.fixednav li {
position: relative;
}
.sub-menu {
display: none;
position: absolute;
top: 54px;
left: 0;
}
.fixednav li:hover .sub-menu {
display: block;
}
<nav class='fixnavbar'>
<ul class='fixednav' id='togglemenu'>
<li><a href='/'>Home</a></li>
<li><a href='/search/label/list'>List bài viết</a></li>
<li><a href='/search/label/kinh-nghiem'>Kinh nghiệm</a></li>
<li><a href='/search/label/review'>Plamo Reviews</a>
<ul class="sub-menu">
<li>No1</li>
<li>No2</li>
</ul>
</li>
<li class='indzign-box' onclick='document.getElementById('indzignbox').style.top='60px';document.getElementById('count-box').style.display='none';'><i class='fa fa-bars' /></li>
</ul>
</nav>
Related
When you hover over, say, 'News', a blue underline will pop-in. From what I've seen, it is actually a background with a height transition from 0px -> 5px. However, my code is unable to replicate it.
* {
padding: 0;
margin: 0;
}
.navbar {
padding: 28px 36px;
background: black;
}
.navbar ul {
list-style: none;
}
.navbar li {
padding: 0 8px;
height: 100%;
position: relative;
transform: translateZ(0);
}
.navbar li::before {
display: block;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
background: blue;
transition: height .2s ease-in-out;
}
a {
display: block;
text-decoration: none;
color: white;
}
<div class="navbar">
<ul>
<li>Home
</ul>
</div>
I'm definitely missing something obvious here, but I don't get it. Help?
If I got you right, you did the most of the work, but you should always keep in mind when you using pseudo-elements like ::before you have to declare content property in it, otherwise it won't work at all. Then to make this work, you should just care about making the transition by putting initial with and height on ::before then make the height element to the actual one in hover.
So your final code should be something like this:
* {
padding: 0;
margin: 0;
}
.navbar {
padding: 28px 36px;
background: black;
}
.navbar ul {
list-style: none;
}
.navbar li {
padding: 0 8px;
height: 100%;
position: relative;
transform: translateZ(0);
}
.navbar li::before {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 50px;
height: 0;
background: blue;
transition: height .2s ease-in-out;
}
.navbar li:hover::before {
height: 5px;
}
a {
display: block;
text-decoration: none;
color: white;
}
<div class="navbar">
<ul>
<li>Home
</ul>
</div>
I made full width dropdown submenu. the problem is that submenu disappears when I try to move mouse from mainlist to submenu. Also, transition on submenu is not applied. Code I wrote is at down below. Please check it and correct it.
body {
margin: 0;
padding: 0;
}
ul,
li,
a {
list-style: none;
text-decoration: none;
}
.wrap {
position: relative;
width: 100%;
height: 100px;
}
.list {
margin: 0;
padding: 0;
width: 100%;
left: 0;
top: 100px;
height: 100px;
text-align: center;
}
.list li {
display: inline-block;
margin: 20px;
}
.list>li:hover ul {
display: list-item;
opacity: 1;
}
.list>li:hover>a {
color: red;
}
.sub_list {
margin: 0;
padding: 0;
position: absolute;
display: none;
width: 100%;
height: 100px;
left: 0;
top: 50px;
text-align: center;
opacity: 0;
transition: all 0.5s;
}
.sub_list li {
display: inline-block;
margin: 20px;
}
.sub_list li a:hover {
color: red;
}
<div class="wrap">
<ul class="list">
<li>list-1
<ul class="sub_list">
<li>sublist-a</li>
<li>sublist-b</li>
<li>sublist-c</li>
</ul>
</li>
<li>list-2</li>
<li>list-3</li>
<li>list-4</li>
<li>list-5</li>
</ul>
</div>
I'd like to make submenu stay visible when mouse is on whole area of submenu div(100% width of screen).
please help
thank you
In addition to the problem regarding margin/padding/positioning addressed in other answers, the transition wouldn't work because you can't transition from display: none; to another state or vice versa. Instead, solely rely on opacity and add the pointer-events property so that the submenu will not itself trigger the hover or overlay any other content when it's hidden.
Here's the fully working code:
body {
margin: 0;
padding: 0;
}
ul, li, a {
list-style: none;
text-decoration: none;
}
.wrap {
position: relative;
width: 100%;
height: 100px;
}
.list {
margin: 0;
padding: 0;
width: 100%;
left: 0;
top: 100px;
height: 100px;
text-align: center;
}
.list li {
display: inline-block;
padding: 20px;
}
.list > li:hover ul {
pointer-events: all;
opacity: 1;
}
.list > li:hover > a {
color: red;
}
.sub_list {
margin: 0;
padding: 0;
position: absolute;
width: 100%;
height: 100px;
left: 0;
top: 50px;
text-align: center;
opacity: 0;
transition: all 0.5s;
pointer-events: none;
}
.sub_list li {
display: inline-block;
margin: 20px;
}
.sub_list li a:hover {
color: red;
}
<div class="wrap">
<ul class="list">
<li>list-1
<ul class="sub_list">
<li>sublist-a</li>
<li>sublist-b</li>
<li>sublist-c</li>
</ul>
</li>
<li>list-2
<ul class="sub_list">
<li>sublist-a</li>
<li>sublist-b</li>
<li>sublist-c</li>
</ul>
</li>
<li>list-3
<ul class="sub_list">
<li>sublist-a</li>
<li>sublist-b</li>
<li>sublist-c</li>
</ul>
</li>
<li>list-4
<ul class="sub_list">
<li>sublist-a</li>
<li>sublist-b</li>
<li>sublist-c</li>
</ul>
</li>
<li>list-5
<ul class="sub_list">
<li>sublist-a</li>
<li>sublist-b</li>
<li>sublist-c</li>
</ul>
</li>
</ul>
</div>
I fixed the issue for you: https://codepen.io/anon/pen/rboPLE
This is what i changed:
.list li {
display: inline-block;
padding: 20px; // this line was margin: 20px; before
}
When trying to reach the submenu you left the .list li item because it had a margin. With Padding the space belongs to the element and its still hovered when you move the mouse to submenu.
I colored the example in the link above so you can see the elements boundaries.
your code is perfect but minor issues is there.
use this css code:
.sub_list {
opacity: 0;
transition-duration: 200ms;
transition-timing-function: ease-in;
transition-property: opacity, margin-top, visibility;
visibility: hidden;
margin: 50px 0 0;
padding: 0;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 50px;
text-align: center;
}
.list > li:hover ul {
margin-top:0;
opacity: 1;
visibility: visible;
}
use this code its work perfect transition effect and dropdown submenu issues is solved.
Here's the code I have problem with my underline hover effect its exppanding extra how to fix it please help me out ************************
HTML
<div class="nav-wrap">
<ul class="group" id="example-one">
<li>Home</li>
<li><a class="dropbtn">Models</a>
<ul class="dropdown-content">
<li></li>
<li>Audi</li>
<li>Bmw</li>
<li>Mercedes</li>
</ul>
</li>
<li>Offers</li>
<li>Group Sales</li>
<li>Reviews</li>
</ul>
</div>
And also i want my dropdown in the middle of his parent And here its*********
CSS
.nav-wrap {
background: white;
width: 100%;
}
#example-one {
text-align: right;
}
#example-one li {
text-align: left;
position: relative;
display: inline-block;
font-family: 'Montserrat', sans-serif;
top:-20px;
}
#example-one a {
color: #000;
font-weight: bold;
font-size: 14px;
padding: 15px 15px;
text-decoration: none;
position: relative;
color: #000;
}
#example-one a:after {
color: #333;
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 2px;
right: 0;
background: #000;
transition: width all 1s ease;
-webkit-transition: width 1s ease;
}
#example-one a:hover:after {
width: 100%;
left: 0;
background: #000;
}
.dropdown-content {
display: none;
position: absolute;
top: 30px;
left: 0;
background-color:white;
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
#example-one li li {
display: block;
}
#example-one li:hover>ul {
display: block;
}
If I understand your problem correctly, the issue is with the dropdown items not being centered and the dropdown underline being too long. I believe this issue is caused by the padding on the dropdown div.
To resolve this, add some normalised padding to your .dropdown-content class:
.dropdown-content {
padding: 0 20px;
}
let the underline be attached to the text it self not to all the list item so it takes the width of just the text, now it takes the width of the whole cell in the list
i have a navigation bar that sticks to the top of the page as the user scrolls, however as the user continues to scroll down the page, the navigation menu seems to disappear behind some of the pages elements.
any help with this matter will be greatly appreciated, below is all the code.
* {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Segoe UI';
}
p,
h5 {
margin-bottom: 10px;
line-height: 1.5;
}
h5 {
text-align: center;
border: 1px solid #ccc;
border-width: 1px 0;
}
h5.fixed {
position: fixed;
top: 80px;
left: 0;
background-color: #fff;
right: 0;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
<h5>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">Tutorials</a></li>
<li class="about">About</li>
<li class="news">Newsletter</li>
<li class="contact">Contact</li>
</ul>
</div>
</h5>
There are few issues in you code. I could not understand why you using h5 in fixed div. To solve issue try this
h5.fixed {
position: fixed;
top: 80px;
left: 0;
background-color: #fff;
right: 0;
z-index:999;
}
But my suggestion is use some better way to implement fixed top menu. Please check this example https://getbootstrap.com/examples/navbar-fixed-top/
it was ok I guess but color of font was white so it was not visible, I changed it to #000 and its working, please correct if I'm wrong
Plus I added z-index: 9; for your website purpose, if nav is fixed then it will be higher in "z" dimension "above" all elements. Don't forget to use "position: relative/absolute/fixed" etc to make z-index working :)
* {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Segoe UI';
}
p,
h5 {
margin-bottom: 10px;
line-height: 1.5;
}
h5 {
text-align: center;
border: 1px solid #ccc;
border-width: 1px 0;
}
h5.fixed {
position: fixed;
top: 80px;
left: 0;
background-color: #fff;
right: 0;
}
.nav{
position: relative;
z-index: 9;
}
.nav a {
text-decoration: none;
color: #000;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
<h5>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">Tutorials</a></li>
<li class="about">About</li>
<li class="news">Newsletter</li>
<li class="contact">Contact</li>
</ul>
</div>
</h5>
Try using the z-index css property. This will allow you to place the element above others on the page.
Try to use this code: z-index property only active when the its elements has relative or absolute value. otherwise it does not work.
elementname {
position: relative;
z-index: 1;
}
please see this link: https://jsfiddle.net/emumsbgp/
I am trying to create a button when hovered over dispays two dropdown menus with different properties using css.
The problem at the moment is that the dropdown menus' properties do not change when hovered over and it seems as if the button expands instead of just showing two different menus below it. (trying to achieve something similar to demo shown here: http://www.tutorialrepublic.com/codelab.php?topic=faq&file=show-hide-dropdown-on-mouse-hover). Here is the code:
#nav {
margin: 0;
text-align: left;
color: #333;
}
#nav ul {
padding-right: 3.5px;
list-style-type: none;
text-align: left;
display: none;
visibility: hidden;
}
#nav ul li{
margin-left: 0;
padding-left: 0;
color: black;
line-height: 21px;
position: relative;
}
#nav:hover .myClassUl{
visibility: visible;
display: block;
}
.myClassUl {
min-width: 50px;
background: #f2f2f2;
display: none;
position: static;
z-index: 999;
left: 0;
}
<button id="nav" class="selected arrow">Communications▼
<ul class="myClassUl">
<li id="emailButton" class="pointerCursor">Email</li>
<li id="letterButton" class="pointerCursor">Letter</li>
</ul>
</button>
Any help please?
This one works, adjusted your css a little, moved the #nav:hover .myClassUl{ rule after the .myClassUl and added a hover rule for the drop down items
#nav {
margin: 0;
text-align: left;
color: #333;
position: relative;
}
#nav ul {
padding: 0;
margin: 2px;
list-style-type: none;
text-align: left;
display: none;
}
#nav ul li{
margin: 0;
padding: 0;
color: black;
line-height: 21px;
position: relative;
}
.myClassUl {
min-width: 50px;
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
top: 100%;
width: 50px;
}
#nav:hover .myClassUl{
display: block;
}
#letterButton:hover,
#emailButton:hover {
color: #F99;
}
<button id="nav" class="selected arrow">Communications▼
<ul class="myClassUl">
<li id="emailButton" class="pointerCursor">Email</li>
<li id="letterButton" class="pointerCursor">Letter</li>
</ul>
</button>
you can try this one:
#nav {
margin: 0;
text-align: left;
color: #333;
}
#nav ul {
padding-right: 3.5px;
list-style-type: none;
text-align: left;
display: none;
visibility: hidden;
}
#nav ul li{
margin-left: 0;
padding-left: 0;
color: black;
line-height: 21px;
position: relative;
}
#nav:hover .myClassUl{
visibility: visible;
display: block;
}
.myClassUl {
min-width: 50px;
background: #f2f2f2;
display: none;
position: static;
z-index: 999;
left: 0;
}
.myClassUl #emailButton:hover
{
background: red;
}
.myClassUl #letterButton:hover
{
background: red;
}
FIDDLE EXAMPLE