I am developing a website, and using a traditional technique of CSS-only dropdown-menu, but integrating CSS3 attributes. That being said, the client wants specific menu items that push the bounds of the s that contain them. This is causing twitching when transitioning between menus.
The CSS looks like this:
#nav{
background-image:url(../images/nav-bg.png);
height: 32px;
width: 100%;
padding-right:8px;
background-repeat:repeat-x;
z-index:3;
}
#drop { list-style-type: none; height: 32px; padding: 0; margin: 0 auto; width: 500px; vertical-align: baseline; color: #fbf9ec; }
#drop li { float: left; position: relative; padding: 0; line-height: 32px; background: #3a7c38 url(../images/nav-bg.png) repeat-x 0 0;}
#drop li:hover { background-position: 0 -40px;}
#drop li a { display: block; padding: 0 15px; color: #fbf9ec; text-decoration: none; }
#drop li a:hover { color: #fbf9ec; }
#drop li ul { opacity: 0; position: absolute; left: 0; width: 14em; background: #3a7c38; list-style-type: none; padding: 0; margin: 0; z-index: 2; box-shadow: 4px 4px 7px #888;}
#drop li:hover ul { opacity: 1; }
#drop li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#drop li:hover ul li { height: 30px; line-height: 30px; }
#drop li ul li a { background: #3a7c38; }
#drop li ul li a:hover { background: #254F24; }
The live example can be found at:
MasonandLauren.com/flotec/secondary.html
(Don't worry - The design is based on customer request, not my own)
Any help to eliminate the twitching would be appreciated!
Thanks!
~Mason
Try setting the z-index of your main nav items to 3 (the sub menu items +1).
It looks like the z-index of the sub tabs was causing them to be sequentially over and under the mouse as it moved.
#trans-nav li {
float: left;
position: relative;
padding: 0;
line-height: 32px;
background: #3A7C38 url(../images/nav-bg.png) repeat-x 0 0;
z-index: 3; /* <-- this is the new one */
Related
I have the code there
My question is, why aren't the buttons for different pages centered? This is more obvious when the site is minimized.
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after {
width: 100%;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
h1,h3 {
text-align: center;
color: white;
}
li{
list-style-position: inside;
display: inline;
padding-left: 12px;
}
a{
padding: .2em .1em;
color:grey;
background-color: ;
}
}
.xy{
margin-top: 75px;
}
h1{
font-size: 45px;
}
h3{
font-size: 23px;
}
body{
background-color: #451255;
}
nav {
width: 70%;
margin: 0 auto;
background: #fff;
padding: 15px;
box-shadow: 0px 5px 0px #dedede;
position: center;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #451255;
}
}
.btns,
.fill{
margin: auto;
position: center;
display: block;
}
So, I have that code, you can see on the link what it looks like. My problem is that it's not centered. And when I minimize it, the fact that it's not centered is more obvious. How could I fix that?
like #junkfoodjunkie already said, it's about basic CSS reset.
why? elements got initial CSS set, this is what's going on:
like you can see, your menu's items (blue part) are already centered but you've got initial -webkit-padding-start: 40px; (green part) and it's do the same as padding-left: 40px;, it takes not less than 40px from your menu so that's why it looks like the menu's items are not centered/stick to the right, so in order to fix it you need to overwrite the value of the <ul> element.
you're also set the <li> elements to padding-left: 12px; so the menu's items will not be centered perfectly. if you're not going to use some CSS reset then add .fill > ul {padding-left: 0;} to your CSS.
You're not resetting or eliminating default behavior. You have no margin or padding defined on the <ul>, and you have not reset the CSS to begin with, so there is a default padding and margin messing with you. Put margin: 0; padding: 0; on your <ul> and it should work.
Or, just do a full brutal reset: https://jsfiddle.net/efv8x1x2/1/
Added
* {
margin: 0;
padding: 0;
}
to the beginning of the stylesheet, and voila, centered.
http://jsfiddle.net/vxaAE/
I tried to integrate this menu in my project but it comes to me with two problems.
- sub menu going out of window when I have this scenario-
http://jsfiddle.net/vxaAE/
- I tried to give submenu's width to auto, because it would be according to sub menu's length.
How do I get this working?
CSS-
.mega-wrapper {
width: 100%;
margin: 0 auto;
}
.mega-nav {
position: relative;
width: auto;
height: 59px;
background: #252428;
}
.mega-nav ul .mega-ul {
display: block;
margin: 0;
padding: 0;
list-style: 0;
}
.mega-nav .mega-ul li {
position: relative;
display: inline-block;
}
.mega-nav .mega-ul li a {
display: block;
font-size: 1em;
color: #fff;
text-decoration: none;
padding: 0 15px;
}
.mega-nav .mega-ul li a:hover, .mega-nav .mega-ul li:hover > a {
background: #333;
}
.mega-nav .mega-ul li:hover > .mega-div {
display: block;
}
.mega-div {
position: absolute;
top: 100%;
left: 0;
width: 450px;
height: auto;
padding: 20px 30px;
background: #333;
display: none;
z-index:1000;
}
.mega-ul li ul {
float: left;
width: 23%;
margin: 0 2% 15px 0;
padding: 0;
list-style: none;
}
.mega-ul li ul li {
display: block;
}
.mega-ul li ul li a {
float: left;
display: block;
width: 100%;
height: auto;
line-height: 1.3em;
color: #888;
text-decoration: none;
padding: 1px 0;
}
.mega-ul li ul li:first-child a {
font-size: 1.2em;
color: #8dc63f;
}
.mega-ul li ul li a:hover {
color: #fff;
background: none;
}
.mega-ul ul li:first-child a:hover {
color: #fff;
}
/* clearfix */
.mega-nav .mega-ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.mega-nav .mega-ul {
display: inline-block;
}
.header-title {
line-height: 59px;
}
Any help would be greate appreciated.
Fiddle
You can do this:
.mega-nav .mega-ul li:nth-child(1n+6):hover .mega-div{
right:0;
left:auto;
}
This way, starting from the 6th .mega-nav .mega-ul li:nth-child(1n+6):hover .mega-div, it will align to right:0; going the other way.
This is thanks to nth-child(1n+6), which means starting from the 6th element, every one after has this property.
It's not the prettiest alternative, but you can mess around, making it left:-50%, or right:50%.
If you know how many you have and will always be that way and you know what one works where, you can just use :nth-child(n) and style that way. (n being the number in which that element appears).
Remove position relative from li tag
.mega-ul li {
display: inline-block;
position: relative; // remove it
}
http://jsfiddle.net/vxaAE/1/
When I set the width of the sub menu to width:auto, the items with really long names gets squished together. Currently I have the width set to 175% which is not desirable as some menus can get quiet long. How can I make width:auto work for long menu items.
Link to demo site: http://previewyournewwebsite.info/otsl/
.nav.main_nav .sub-menu {
background-color: #2D556F;
display: none;
height: auto;
/* left: -5px; */
left: 0px;
margin: 0 9px 0 0;
position: absolute;
top: 54px;
width: 175%;
}
.nav.main_nav .sub-menu li {
margin: 30px 0px;
display: block;
}
.nav.main_nav .sub-menu li a {
background-image: url("./images/sub-nav-divider.png");
background-position: 0 bottom;
height: 50px;
line-height: 50px;
background-repeat: repeat-x;
font-family: Helvetica,Arial,sans-serif;
font-size: 15px;
margin-left: -31px;
padding: 0 0 0 44px;
width: 100%;
}
.nav.main_nav .sub-menu > li{
height: 50px;
line-height: 50px;
padding-left: 44px;
}
.nav.main_nav .sub-menu > li:last-child a{
background-image: none;
}
.nav.main_nav .sub-menu li {
display: block;
margin: 0;
}
Link to site: http://previewyournewwebsite.info/otsl/
Are you looking for this?
http://jsfiddle.net/coma/MNFXB/11/
nav ul, nav li {
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
nav a {
display: block;
text-decoration: none;
text-transform: uppercase;
padding: 1em;
color: #fff;
background-color: #2D556F;
white-space: nowrap;
}
nav > ul {
background-color: #2D556F;
}
nav > ul:after {
display: block;
content: "";
clear: both;
}
nav > ul > li {
float: left;
position: relative;
}
nav > ul > li > ul {
position: absolute;
top: 100%;
left: 0;
min-width: 100%;
display: none;
}
nav > ul > li:hover > ul {
display: block;
}
nav li:hover > a {
background-color: #92A132;
}
Or would you like something like this?
http://jsfiddle.net/coma/MNFXB/12/
I recently built my first website (with much trial and error) and was quite pleased until I noticed that when you scroll down the page a little it creates a gap in the navigation so you can't click on the dropdowns. I'm going crazy trying to fix it. Can anyone please help? The site is at: http://lamplighters.org/education/smw.html
it appears to be an position issue that is set witht the element on the css. It would help to see your html and css code.
I can tell you that it has to do with the fact you used position: fixed. You have a series of other problems with your CSS as well.
I inspeceted the page and found a lot of things that didn't come together well for the navigation. Good housekeeping is not in order.
#nav, #nav ul {/*By doing this you are setting these attributes to both the nav div and the nav ul*/
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
text-align: center;
}
#nav, #nav ul {/*By doing this you are setting these attributes to both the nav div and the nav ul. This is redundant and should be consolodated into a single #nav, #nav ul, if you are going to use these assigned attributes. */
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
}
ul {/*By doing this you are only targeting any ul on the page*/
list-style: none outside;
}
ul, ol {/*By doing this are targeting both ordered lists and unordered lists to have these attributes*/
margin-bottom: 20px;
}
ol, ul {/*By doing this are targeting both ordered lists and unordered lists to have these attributes*/
list-style: none;
}
#nav li {
float: left;
width: 137px;
text-transform: capitalize;
display: inherit;
position: relative;
}
li {
line-height: 18px;
margin-bottom: 12px;
}
You may want to wipe your nav css clean and start from scratch.
I pulled a css file and put it below. hope this helps. Good luck with your sytle sheets in the future.
#menu{
width: 960px;
margin: 50px 0 0 0;
padding: 10px 0 0 0;
list-style: none;
}
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a{
float: left;
height: 25px;
padding: 0 60px;
text-decoration: none;
}
/*Text Color for the anchors*/
#menu li:hover > a{
color: #FFFFFF;
}
*html #menu li a:hover{ /* IE6 */
color: #FFFFFF;
}
#menu li:hover > ul{
display: block;
}
/* Sub-menu */
#menu ul{
list-style: none;
margin: 0 35px;
padding: 0 15px;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
}
#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover{
/*add a background position*/
background-position: left top;
}
#menu ul li:first-child a{
}
#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
}
#menu ul li:first-child a:hover:after{
/*add color scheme*/
}
#menu ul li:last-child a{
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
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{}