Here is my current jsfiddle for the navigation bar.
http://jsfiddle.net/EPh6j/28/
Please stretch the bar so it is a single line otherwise you will get mixed results.
The problem only occurs in ie9 as far as I know. What happens is when you hover over one of the main links the drop down comes down. However, as soon as the drop down passes the bottom of the main menu it turns invisible. What is even more confusing is that the ul border for the submenu shows but not the elements.
Here is an example of what I mean:
Notice how it is visible and then disappears past the bottom.
http://i.imgur.com/jXsoE.png
I did the above when I was trying to figure out my problem to start. In the jsfiddle, it moves all the way down as it should and is thus completely blank.
I'm completely stumped on getting this one to work.
My CSS:
.menu li li {
float:none;
position: relative;
}
.menu li ul {
left:0;
position:absolute;
top:0;
visibility:hidden;
}
.menu li:hover > ul {
top:100%;
visibility:visible ;
}
Suggestions?
I suspected a z-index issue, so I stripped them all from your fiddle. Seems to have fixed it.
BTW, "sponsorships". ;-)
Related
I found an issue with .sub_menu code left:-; and transform:translateX(-%);,So I changed position to relative and re-positioned with the two codes above, It seemed to work but now the two sub menus i have are no longer Side-By-Side. What they do is separate by a few centimeters top:, Not sure what made this happen, Any help would be appreciated,Thanks
JSFiddle sub menu pops up when you hover over Gallery
.sub_menu {
display: none;
position:relative;
top:-60%;
left:-350%;
transform:translateX(-40%);
width: auto;
}
.sub_menu > li {
display:inline-block;
}
.sub_menu li a {
background:-webkit-linear-gradient(#77047e,#FF00FF);
background:-o-linear-gradient(#77047e,#FF00FF);
background:-moz-linear-gradient(#77047e,#FF00FF);
background:linear-gradient(#77047e,#FF00FF);
}
.sub_menu li a:hover {
background:#FF00FF;
top:1em;
}
From what I understand at taking a quick look is the sub.menus are odd. They currently have the style position: absolute, and that would make them all align in the same exact place. As you can see you are doing that here:
.sub_menu {
display:none;
position:absolute;
top:-37%;
left:-47%;
transform:translateX(-20%);
width:auto;
white-space:nowrap;
}
So instead a fix would most likely be using position: relative, and then aligning them from there. Also when working with a sub menu, it would help to have an ID on each element to align it correctly (Especially when aligning them vertically and horizontally).
I cannot seem to get the sub-menu to appear on this website I built: http://website-test-lab.com/sites/mirandaparsons/
If you use Dev tools/Firebug, and check .sub-menu to display: block; then you can see that the sub-menu does appear, but not in plain sight. I've tried adding z-index to several of the menu areas with no luck.
The odd thing is, that it does appear correctly in FF on Windows?!
I haven't pasted the code here because there would be so much to copy and paste.
Any help would be much appreciated.
Thanks
I think that what you need is a background-color to .sub-menu and position relative to .nav I just tried to set it and you can see the sub menu well :
.navigation .nav {
position:relative;
}
PS : Worked on firefox 33 Mac
You need to add this to your CSS:
.navigation .nav {
position: relative;
}
This would properbly be usefull to read: http://www.w3schools.com/css/css_positioning.asp
Add this css to your stylesheet
#site-navigation.main-navigation{
position:relative;
}
I'm looking to make a horizontal drop down menu much like the main menu from HowStuffWorks: http://home.howstuffworks.com/community-living
Notice how the submenu covers the full width of the horizontal main menu bar, rather than dropping down in vertical lists. And how the currently selected main menu item and sub menu items are highlighted. I would like those features, with the added bonus of showing the other sub menu lists when hovering over the other main menu items, please look at examples below:
Basically I want to combine the effect of showing different submenu lists as you hover over the links as in this one:
http://jsfiddle.net/SKNYC/
And also having the currently selected menu highlighted in a different colour, as in this one:
http://jsfiddle.net/pRT6S/
.full-width {
width: 100%;
}
.normal-width {
width: 1024px;
margin: 0 auto 0 auto;
}
.main-menu > li {
float:left;
list-style-type:none;
padding-right:30px;
}
.sub-menu {
display:none;
}
.sub-menu li {
float:left;
padding-right:30px;
}
.sub-menu li:hover ul {
float:left;
padding-right:30px;
background-color:green;
}
.main-menu li.active {
background-color:blue;
}
.main-menu > li.active .sub-menu {
display:block;
position:absolute;
left:0;
right:0;
background-color:blue;
}
Note that I'm very new to CSS/HTML, it would be nice to get some direction as to how to proceed. :)
The first jfiddle is modified from this code:
https://gist.github.com/jgoyon/3993263
The second and third jfiddle comes from someone's code in this thread:
CSS full-page-width horizontal menu and horizontal submenu
EDIT:
Another code that I spotted that is very similar to my solution is this one:
http://jsfiddle.net/U65eT/
but I'm not sure why when the hover over item1 and item2 doesn't work?
EDIT:
Current revision
http://jsfiddle.net/pRT6S/4/
It is almost correct, just has the problem of not showing the submenu when hovering over item1
How's this? Check the comments I made.
http://jsfiddle.net/pRT6S/3/
The main problem was needing to modify .main-menu, not .sub-menu, as seen below:
/*Not doing this right*/
.main-menu li:hover ul { /* This needs to be .main-menu, not .sub-menu! */
display: block;
/* float:left; */
position: absolute; /* better than float in this case */
padding-right:30px;
background-color:green;
left: 0; /* make sure everything hangs on the left */
}
Update: You can use the code you originally provided (that I wrongfully commented out), but modify it a bit my adding absolute positioning and z-indexes:
http://jsfiddle.net/pRT6S/5/
I am trying to make a navigation bar with <nav> in HTML5 with a simple text and 3 links. This is pretty basic, but the text of my links gets mixed up and I don't know why.
↪ See my code at JSFiddle
You need to float your LI, not your UL. No need for position:absolute. If you want to move the menu to the right, you can float it as well, or use margin:left. Just be sure to clear your floats after.
See my tutorial: I Love Lists
it was because of the position:absolute and position:relative parts in your css.
Try this :
nav {
width:100%;
height:181px;
display: block;
background: url('http://i.imgur.com/JrTUv.png') top no-repeat;
margin-top:30px;
}
nav ul {
float:right;
list-style:none;
}
nav ul li {
display:inline-block;
}
There's a ton of blank space at the bottom of my page - http://shop.promaholics.com/? (It loads slow on the dev server, sorry).
I've been through the CSS lots looking for min-height type attributes but can't find any that would be causing this. Perhaps I've gone blind.
Any ideas what I can do to reduce that blank space at the bottom?
Thanks!
its the UL with class level0
right... you have a dropdown menu in "favours" in the menu that is causing the problem... its got too many elements (see if you mouseover "favours" it will be the length of your page).
Its because the script isn't hiding the element - its just moving it 10000 px to the right... :/ can you change this by using display:none;?
Change to this...
/* 2nd Level */
#nav ul { position:absolute; width:15em; display:none; border:1px solid #452915; }
/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub { display:block; top:39px; z-index:999; }
I tried it with disabling javascript and it removes the blank space at the bottom. I'm not sure in which script it's affecting it yet.
If you remove the class from the main-container col1-layout div then the blank space is greatly reduced - try looking for stray CSS in that class.
Edit: Wait, that's just because the images are no longer displaying inline. Whoops.