I am facing some problem with this drop down menu thing. I read your article and it helped me. In the beginning, the drop down worked but when I added some more styling then it stopped working. Other divs and navigation bar is working fine but the drop down menu is not working. Can you please help me pointing out what should be corrected here?
The parent div is nav-bar-left and the style is
.nav-bar-left {
float; left;
overflow: hidden;
width: 980px;
height: 26px;
background-color: Lavender;
border: 1px solid MidnightBlue;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
The navigation div is #horizontalmenu which resides within the above parent div and the style is
#horizontalmenu {
width: 733px;
margin: 0;
position: relative;
float: left;
padding: 0;
}
Rest of the styling for navigation bar is
#navbar {
list-style-type: none;
margin: 0;
width: 100%;
padding: 0;
position: relative;
display: inline-table;
height: 26px;
z-index: 5;
}
#navbar li {
float: left;
position: relative;
}
#navbar a:link, #navbar a:visited {
display: block;
color: #333;
background-color: lavender;
text-align: center;
padding: 6px 10px;
border-style: solid;
border-color: MidnightBlue;
border-width: 0 1px 0 0;
text-decoration: none;
font-size: 14px;
line-height: 14px;
}
#navbar a:hover, #navbar a:active {
color: #fff;
background-color: #6b0c36;
text-decoration: underline;
}
#navbar ul {
left:-9999px;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
#navbar ul li {
float:none;
border-style: solid;
border-color: Lavender;
border-width: 0 1px 1px 1px;
}
#navbar ul a {
white-space: nowrap;
}
#navbar li:hover ul {
left: 0;
}
#navbar:hover a {
text-decoration: none;
}
#navbar li:hover ul a {
text-decoration: none;
background-color: Lavender;
color: #333;
}
#navbar li:hover ul li a:hover {
background-color: Lavender;
color: #333;
}
So, why is it not working and what can be done?
I found this menu CSS one of my best collection for dropdown menu:
Create a Multilevel Dropdown menu with CSS and improve it via jQuery
And you can find a backup of those codes here in my pastebin.
Related
I am trying to create a hamburger menu for when my screen goes below 1025px but for some reason there is a small gap between my nav and my menu div whenever I make the window use the media query. I am not sure why it is there. When I use developer tools I find no margins around either of them.
nav #menu{
position: relative;
z-index: 999;
float: right;
margin: 0 75px 0 0;
line-height: 50px;
}
nav #menu li{
font-family:"Abril Fatface";
display: inline-block;
padding-left: 50px;
}
nav #menu li a{
color: white;
position: relative;
text-decoration: none;
}
nav #menu li a:after{
content: '';
position: absolute;
top: 0;
right: 0;
width: 0%;
border-bottom: 2px solid #c1c1c1;
transition: .3s;
}
nav #menu li a:hover:after{
width: 100%;
}
nav #menu li a:hover{
color: #c1c1c1;
}
#media (max-width: 1024px){
.hamburger{
float: right;
cursor: pointer;
padding: 15px;
display: block;
border-left: .1px solid white;
}
.line{
border-bottom: 4px solid white;
width: 35px;
margin-bottom: 5px;
}
.line:last-child {
margin-bottom: 0;
}
nav #menu{
width: 100%;
overflow: hidden;
padding-right: 0px;
margin: 0;
line-height: 25px;
/* height: 0;*/
}
nav #menu li{
display: block;
width: 100%;
background-color: black;
}
nav #menu li a{
width: 100%;
}
.open{
height: auto;
}
Perhaps try specifying:
nav {
margin: 0 auto;
}
I have a menu that has a nice dropdown and everything, but the only problem I have here is that I can't find a way to move this damn drop down just a little bit to the left so it is directly under its parent tab!! It is always to the side, I see other people's examples and when I add padding between the menu tabs it does the same exact thing! Perhaps it is because of that padding?? (I'm talking about this: http://jsbin.com/gimilapiki/edit?html,css,output)
So, here is my project: https://codepen.io/anon/pen/gxdVdO?editors=1100
Here's some code (because StackOverFlow forces me to):
body {background-color: #E8E8E8;}
ul {list-style: none;}
li {
float: left;
background-color: white;
}
li:not(.search) {padding: 12px 20px 12px 20px;}
li ul {
display: none;
position: absolute;
padding-left: 1px;
padding-top: 12px;
}
a {
text-decoration: none;
color: #5E5E5E;
}
li:not(.search):hover {
color: black;
background-color:#E3E3E3;;
}
ul li ul li {
float: none;
background-color: #E3E3E3;
}
ul li ul li:not(.search):hover {background-color: #D1D1D1;}
li:hover > ul {
z-index: 289;
display: block;
padding: 0 10px 20 20px;
}
.search-input {
width: 150px;
height: 18px;
padding: 0 7px;
border: 1px solid grey;
border-radius: 10px;
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
}
.search-input:hover {
outline: none;
opacity:0.99;
cursor: pointer;
box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.05) inset;
}
input:focus {outline: none;}
#search-icon {
height: 18px;
}
.search {
padding-bottom: 10px;
}
form {
margin-top: 4px;
}
I'm seriously stuck on this simple problem. Adding padding-left or padding-right or margins did nothing, it only affected the vertical height of the tabs and nothing else. I tried everything, researched as much as I can, and nothing worked. Please help!!!
you can add something simple like this
li ul {
display: none;
position: absolute;
padding-left: 1px;
margin-left: -10px;
padding-top: 12px;
}
i added the margin-left: -10px; and i think it works
ul > li{
position: relative;
}
ul > li > ul{
position: absolute;
top: 100%;
left: 0px;
}
try to add this.
Just add position as relative.That will solve your problem.
li ul {
display: none;
position: relative;
padding-left: 1px;
padding-top: 12px;
margin-right:100px;
}
I am almost done w/ my menu here. However I have two issues.
I can't add a 1px solid border #fff on the last item of the list.
I need to remove the vertical scrollbar on the left.
Here's my CSS:
#nav li ul {
opacity: 0;
height: 0px;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #e74c3c;
color: #fff;
display: block;
list-style: disc;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav .fa { margin: 0px 17px 0px 0px; }
.logo {
width: 100%;
padding: 21px;
margin-bottom: 20px;
box-sizing: border-box;
}
#logo{
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
padding: 6px 8px;
color: #fff;
}
.disp {
opacity: 1!important;
height:auto!important;
transition: height 100ms ease-in-out;
transition-delay: 300ms;
}
#nav li span:first-child {
margin-left: 32px;
}
asdasdasdasdasdasdasdassa
Well, first remove this:
#nav li:not(:last-child) {
border-bottom: 1px solid #fff;
}
for add border to all li even last one:
#nav li {
border-bottom: 1px solid #fff;
}
for removing scroll do this:
JS:
$('body, html').toggleClass('OverflowHidden');
CSS:
.OverflowHidden {
overflow: auto;
}
and for removing double border use this:
#nav li ul li:last-child {
border-bottom: none!important;
}
jsFiddle
My website's menu drop down seems to malfunction and it is stuck on the screen. Don't know how to fix http://www.kingadlerhomedecor.com/store/
I want to add more sub categories to this drop-down, but I wish to avoid making the drop down list too lengthy. I thus want 2 rows here in the drop-down to adjust the length list of sub-categories, but it doesn't seems to happen, instead there is a new problem - The drop-down menu item is half stuck and I am unable to fix this.
I have not made any changes and yet it seems to malfunction. No clue how to fix the dropdown menu stuck on my screen. Please advice.
/* MENU */
.primary-define #menu {
text-align: left;
font-family: helvetica, Arial;
/*background-color: #999;*/
}
.primary-define #menu-inner {
position: relative;
font-family: helvetica, Arial;
background-color: #999; /*No color was added origninally - added to make it grey*/
}
.primary-define .mainmenu {
margin: 0;
padding: 0;
position: relative;
list-style-type: none;
}
.primary-define .mainmenu li {
margin: 0;
padding: 0;
position: relative;
}
.primary-define .mainmenu > li {
float: left;
/*background-color: #999;*/
}
.primary-define .mainmenu li a {
color: #666; /*originial #666*/
display: block;
font-size: 10px; /*original 15px */
padding: 0.5px 1px; /*20px 25px */ /*Padding for the dropdown elements*/
text-decoration: none;
/*background-color: #999;*/
}
.primary-define .mainmenu > li > a {
color: #fff;
padding: 15px 25px; /*35px*/
font-size: 14px; /*original 18px */
font-weight: 600;
line-height: 100%;
font-family: helvetica, Arial;
}
.primary-define .mainmenu > li:hover > a,
.primary-define .mainmenu > li.active > a {
background-color: rgba(0, 0, 0, 1); /*rgba(0, 0, 0, 0.2)*/
/*font-size: 15px;*/
}
.primary-define .mainmenu li .dropdown-container {
top: 99%;
overflow: hidden;
position: absolute; /*absolute*/
padding-left: 1px; /*added by yuvi*/
font-size: 30px; /*added by yuvi*/
}
.primary-define .mainmenu li .dropdown {
margin-top: -300px; /*-999px*/
background-color: #fff;
border-left: 1px solid #eee;
border-bottom: 1px solid #eee;
font-size: 30px; /*added by yuvi*/
padding: 10px;
}
.primary-define .mainmenu li:hover .dropdown {
margin-top: 0;
/*font-size: 30px; added by yuvi*/
}
}
.primary-define .mainmenu ul {
margin: 0;
float: left;
width: auto; /*249px*/
list-style-type: none;
border-right: 1px solid #eee;
}
.primary-define .mainmenu ul li:hover a,
.primary-define .mainmenu ul li.active a {
background-color: #eee; /*orginiarl #eee*/
margin-top has to be -380px.
.primary-define .mainmenu li .dropdown {
margin-top: -380px;
background-color: #fff;
border-left: 1px solid #eee;
border-bottom: 1px solid #eee;
font-size: 30px;
padding: 10px;
}
Is it possible to keep a submenu open, even after it has been clicked?
For example, when you click Information, a sub menu appears as well as loading a new page. But is it possible to keep the sub menu open, even after the new page has loaded? I want the sub menu information to be available at all times, but only appear when clicked.
Here is the html -
<div id="nav">
<nav>
<ul id="menu" style="list-style-type: none;">
<li id="sub">
information
<ul>
<li> Hello, and welcome to this site</li>
</ul>
</li>
And here is the css -
#nav {
text-align:center;
list-style: none;
}
ul#menu {
background-color: #FFFFFF;
list-style: none outside none;
margin: 0 auto;
padding-bottom: 0;
padding-top: 0;
text-align: center;
width: 332px;
}
ul#menu:after {
content: "";
background-color: #FFFFFF;
height: 10px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 20px;
}
ul#menu li {
float: left;
list-style:none;
}
ul#menu li a {
color: #666666;
font-size: 12px;
margin: 0;
padding: 0px 35px;
text-decoration: none;
}
ul#menu li a:hover {
background-color: #ccc;
}
a.selected-page, ul#menu a.selected-page:hover {
background-color: #FFFFFF;
}
li#sub ul {
display: none;
position: absolute;
background-color: #FFFFFF;
z-index: 22222;
overflow: hidden;
margin: 0;
}
li#sub ul li {
display: block;
float: none;
border-top-style: none;
border-width: 2px;
border-color: #FFFFFF;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
}
ul#menu li#sub:hover ul {
display: block;
}
ul#menu li#sub ul li:hover {
background-color: #FFFFFF;
}
All help is greatly appreciated!
You can use an iframe below your nav bar (obviously you need to adjust the width, height and..), and change the src of iframe on clicking the menu item, this will satisfy your need.