I've tried a bunch of techniques to solve this. I've used float (left/right) and played with positioning (absolute & relative). None worked.
Basically my navigation keeps moving when the the text decoration (font-weight: bold; in this case) is applied.
I'm new to CSS and this is my first header- so any feedback on the header/site-navigation as a whole is welcome. My second layer nav (ul ul) seems to be lining up vertically, and seems to be using effects from the previous layer. This needs fixing too.
Here is my code:
.main-navigation {
left:50%;
transform: translateX(-50%);
position: absolute;
padding-top:0em;
margin: 0px auto;
z-index: 999;
border-top: 2px solid;
border-bottom: 1px solid;
display: inline-block;
}
.main-navigation-body {
width:1000px;
margin-left:auto;
margin-right:auto;
text-align: center;
}
.main-navigation-body ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation-body a {
color:black;
}
.main-navigation-body a:visited {
}
.main-navigation li {
display: inline-block;
text-align: center;
padding:1.64em;
padding-top: 0.3em;
padding-bottom: 0.3em;
}
.main-navigation a {
text-decoration: none;
}
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
position: absolute;
top: 2.0em;
left: -999em;
z-index: 99999;
background-color:pink;
width: 100px;
text-align:left;
}
.main-navigation ul ul ul {
left: -999em;
top: 0;
}
.main-navigation ul ul a {
}
.main-navigation ul ul li {
display: inline-block;
border-top: 0px solid;
border-bottom: 0px solid;
padding:0.1em;
}
.main-navigation li:hover > a,
.main-navigation li.focus > a {
font-weight: bold;
}
.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}
.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
font-weight: bold;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
left: 100%;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
font-weight: bold;
color: #BB9A69;
}
Here is the website
Thanks,
This is normal behaviour: Bold text is wider, thus repositioning the centered text around it.
You could go for a fixed width on all links to prevent this:
.main-navigation a {
text-decoration: none;
min-width: 6em;
display: inline-block;
}
Related
When I hover over the html section the html & css nav option is moved to the right for some reason, how do I get it to align with the other nav options.
http://codepen.io/anon/pen/bEqPRQ
#nav {
list-style: none;
text-align: center;
padding: 1.250em 0 1.250em 0;
background: #ffffff;
font-size: 106.25%;
font-family: 'Oxygen';
}
#nav li a {
text-decoration: none;
text-align: center;
color: #FFF;
}
#nav ul li ul.dropdown {
background-color: #000000;
display: none;
position: fixed;
z-index: auto;
left: 400;
vertical-align: left;
}
#nav ul li:hover ul.dropdown {
display: block;
}
#nav ul li ul.dropdown li {
display: block;
}
#nav > ul > li {
display: inline-block;
margin-right: 2%;
padding: 4.375em 1.250em 4.375em 1.250em;
}
#nav > ul > li > a {
text-decoration: none;
color: #000000;
}
#nav > ul > li > a:hover {
color: #00c5a2;
}
Your <ul> has a default styling (padding-left) which has to be removed. Adding
#nav ul li ul.dropdown {
padding-left: 0;
}
moves your text to the left.
You should also check your CSS, vertical-align: left and left: 400 (doesn't have a unit) aren't valid and won't work.
You can solve the problem adding padding left = 0 in the css of #nav ul li ul.dropdown :
#nav ul li ul.dropdown {
padding-left: 0;
}
Try changing the .dropdown style as follows:
#nav ul li ul.dropdown {
background-color: #000000;
display: none;
position: absolute;
z-index: auto;
left: 0;
vertical-align: left;
}
Then the parent li position to relative:
#nav > ul > li {
display: inline-block;
margin-right: 2%;
padding: 4.375em 1.250em 4.375em 1.250em;
position: relative;
}
This ensures the dropdown always positions itself absolute to its parent (the li).
Also adding padding: 0 to the dropdown ul:
#nav ul li:hover ul.dropdown {
display: block;
padding: 0;
}
Fiddle: https://jsfiddle.net/04zospoj/
I have a drop down menu and when you hover over an option it shows the submenu, but then when you move the cursor down; sometimes the rest of the menu will hide. I have noticed there is a little bit of space (margin? border?) underneath that I am assuming is the culprit unless someone can tell me differently.
Below is an image to show what I mean; there is a small gap between the two options and I am assuming when you make the cursor go over that point it comes off "hover" and hides it
Any help would be greatly appreciated.
.menu ul { margin = ..;}
The above code makes the margin bigger, however even when it is set to 0 it still seems to be there..
This is my HTML for the menu
<td align="center" bgcolor="#666666">
<div class="menu" align="center">
<ul>
<li>Bar Equipment
<ul>
<li>Tills</li>
<li>Bar Furniture</li>
<li>Bar Sundries</li>
...
</div></td>
This is the Css for the menu class
#charset "utf-8";
* {
margin: 0px; padding: 0px;
}
.menu {
margin: 0px;
text-align: center;
background: #efefef;
padding: 0px;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
margin: 0px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
}
.menu ul li:hover {
background: #999;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 10px;
color: #757575;
text-decoration:none;
}
.menu ul ul {
background: #efefef;
padding: none;
position: absolute;
top: 100%; /* ?? */
}
.menu ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
}
.menu ul ul ul li a:hover {
background: red; */
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
}
see the jsfiddle: http://jsfiddle.net/p1kuzzdo/
try this css:
#charset "utf-8";
* {
margin: 0px; padding: 0px;
}
.menu {
background: none repeat scroll 0 0 #efefef;
height: 50px;
line-height: 50px;
margin: 0;
padding: 0;
text-align: center;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
height: 50px;
line-height: 50px;
list-style: outside none none;
margin: 0;
padding: 0;
position: relative;
text-align: center;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
padding: 0 10px;
}
.menu ul li:hover {
background: #999;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
color: #757575;
display: block;
text-decoration: none;
}
.menu ul ul {
background: none repeat scroll 0 0 #efefef;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
border-bottom: 0 solid pink;
border-top: 0 solid #6b727c;
float: none;
margin: 0;
padding: 0;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul ul li a {
color: #fff;
}
.menu ul ul ul li a:hover {
background: red; */
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
}
I have a funny issue, I developed a Wordpress navigation in my theme, on my homepage the menu renders out good but for some reason when I click on about for example the menu styling is lost on IE only and no other browser.
Here is a testing link of the site where one can have a look:
http://rcb.com.mt/wordpresstesting/melita/safepay/
This is the menu calling part in the header.php file:
<?php wp_nav_menu( array( 'theme_location' => 'header-menu','sort_column' => 'menu_order','container_id' => 'cssmenu' ) ); ?>
This is the CSS I am applying on the menu above:
/*Main Menu CSS*/
#import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
#cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; }
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598;}
#cssmenu ul ul li {float: none;}
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
#cssmenu {
background: #333;
border-bottom: 4px solid #1b9bff;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 16px;
}
#cssmenu > ul { *display: inline-block; }
#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #333;
color: #CBCBCB;
padding: 0 20px;
position: relative;
}
#cssmenu ul { text-transform: uppercase; }
#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px;
}
#cssmenu ul ul a {
background: #1b9bff;
color: #FFF;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 16px 20px;
}
#cssmenu ul ul ul { border-top: 0 none; }
#cssmenu ul ul li { position: relative }
#cssmenu > ul > li > a { line-height: 80px; }
#cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; }
#cssmenu ul ul li:hover > a { background: #35a6ff; }
#cssmenu ul ul li:last-child > a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff;
}
#cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
#cssmenu ul ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#cssmenu li.current-menu-item > a{
background: #1b9bff;
color: #FFF;
}
#cssmenu ul li:hover > a, #cssmenu ul li.active > a{
background: #1b9bff;
color: #FFF;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
margin-left: 5px;
}
#cssmenu ul li.last ul {
left: auto;
right: 0;
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
Can someone guide through fixing this please! Many thanks!
I can't see any DOCTYPE declared in the page.
Also try to clear the floating elements of your nav possibly at the end of the parents div.
If you are using HTML5 you need to add libraries which support it on IE8 in the head of your html file like this:
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
I have a navigation menu with 3 sub levels. I need the 3rd level list to align left but I can't get it to behave. I can get levels 2 and 3 to align relatively with the main menu but I want the 2nd level to align relatively and the 3rd level aligning completely to the left. I'd appreciate any help/advice going, here is what I have:
JSFIDDLE HERE
HTML:
<ul class="nav">
<li>LINK1</li>
<li>LINK2
<ul class="#">
<li>LINK2a
<ul class="#">
<li>LINK2b</li>
<li>LINK2c</li>
<li>LINK2d</li>
<li>LINK2e</li>
<li>LINK2f</li>
</ul>
</li>
</ul>
</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
</ul>
CSS:
a, img { border:none; }
* { margin:0; padding:0; }
.nav{
display:block;
list-style:none;
text-align: left;
position: relative;
height: 30px;
}
.nav li {
display: block;
position: relative;
float: left;
border: 1px solid #FFF;
}
.nav li a {
width: 125px;
height: 30px;
display: table-cell;
vertical-align: middle;
text-decoration: none;
font-size: 12px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align: center;
color: #000;
z-index: 2000;
background-color: #999;
}
li.active {
background-color: #999 ;
color: #000;
}
.nav li a:hover {
top: 30px;
}
.nav li:hover > a {
color:#fff;
background-color:#333;
}
.nav li ul {
width: 125px;
height: 25px;
position: absolute;
left: -9999px;
border: 1px solid #FFF;
}
.nav li:hover ul {
left: -2px;
}
.nav li li:hover > a {
color:#000;
background-color:#999;
}
.nav li li{
position: relative;
border: 1px solid #FFF;
height: 25px;
}
.nav li li a {
height: 25px;
top: 25px;
text-decoration: none;
font-size: 9px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align: center;
display: table-cell;
vertical-align: middle;
color: #000;
z-index: 2000;
background-color: #999;
}
li li.active {
background-color: #a9d9d9 ;
color: #007f7b;
}
.nav li li:hover ul {
left: -2px;
top: 25px;
}
ul.nav li > ul {
width: 700px;
height: 25px;
background-color:blue;
}
ul.nav li > ul > li > ul {
background-color:red;
height: 25px;
}
ul.nav li > ul > li { display: none; }
ul.nav li:hover li { display: block; }
Well, you are missing some simple changes CSS to make it work properly. I'll post what changes I made here to make it work:
.nav li ul became .nav li > ul
.nav li:hover ul became .nav > li:hover > ul
.nav li li:hover ul became .nav li > li:hover ul
ul.nav li > ul > li { display: none; } became ul.nav li ul ul { display: none; }
ul.nav li:hover li { display: block; } became ul.nav li:hover > ul { display: block; }
Added:
ul.nav li ul ul {
position: absolute;
top:25px;
left: -129px;
}
ul.nav li li:hover > a {
color: white;
background-color: #333
}
here is what's happening.
As required!
http://jsfiddle.net/U99Br/
So I'm making this web site with a drop down menu, until now it was all good, but while doing my drop-down menu (I wanted to do something of the sort of Netflix's menu), I noticed my sub-menu is pushing the "contact" li tag 300px away (which is it's length).
Here's my code:
#menu,
#menu ul,
#menu li {
margin: 0;
padding: 0;
list-style: none;
}
#menu a {
text-decoration: none;
}
#menu {
height: 60px;
width: auto;
}
#menu > ul > li {
float: left;
margin-left: 15px;
position: relative;
}
#menu > ul > li > a {
color: #fff;
text-shadow: 1px 1px 5px #737373;
font-size: 20px;
line-height: 60px;
padding: 15px 20px;
}
#menu > ul > li > a:hover {
color: #000;
}
#menu > ul > li > ul {
opacity: 0;
visibility: hidden;
display: none;
background-color: #fff;
text-align: left;
height: auto;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
width: 300px;
}
#menu > ul > li:hover > ul {
display: block;
border: none;
visibility: visible;
opacity: 1;
}
#menu > ul > li > ul > li {
display: block;
content: '';
}
#menu > ul > li > ul > li > a {
font-size: 12px;
color: #000;
display: block;
text-shadow: none;
}
#menu > ul > li > ul > li > a:hover {
color: #0AB3FC;
}
#menu > ul ul > li {
position: relative;
}
I have not found what's wrong in my coding yet!
ad a width to the first ul li so children can not push up width from parent
#menu > ul > li {
width:300px; /* add with here */
float: left;
margin-left: 15px;
position: relative;
}