http://profiledt.co.uk/SetTraining
the tag has the menu inside it, however I can't seem to get it to allow the drop down to appear infront of the slider in IE8.
.main-navigation {
width: 100% !important;
}
.main-navigation a {
font-size: 12px;
height: 50px;
line-height: 50px;
color: #fff !important;
padding: 0 25px;
text-decoration: none;
font-weight: 700;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.main-navigation a:hover {
color: #fff!important;
background: #008AE6;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul.nav-menu {
/* background: #008AE6 !important; */
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-top: 1px solid #ededed;
display: inline-block !important;
text-align: left;
width: 100%;
/* CUSTOM CODE */
background: #1f4e9b;
/*border-bottom: 5px solid #eee; */
position: relative;
z-index: 103;
}
.main-navigation ul {
margin: 0;
text-indent: 0;
background: ;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
.main-navigation li a {
border-bottom: 0;
color: #6a6a6a;
line-height: 3.692307692;
text-transform: uppercase;
white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
}
.main-navigation li {
//Margin makes nav out of place
margin: 0 40px 0 0;
/*margin: 0 2.857142857rem 0 0;*/
position: relative;
}
.main-navigation li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 200; /*importance*/
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul {
border-left: 0;
display: block;
}
.main-navigation li ul li a {
background: #2989ff;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
.main-navigation li ul li a:hover {
background: #3d9dff;
color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight: bold;
z-index: 9999;
}
.menu-toggle {
display: none;
}
I'm using a Windows XP machine with Internet Explorer 8.
Thanks
z-index will not work on a static element (default). They must be relative or absolute.
Try to add positon:relative; on the elements with it.
Related
On my website at twoguysplayingzelda.com, my sub-menus (desktop view) are currently displayed vertically and I would like to change it to horizontal. When a user hovers over the tab "GAMES", I would like the sub-menu to stretch horizontally almost like a 2nd menu bar with all the games. My menu CSS code is as below. Thanks for any help!
div.navigation.section.no-padding.bg-dark {
background: #616161;
}
.main-menu {
font-family: 'Arial', sans-serif;
font-size: 1.0em;
text-align: center;
}
.main-menu li { position: relative; }
.main-menu > li { float: left; }
.main-menu > li:before {
content: none;
display: block;
position: absolute;
right: 0;
top: 50%;
margin-top: -18px;
margin-right: -13px;
}
.main-menu > li:last-child:before { content: none; }
.main-menu > li > a {
display: block;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
font-size: 1.0em;
color: #FFFFFF;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
}
.main-menu > li:first-child > a { margin-left: 0; }
.main-menu > .has-children > a,
.main-menu > .page_item_has_children > a { padding-right: 12px; position:
relative; }
.main-menu > .has-children > a::after,
.main-menu > .page_item_has_children > a::after {
content: "";
display: none;
border: 5px solid transparent;
border-top-color: #999;
position: absolute;
z-index: 1001;
right: 29px;
top: 50%;
margin-top: -2px;
}
.main-menu li:hover > a {
cursor: pointer;
background: #01B3D9;
color: #FFFFFF; }
.main-menu > .has-children:hover > a::after,
.main-menu > .page_item_has_children:hover > a::after { border-top-color:
#fff; }
/* Sub menus --------------------------------------- */
.main-menu li ul {
position: absolute;
z-index: 10000;
display: block;
left: -9999px;
top: 10px;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
z-index: 999;
-webkit-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
}
.is_mobile .main-menu li ul {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
display: none;
}
.main-menu > li > ul { padding-top: 20px; }
.main-menu ul li {
float: none;
display: block;
border-top: 1px solid rgba(255,255,255,0.075);
}
.main-menu ul li:first-child { border-top: none; }
.main-menu ul > .has-children::after,
.main-menu ul > .page_item_has_children::after {
content: "";
color: #FFFFFF;
display: block;
border: 6px solid transparent;
border-left-color: rgba(255,255,255,0.4);
position: absolute;
z-index: 1001;
right: 10px;
top: 50%;
margin-top: -5px;
}
.main-menu ul > .has-children:hover::after,
.main-menu ul > .page_item_has_children:hover::after { border-left-color:
#fff; }
.main-menu ul li {
display: block;
width: 240px;
background: #616161;
}
.main-menu ul a {
width: 100%;
font-size: 1.0em;
background: #616161;
display: block;
text-align: left;
font-weight: 400;
padding: 3px;
padding-left: 12px;
line-height: 130%;
color: #FFFFFF;
}
.main-menu ul a:hover {
background: #01B3D9;
color: #FFFFFF;
}
.main-menu li:hover > ul {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
left: 138.25%;
margin-left: -120px;
top: 20.44px;
}
.is_mobile .main-menu li:hover ul { display: block; }
/* Deep down --------------------------------------- */
.main-menu ul li ul {
top: 5px;
}
.main-menu ul li:hover > ul {
top: 0;
left: 240px;
margin-left: 0;
}
.main-menu ul ul li { background: #3d3d3d; }
.main-menu ul ul ul li { background: #4d4d4d; }
.main-menu ul ul ul ul li { background: #4d4d4d; }
FYI, your games submenu will be too large to show horizontally.
Here's how you could do it though.
Delete this:
.main-menu li {
position: relative;
}
And add this
.main-menu li ul.sub-menu {
display: flex;
position: absolute;
left: 0;
right: 0;
overflow-x: auto;
margin: 0;
}
Should look like:
You can also add
.main-menu li ul.sub-menu {
flex-wrap: wrap;
}
Which will give you this:
I am currently working on a menu bar that expands vertically upwards. When I change the overflow to visible rather than hidden, the menu expands in the correct place, however the whole menu is visible which I do not want to happen. With overflow:hidden; the menu expands but only when you hover over the partially expanded menu above where I would like it to expand. Can anyone help?
.HomeBottomMenu {
-webkit-font-smoothing:antialiased;
text-align: center;
text-align: justify;
position: fixed;
bottom: 6em;
z-index:9999;
}
.HomeBottomMenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.HomeBottomMenu ul ul {
height: 0px;
}
.HomeBottomMenu ul ul:hover {
height:532px;
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.HomeBottomMenu ul li{
position: relative;
line-height: 21px;
min-width: 220px;
text-align: center;/* Used to be left*/
background: #424242;
}
.HomeBottomMenu ul li a{
display: block;
padding: 8px 8px;
color: #fff;
text-decoration:none;
text-align: left;
font-family: 'BebasNeueRegular', Arial, sans-serif;
font-size: 18px;
font-weight: bold;
}
.HomeBottomMenu ul li a:hover{
color: #fff;
background: #25a0da;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.HomeBottomMenu ul li .dropdown{
background: #f2f2f2;
display: hidden;
position: absolute;
left: -0.01em;
overflow: hidden;
}
.HomeBottomMenu ul li:hover .dropdown{
/* Display the initial dropdown */
display: block;
bottom: 100%;
position: absolute;
background: #939393;
min-height: 50px;
}
.HomeBottomMenu ul li ul.dropdowndropdown {
position: relative;
height:100%;
display:inline-block;
bottom:100%;
}
.HomeBottomMenu ul li ul :hover .dropdowndropdown{
position: relative;
display:inline-block;
}
.HomeBottomMenu ul li ul.dropdowndropdown li{
display: inline-block;
/*Colour of level 1, level 2...*/
background-color: rgba(0, 90, 235, 0.33);
bottom: 100%;
}
.HomeBottomMenu ul li ul.dropdowndropdown li:hover{
position: relative;
}
.HomeBottomMenu ul li ul.dropdowndropdown li a{
color:#fff;
font-size:16px;
padding: 10px 10px;
text-align:center;
}
.HomeBottomMenu ul li ul .dropdowndropdown li a :hover{
color: #fff;
}
Changed the following and it works now:
.HomeBottomMenu ul li .dropdown{
background: #f2f2f2;
position: absolute;
left: -0.01em;
overflow:hidden;
display: none;
}
.HomeBottomMenu ul li:hover .dropdown{
display: block;
bottom: 0%;
position: absolute;
background: #939393;
min-height: 50px;
}
I have this nested menu, where everything works fine expect from the third hierarchy level.
I have the code and the result here: http://jsfiddle.net/wvsL9/
If you hover the menu: "PRODUKTER" and then "PRIVAT", you see the problem with the width is not "auto".
I am really stuck here, and I have tried a lot of variations.
Can you find out why it doesn't work as I want?
Thanks in advance
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0.9em;
font-family:'Helvetica Neue For BBC W01 Bd';
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
display: inline-block;
position: relative;
}
#menu li:last-child {
border: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu a {
display: inline-block;
padding: 50px 8px;
color: #000;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
#menu li:hover > a {
background: #000;
color: #fff;
}
#menu li.current-menu-item a{
background: #000;
color: #FFF;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
width: 100%;
top: 120px;
left: 0;
z-index: 1;
background: #000;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul li {
position: static;
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
}
#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a {
padding-top: 10px;
padding-bottom: 10px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
color: #fff;
}
#menu ul a:hover {
background-color: #f60c0c;
}
#menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
}
#menu ul ul {
top: 0;
left: 100%;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
}
#menu ul ul li{
display: block;
width: auto;
float: none;
}
#menu ul ul li a{
display: block;
padding: 10px 50px;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
You can work with width: auto; on the correct element. Just add this:
#menu ul ul {
width: auto;
}
JSFiddle example
Add this css
#menu .sub-menu{width:auto; min-width:100%;}
Here is example
http://jsfiddle.net/wvsL9/3/
I would like to keep the parent hover color the same when navigating the secondary menu.
I looked at a few other answers such as here and here, but I was unable to figure it out.
Here is a video explaining what I would like to accomplish: http://screencast.com/t/Bhfj6mtZkPZp
Here is the navigation code:
.primary-navigation {
max-width: 1192px;
margin: 20px 0px 52px 1px;
}
.primary-navigation ul {
font-family: 'Josefin Sans', sans-serif;
font-size: 18px;
font-size: 1.125rem;
font-weight: bold;
margin: 0;
padding: 0;
list-style: none;
}
.primary-navigation ul li {
display: block;
position: relative;
float: left;
}
.primary-navigation li ul {
display: none;
}
.primary-navigation ul li a {
display: block;
text-decoration: none;
color: #fff;
background: #ec6397;
padding: 12px 22px 17px 22px;
white-space: nowrap;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
border-right: 1px solid #f39cbd;
}
.primary-navigation ul li a:hover {
background: #f39cbd;
}
.primary-navigation li:hover ul {
display: block;
position: absolute;
border-top: 1px solid #f39cbd;
border-left: 1px solid #f39cbd;
}
.primary-navigation li:hover li {
float: none;
width: 300px;
z-index: 3;
border-bottom: 1px solid #f39cbd;
}
.primary-navigation li:hover a {
background: #ec6397;
}
.primary-navigation li:hover li a:hover {
background: #f39cbd;
color: #000;
}
You hould be able to change this
.primary-navigation ul li a:hover {
background: #f39cbd;
}
to this
.primary-navigation ul li:hover a {
background: #f39cbd;
}
This way the color of your main nav item is changed when you hover over the parent li. Since the submenu should also be inside this li, the hover will still be triggered when moving over the submenu, an so the color of the link should also keep it's hover state.
I am having a hard time trying to center the navigation buttons on my website. I have searched and tried different options but havent found any success. Here is what my code looks like. PS - my code is from an elegant theme template.
#menu {
margin: 0 auto;
display: inline-block;
list-style: none;
padding: 0;
border-top: 3px solid #f7f7f7;
overflow: hidden;
}
#menu #main-menu {
float: none !important!;
width: auto;
margin-left: auto;
margin-right: auto;
}
#menu .nav li {
float: left;
border-right: 1px dashed #dcdcdc;
width: auto;
margin-left: auto;
margin-right: auto;
}
#menu .nav a, ul#mobile_menu a {
font-size: 12px;
color: #c6c6c6;
text-decoration: none;
text-transform: uppercase;
display: block;
height: 44px;
overflow: hidden;
-webkit-transition: background-color 0.2s ease-in;
-moz-transition: background-color 0.2s ease-in;
-o-transition: background-color 0.2s ease-in;
transition: background-color 0.2s ease-in;
}
#menu .nav a > span {
padding: 12px 14px 11px;
}
#menu .nav ul li a > span {
padding: 0;
}
#menu .nav ul li {
border: none;
}
#menu .nav ul a, ul#mobile_menu a {
padding: 14px 5px 14px 25px;
height: auto;
overflow: visible;
width: 195px;
}
#menu .nav ul a:hover, ul#mobile_menu a:hover {
background: #4b93ad;
text-decoration: none;
}
span.menu_slide {
color: #fff;
background: #549eb9;
}
ul#mobile_menu a {
display: block;
padding-left: 5px;
padding-right: 5px;
width: auto;
}
#menu .nav > li.current_page_item > a:hover {
background: none;
color: #c6c6c6;
}
Try #menu {margin: 0 auto;}
OR
#menu {
float: left;
text-align: center;
}
#menu ul {
display: inline-block;
}
If you provide a link I can look at it for you.