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;
}
Related
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
I have the following code:
/**** DropDown Css ******/
.inner_menu ul#nav > li span {
display: inline-block;
height: 15px;
vertical-align: middle;
width: 20px;
background: url(../images/drp_arw_dwn.png) no-repeat center;
margin-left: 10px;
}
.inner_menu ul#nav > li:hover span {
background: url(../images/drp_arw.png) no-repeat center;
}
.inner_menu ul#nav > li:hover .subnav {
display: block;
}
.subnav {
position: absolute;
padding-top: 18px;
display: none;
left: 50%;
margin-left: -100px;
border-style: solid;
border-width: 5px;
border-color:#2c91da
}
.subnav ul {
background: #333;
width: 200px;
padding-top: 15px;
}
.subnav ul li {
display: block;
margin: 0;
padding: 0 0 0 20px;
}
.subnav ul li a {
color: #fff;
font-size: 18px;
padding-bottom: 5px;
}
.subnav ul li:hover a {
color: #2c91da;
display: block;
}
/****************** Nav Menu *****************/
.header .wrapper:after {
opacity: 0.5;
}
.dashboard_page {
position: relative;
background: #fff;
padding: 42px 0;
}
.dashboard_page .wrapper {
position: relative;
z-index: 9;
}
.dashboard_page:after {
left: 0;
top: 0;
width: 100%;
height: 370px;
position: absolute;
content: "";
background: #f7f8f9;
pointer-events: none;
}
.inner_menu {
margin: 7px 0 0 0;
padding: 0;
display: block;
}
.inner_menu ul#nav {
margin: 0;
padding: 0;
display: inline-block;
border-right: 1px solid #f2f2f2;
box-shadow: 0 5px 4px rgba(0, 0, 0, 0.3);
}
.inner_menu ul#nav > li {
margin: 0;
padding: 0;
height: 52px;
line-height: 52px;
display: block;
float: left;
border-left: 1px solid #f2f2f2;
position: relative;
}
.inner_menu ul#nav > li > a {
display: block;
color: #2f2f2f;
font-size: 18px;
font-family: 'Lato', sans-serif;
margin: 0;
padding: 0 27px;
border-style: solid;
border-width: 5px;
}
.inner_menu ul#nav > li:after {
position: absolute;
width: 38px;
left: 50%;
margin-left: -19px;
content: "";
background: url(../images/menu_arw.png) no-repeat;
height: 20px;
bottom: -35px;
z-index: 9;
display: none;
}
.inner_menu ul#nav > li:hover:after {
display: block;
}
.inner_menu ul#nav > li.active:after {
display: block;
}
<div class="inner_menu">
<div class="toggle"></div>
<ul id="nav">
<li>
Link 1
</li>
<li>
Trackers
<div class="subnav">
<ul>
<li>Sub Menu 1
</li>
<li>Sub Menu 2
</li>
</ul>
</div>
</li>
</ul>
</div>
The problem is that in internet explorer, when I try to move my cursor below the element to click on the dropdown, it disappears and I am unable to click it.
What am I doing wrong?
The problem was this CSS item:
.header .wrapper:after{ position:absolute; bottom:-33px; width:100%; height:34px; content:""; left:0; background:url(../images/shadow-bg.png) no-repeat center; background-size:100% auto; pointer-events:none}
The attribute bottom should be a higher negative number. -150px worked for me. I changed it to this:
.header .wrapper:after{ position:absolute;
bottom:-150px
; width:100%; height:34px; content:""; left:0; background:url(../images/shadow-bg.png) no-repeat center; background-size:100% auto; pointer-events:none}
Let's break it down:
You hover over '.inner_menu ul#nav > li:hover'
The 'display' is set to 'block' for '.subnav'.
You move your mouse until it moves outside of the actual link (The one that says "Trackers")
The selector '.inner_menu ul#nav > li:hover' no longer applies, since you are no longer hovering over the link.
The background is unset.
If you move the .subnav close to the link (No spaces!) it should work better.
Here is a link to a navigation bar that uses CSS only: http://www.cssnewbie.com/easy-css-dropdown-menus/
You might want to use JavaScript for more advanced functionality.
Some limitations for CSS:
No spaces, if you sub-menu is not RIGHT next to the link to it, it probably won't work (Or would at least be very hard to implement)
No advanced fading, clicking or other events, just hovering.
I have a dropdown menu which isn't showing in front of the elements below it. I have set the ul and it's container to position: absolute; and position: relative; respectively and applied a z-index of 9999 to the dropdown, however it won't work and the dropdown appears behind the div below it.
Please find the CSS below or both the CSS & HTML in this JSFiddle.
#menu {
overflow: hidden;
padding: 0 0 9px 0;
}
#menu ul {
padding-top: 8px;
}
#menu li {
width: 160px;
float: left;
text-align: center;
position: relative;
}
#menu li:after {
width: 1px;
height: 9px;
background: #9098bf;
position: absolute;
top: 5px;
left: 0;
content: "";
}
#menu li:first-child:after {
display: none;
}
#menu li ul li:after {
display: none;
}
#menu li ul:after {
content: "";
height: 1px;
clear: both;
}
#menu > .container > ul > li > ul {
left: 0;
}
#menu li ul {
position: absolute;
right: -100%;
left: 100%;
z-index: 9999;
background-color: #67b9e8;
}
#menu a {
font-size: 10px;
text-transform: uppercase;
line-height: 12px;
color: #22317f;
font-family: 'FuturaBT-Book';
}
#menu a:hover {
text-decoration: none;
color: #67b9e8;
}
.features {
background: #22317f;
padding-top: 38px;
padding-bottom: 33px;
overflow: hidden;
margin-bottom: 44px;
}
.features .left {
width: 640px;
float: left;
border-right: 1px dotted #fff;
color: #fff;
margin-bottom: -3px;
padding-right: 57px;
text-align: justify;
}
h1 {
font-size: 55px;
line-height: 50px;
margin: 10px 0 29px 0;
text-align: left;
letter-spacing: -3px;
font-family: 'FuturaBT-Book';
color: #193889;
}
ul, li {
list-style: none;
}
Your problem is NOT z-index not working. You have added to your #menu overflow:hidden.
http://jsfiddle.net/Uqxxh/1/
I have a problem displaying a nav bar with a pic next to it. There is a zoom function in the pic. When mouse over it, an enlarged verion will be displayed.
I have a demo simulating the situation.
I have two requirements:
1. The enlarged tree should be on top of the nav bar.
2. The second level of nav bar shouold be on top of the small tree.
#container
{
width: 700px;
}
#contentLeft
{
width: 220px;
float: left;
z-index: 50;
}
#contentRight
{
width: 450px;
float: right;
z-index: 50;
}
#navBar > li
{
list-style-type: none;
position: relative;
color: #EAC789;
border-bottom: 1px dashed #EAC789;
background: #fff;
width: 200px;
line-height: 24px;
}
#navBar > li a
{
text-decoration: none;
color: #B38C51;
}
#navBar > li ul
{
position: absolute;
left: 200px;
top: 0;
width: 100%;
margin-left: 0;
padding-left: 0;
}
#navBar > li li
{
display: none;
background: #967644;
border-bottom: 1px dashed #fff;
color: #fff;
width: 100%;
line-height: 24px;
}
#navBar > li:hover li
{
display: block;
}
#navBar > li li a
{
color: #fff;
}
#mouseOverDiv
{
position: relative;
}
#mouseOverDiv .enlargePic
{
display: none;
position: absolute;
left: -200px;
top: 0;
}
#mouseOverDiv:hover img
{
border: 1px solid #000;
background: #fff;
}
#mouseOverDiv:hover .enlargePic
{
display: block;
z-index: 9999;
}
Apply z-index to #navBar > li ul should fix the issue
#navBar > li ul
{
position: absolute;
left: 200px;
top: 0;
width: 100%;
margin-left: 0;
padding-left: 0;
z-index:51;
}
FIDDLE
UPDATE
Apply z-index to this class
.rpSlide{
z-index:51;
}
Remove z-index from this class .MainLeft
Remove inline z-index from this main menu div
<div id="ctl00_ctl01_siteMenu" class="RadMenu RadMenu_Yaki" style="z-index: 7000;">
This should fix all of your issues you are having on this page
i am trying to create a drop-down menu with rounded corners and have nearly got there but for a small issue in IE. If you view this link (http://ids-ind.com/koris/dropdown.html) in FF it looks and works fine but in IE the right hand side has a flat top.
Please can you advise what i need to do/change to get it looking like it does in FF?
Below is the CSS i am using
a:link {text-decoration:none;}
/* tabs
*************************/
ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
ul.tabs li
{
margin: 0 0 0 1px;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
background:url('../images/menuleft_bg.png') left bottom no-repeat;
line-height:55px;
width:130px;
}
ul.tabs a
{
position: relative;
display: block;
background:url('../images/menuright_bg.jpg') right bottom no-repeat;
}
/* dropdowns
*************************/
ul.dropdown
{
margin: 0;
padding: 0;
display: block;
position: absolute;
z-index: 999;
top: 100%;
width: 130px;
display: none;
left: 0;
}
ul.dropdown ul.dropdown
{
top: 0;
left: 100%;
}
ul.dropdown li
{
margin: 0;
padding: 0;
float: none;
position: relative;
list-style: none;
display: block;
}
ul.dropdown li a
{
display: block;
}
/* menu-specifc
*************************/
#menu
{
position: fixed;
z-index: 5;
top: 0;
left: 0;
height: 40px;
line-height: 40px;
border-bottom: 0px solid #000;
}
#menu ul
{
margin: 0 auto;
}
#menu ul li h4
{
margin: 0;
}
#menu ul li h4 a
{
font-size: 14px;
color: #000;
font-weight: bold;
padding: 0 15px;
}
#menu ul li a
{
color: #fff;
padding-left: 4px;
}
#menu ul li a img
{
vertical-align: middle;
}
#menu ul li a span
{
display: block;
padding: 0 20px;
text-align:center;
}
#menu ul.dropdown
{
padding: 20px 0;
background-image: url('../images/dropdownbg.png');
overflow:hidden;
border-bottom: 0px solid #dc902f;
width: 130px;
z-index:110;
}
#menu ul.dropdown li a
{
border-bottom: 0px solid #e5cd8e;
line-height: 30px;
overflow: hidden;
height: 30px;
background-image: url('../images/dropdownbg2.png');
}
#menu ul.dropdown li.last a
{
border-bottom-width: 0;
}
#menu ul.dropdown li a:hover
{
color:#990000;
}
#menu ul li h4 a:hover
{
background-image: none;
}
remove the position:relative; in below
ul.tabs a{}