I'm having trouble with css, revealing more than two sub-cateogories under menu header. Please take a look at example here http://thebrlab.com/ugo-mozie/
Line 33 in your stylesheet - menu.css.
Change the height on :hover from 93px to 155px;.
.menu-item:hover ul {
height: 155px;
}
Pretty self explanatory.
Related
I created a CSS menu w/ submenus, using pixel values for dimensions. Now, that I see how stupid of an idea that was, I tried to convert all pixel values into percentages using the formular (size / context) * 100 to make the menu responsive.
The original version looked like this:
After converting everything into percentage values I end up with this:
http://jsfiddle.net/5CK9n/
The main reason is that I am still using px to specefy the height of nav ul li. Whenever I try to specify that height in percent, top menu points (nav ul li) don't change their size at all, and when hovering over one of them to bring out the submenu (nav ul li ul), the top menu point grows in height all over the place.
Could anyone tell me what might be causing this behavior?
First of all, the css that makes that happen is:
nav > ul > li.hasSubMenu:hover + li {
/* this-> */ margin-left: 25%;
}
And this:
nav ul li:hover > ul {
display: block;
position: relative;
/* and this below */
top: -100%;
left: 100%;
}
Remove the top, left and margin-left values. See: jsFiddle.
Second of all, use media-queries to make your navigation responsive. Using just percentages is not effective.
I'm struggling with positioning on a pure css driven drop down menu: My left hand side options are working fine - and this code is based on code i found online - It does the job ok.
I'm trying to make my far right hand menu drop down and NOT be clipped off/screen - I believe i will need to use a combination of relative positioning and float right but have tried lots of combinations without the desired effect.
I've put my code into a JSfiddle to show a live example (in-fact it's pretty much identical to what i'm working on) - I have added a batch of css resets to the top to make jsfiddle behave properly (on my live site i'm using an external css reset).
JS Fiddle: http://jsfiddle.net/g7Lk7/1/
.pit_toolbar_ul ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
list-style-type:none;
margin: 0;
}
Any recommendations on how to get the far right drop down to align up against the right edge of the screen would be appreciated.
Thanks for your time!
You should use right: 0 instead of left: 0 for the right menu item. You can fix it adding this styles:
.pit_toolbar_ul li:hover ul.rightside {
left: auto;
right: 0;
}
.pit_toolbar_ul li:hover ul.rightside li {
margin-right: 0;
}
and add rightside class to corresponding ul.
http://jsfiddle.net/g7Lk7/2/
.pit_toolbar_ul li:hover ul.alignRight li
{
position:relative;
left:-30px;
}
Add this class to your style sheet this may help you. I have positioned your dropdown li.
I'm trying to edit the default menu for Wordpress TwentyTwelve theme. So far I have made the sub-menus horizontal but they don't align the same in Firefox than Chrome.
In Ff it looks as I want, but in Chrome, the sub menu align with the Menu item previously clicked, NOT to the far left of the main menu.
basically, I want a horizontal two-lines menu. I can' t get the "position:"" properly.
Here's how it looks in both browsers:
Here's how it looks in both browser:
Chrome:
http://imageshack.us/photo/my-images/248/cssmenuchrome.jpg/
I can't post more links because I need 10 reputation but the second image (menu in Firefox) in there too.
And here's a fiddle of my code so far:
http://jsfiddle.net/ZN9my/
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation .menu-item li {
display: none;
margin-right: 14px !important;
}
Your problem, as you say, is that both browsers seem to be dealing with your position:absolute; differently. position:absolute should be calculated in regards to the most recent parent element with an explicitly set position, which means that it's actually Chrome which is interpreting it right.
In this case, you've given .main-navigation li a position:relative, which means that Chrome is positioning the submenu, li.sub-menu, relative to it. If you remove position-relative from the CSS for .main-navigation li and add it to ul#menu-main, then li.sub-menu will be positioned relative to the main navigation ul, and should behave as you want it to across browsers. You'll probably want to change .main-navigation li ul's top from 100% to something like 37px so it still sits in the right place.
I've made the changes to your jsfiddle as well: http://jsfiddle.net/ZN9my/1/.
By taking into consideration the following image, representing the 3 states of this menu interaction:
And knowing that:
1) We cannot have one image for all the horizontal menu, each item, (so, each ul li a) should have their own image;
2)
background image positioning will be favored since it will be better regarding cross-browser issues;
3)
The text on those buttons (should be) text and not an image;
What would be the best way for achieving this ?
I just need a kick off here.
Thanks.
Update:
Here's a test with no swapping images:
http://jsfiddle.net/Cq5JY/
Quite simply you've kind of spelt out your solution yourself I think.
Each item in the navigation needs 1 image with three states for the rollover and active states. Then you would move the background image using CSS as you mentioned depending on the way you layout the images.
The thing that makes the css a bit tricky (well you'll be writing a fair amount) is the text positioning on buttons, if the text starts at lots of different y coordinates then obviously you will be writing each one of these in to the CSS.
I would setup the nav using the code similar to the below (untested) based on a separate image for each button, which has in it the regular state of the button, underneath the rollover and underneath that, the active state of the button.
/* set up the button based on a width of 150px and 100px height */
ul li, ul li a{
display:block;
width:150px;
height:100px;
text-align:center;
background-position:0 0;
}
ul li{
float:left;
}
/* roll over - move the background image by the height of the button (100px) */
ul li a:hover{ background-position:0 -100px; }
/* active state - move the background image by twice height of the button (200px) */
ul li a.active, ul li a.active:hover{ background-position:0 -200px; }
/* define each button (background image and text position) */
ul li a.dashboard
{
background-image:url(images/dashboard.png); /* define image url */
padding-top:40px; /* position the text using a combination of padding / height) */
height: 60px;
}
ul li a.products
{
background-image:url(images/products.png); /* define image url */
padding-top:30px; /* position the text using a combination of padding / height) */
height: 70px;
}
...
And then I would have the html quite simply:
<ul>
<li>Dashboard</li>
<li>Products & Services</li>
...
</ul>
Let me know if you have any questions, I haven't actually tested the code but that is my general approach to most html/css based navigation whether it is vertical or horizontal (although I would use 1 large image for all rollover states for all buttons).
I'm struggling with an anchor (specifically a:hover) tag in CSS. Here's my JSFiddle:
http://jsfiddle.net/yXwng/
Basically I have a nav bar with a custom image (in the fiddle I got rid of it because I'm just trying to understand the syntax and line things up). The nav bar is a div and I have five links on the nav bar which are all nested divs.
In order to make the each of the nested divs links (I made the entire div a link), I added a transparent png as the background image and set the link to the background image, thus the nav bar custom image still shows and you can click the link on the nav bar.
Now, I'm trying to make a hover/rollover image for each nav bar element. When I rollover, it shows the new image but it's aligned completely wrong (down and to the right of where the original image was). On my fiddle, I used the code, but instead of the images I'm using, I just used borders for alignment purposes. You can see on the example that the red box (which is the anchor) is not lined up for some reason with the div. That is exactly where the hover image shows up when I try to implement it.
Any ideas? Thanks!
if you add the same dimensions to your a link, it should work perfectly:
#homelink a{
border:1px solid red;
width: 200px;
height: 40px;
display:inline-block;
}
You need to give a display block and some line height to <a> like this:
#homelink a {
border: 1px solid red;
display: block;
line-height: 10px;
}
It will be aligned with div. BTW you need to use UL LI structure for it.