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.
Related
I can't figure out why my site is displaying my menu icon all the way to the right, with all this extra blank scroll space, when viewed on a mobile device. Does anyone have any idea how I can remove all the extra space and move my menu bar so that it's centered?
http://mobiletest.me/iphone_5_emulator/#u=http://beeandcompany.com
In order to make it center, First thing you need to do is remove display:block from .main-navigation.So your .main-navigation will look like this :
.main-navigation{
text-align:center !important;
line-height:1.5;
}
Second thing you need to do is, there is float:left given to .main-navigation li so please remove it and add display:inline-block.So your .main-navigation li look like this :
.main-navigation li{
position:relative;
display:inline-block;
}
So your menu will look like this :
Rohil is correct with the div that has been added above the nav tag so you need to remove that, also you have another issue with the menu not actually doing anything when you click it. You need to add a css rule for the toggled state of the mobile nav like the following:
.main-navigation.toggled ul {
display: block!important;
}
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 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.
It seems to be a real silly problem, but I'm stuck at it and can't find a way out.
I'm working on a dropdown menu with pure CSS3 and all that I want is the following:
For now, I have this menu:
Note the hovered option cars behavior.
I want that the hovered element looks like the following:
Here is the jsFiddle for the example.
As I said, it could be a stupid question for some of you but I can't realize how to solve it right now.
I tryed width: 100% for a element inside the second <ul> but it doesn't work as I expected.
Any help will be appreciated.
Thanks in advance.
Does this solve the problem: http://jsfiddle.net/David_Knowles/rpF6E/
Added this:
.menu li li {
float:none;
}
.menu li ul li a {
width: auto; /* instead of 100% */
display:block;
}
I have a weird li issue I just can't figure out. I have an image set for the li on this page's content, but it's not against the text but behind the image! Confused on how to solve this. Any help would be greatly appreciated.
http://staging.liquor.com/wind-at-your-back/
Add
overflow: hidden;
to the #single_content ul. (overflow: auto will also work). If it needs to work in IE6 too, make sure the list has layout (e.g. by adding zoom: 1).
The lines inside a block box following a float are pushed aside by the floated element. But the block box itself doesn't move, keeping the background images at its left edge, covered by the floating element.
You can stop the block box from overlapping a float by having it establish a new block formatting context. One way to do that is to set the overflow property. That forces the entire list next to the float, instead of just pushing its text aside.
See the CSS2 specification section about floats for more details.
The background images of your list are behind the cocktail image. You could either make the list floating right like this
#single_content ul {
float:right;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
width:280px;
}
or give the lis a margin-left of your image's width+margin like so
#single_content ul li {
background:transparent url(images/ulliarrow.png) no-repeat scroll 0 0;
margin:0 0 0 310px;
padding:0 0 3px 15px;
}
to make the reappear behind the floating image.
To get the background images to show up from outside of the image you can add a margin to the style
add
margin:0 0 0 ~300px;
to
#single_content ul li
Immediate solution is to add the following rule to #single_content ul
margin: 0 0 0 295px;
I don't like that because it's fairly absolute, though your site looks glued together well and it shouldn't hurt. I'll look for something more elegant, and if I find it, post it here.
EDIT 1: Not much better, but you could add the following rule to the li elements instead:
background-position: 295px 0;