I have a few problems with my CSS Submenu.
Please check my fiddle here:
http://jsfiddle.net/9XUJD/1
A few problems:
When you hover over A element, it gets pink background, but If you go over submenu, parent A element is losing it's background. How can I tell him that even when user opens submenu, parent A needs background ?
How can I tell my .sub element that It needs to have auto width so that expands to right if there are elements in it? If you check fiddle, I have two columns inside sub element, but it has a fixed width like it's parent.
Can my .sub element be responsive ? So that I have a max width with different breakpoints?
jsFiddle Demo
You need to use the list item hover state, not the link.
This is the new selector:
ul li:hover > a {
background: #E94160;
color: #fff;
text-decoration: none;
}
Just remove the width setting from .column. Block elements get 100% width by default.
Didn't quite understand but I think the fiddle answers your problems.
Related
Okay I am a newbie regarding CSS and while during a tutorial I got completely lost.
As far as I know a block element takes up a whole line. And an inline element only takes up the width and height of the element and an inline-block works like an inline element but here you can set width and height.
Okay and now the question. In the tutorial it makes an unordered list:
header nav ul li {
display: inline-block;
padding: 0;
}
There are 5 elements in the list. Now 4 of the elements is text like "Menu", "Contact us" etc. but one element in the list should be the logo image. Now to add the logo I need to do this:
header nav ul li#logo a:link {
display: block;
width: 300px;
height: 260px;
background: url('images/logo.png') center center no-repeat;
}
But what I don't get is that I first make the elements in the list to inline-block elements (which makes sense cause I want them next to each other and one of them is an image.) But why in the world do I have to turn the element in the list that I want to contain the logo image into a block element? First of all I thought it would take up the whole line (but the elements are still next to each other) and second, I already turned the elements in the list into inline-block elements? Anybody who know the answer?
Considering the few points below you should get it why the anchor has display: block
1- The display:block is set to the anchor which is inside the li... not directly to the li itself.
Thats why its still showing all li next to each other because you changed one of the inner elements inside it to block not the li itself.
2- The default display property of anchor is inline ... this means that you don't have control on width and height.
3- To be able to show background-image inside anchor you will have to set a specific width and height and thats why the display is changed from inline to block to be able to control width and height
BTW you can also use inline-block with the anchor and it will work
This is what I tried.
CSS:
div#Layer3:hover div#Layer3copy
{
display: inline-block;
}
HTML:
<div id="Layer3"><img src="images/Layer3.png">
<div id="Layer3copy"><img src="images/Layer3copy.png"></div>
</div>
I want this div to be hidden and when hover another div it appear, however, its working OK,
But moved a little bit from it actual place,
is there a solution for it?
Alright, first you need to know display,position and pseudo state properties of CSS
in your snippet #Layer3 is wrapping #Layer3copy so we can invoke it on hover state by using direct child selector i.e
#Layer3:hover > #Layer3copy{
/*Do your things here*/
}
working example: https://jsfiddle.net/ishusupah/eupfr101/
In this example as you wanted i am using #Layer3copy display:none and on hover state i am making it display:block.
you can display and position however you want.
You are not hiding/showing any div. What you are actually doing in the code above is when Layer3 div is hovered on, you are changing Layer3copy div style to be inline block - and that's why it is moving. A div is by default a block element - which means it is taking up a full width of a row. When you change it to an inline-block you are "telling" the div to align next to another element if there is enough width in a row, and not take the full width - that's why the div is moving next to the parent div.
You also need to modify your selectors to achieve your requirement.
To actually achieve what you want (hiding and displaying back the Layer3copy without it being moving), use this CSS code:
#Layer3 #Layer3copy{
display: none;
}
#Layer3:hover #Layer3copy{
border: 3px solid red;
display: block;
}
The first selector is giving the default definition when layer3 - the container div is not hovered - in which the child Layer3copy div is not displayed (display:none).
The second selector is saying when layer3 is hovered apply styling to Layer3copy and turn it to display:block - which is the default display for divs (they are block elements) - this it is getting displayed and staying it its initial position without "movement".
Here is a working example with the above code.
I've additionally added a thin red border to the inner div, so you'll see what i mean in a block element - which is taking the entire width of a row.
try using this
#Layer3:hover > #Layer3Copy {
position: absolute;
display: inline-block;
/** Postion of your div **/
}
Try to adjust the position until it is placed wherever you want it to be in.
I think you want to be like a tooltip or something
In Wordpress, I'm trying to style the dropdown menu used in .primary-menu. Unfortunately, things don't really go as planned.
I copied the HTML from the inspector in Chrome and removed the clutter such as href's and id's and tried to debug it in jsFiddle: https://jsfiddle.net/1cL8fq8b/1/
When hovering over the last item in the results tab, .sub-item seems to take the width of it's parent. I gave .sub-menu an absolute position to make it independent. Still I can't get .sub-item to have it's own width.
Here's a screenshot for a better view.
How can I make the sub-item to have it's own width, and not rely on it's parent's width?
You can add a negative margin-left style to extend your drop down menu to the left.
.sub-menu {
position: absolute;
right: 0;
display: none;
margin-left:-100px;
}
See this: https://jsfiddle.net/jokbd6L5/
Or define a custom width for your drop down:
.sub-menu {
position: absolute;
right: 0;
display: none;
width:100px;
}
See this: https://jsfiddle.net/hjoctv5x/
Since its position is absolute I don't think there is a way in CSS to make it expand according to the width of its content (variable width). But you can write some javascript to calculate the max content width for each dropdown menu and set the dropdown menu width accordingly.
It's because on hover its display is set to block. Set it to inline-block instead
First and foremost.. read this http://learnlayout.com/position.html
absolute is the trickiest position value. absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a "positioned" element is one whose position is anything except static.
So basically absolute positioning only takes it out of the document flow
also.. this piece of code..
&:hover .sub-menu
is only targeting the submenu. Try targeting the li of the submenu to give it its own width. the submenu ul (which is what your targeting has nothing to do with the width of the li's unless they are sized based on percentages.
However I search, I cannot find a valid example....
I have a typical horizontal menu build with a :
div ul li a li a ... /ul / div
(li elements has align left)
Overflow hidden applied on div or ul does nothing. I have always a vertical adjust of li elements when I resize the browser to test the overflow behavior
I have played with position, etcs....
Can any "charitable" soul write an example or give a link?
Thanks....
If your div or ul don't have a specified height, they will grow to adjust to their content, and the content will not be treated as overflow.
Unless you properly clear: both; after floating your li elements, the div and the ul will have no height at all.
If you have done that, then it is not very clear what you are trying to hide, with overflow: hidden;
One thing is sure: You should figure out if the div and ul have heights and widths, and what those values are, and if they don't, you can manually assign them, to fit your toolbar (for example).
I have a strange issue with the z-index of an element not getting set even when I put a position:absolute on it. The parent element has overflow:hidden set.
TO see an example of what I mean:
Go to http://www.berrisforda.com/
On the job search tab there is a custom select/dropdown hover over it
Notice that it get cut off by the container, it actually extends below it but the container has overflow:hidden set
I am trying to set a z-index on it but haven't had any luck
Can anyone help please?
In this case, z-index won't help you. If you have overflow:hidden on a parent element, any child outside of that element's bounding box will be hidden. You have three options:
Move the drop down element so that it is no longer a child of the overflow:hidden element.
Make the drop down list scroll.
Remove the overflow:hidden style.
Adjust the hieght on your .tab to be shorter...
ul#output li.tab {
position: absolute;
width: 684px;
height: 345px; /*see how I changed this value*/
background-color: #fff;
}
And remove overflow:hidden from #feature-list{}
And set the z-index:1 on .dropdown dd ul {}
Do the following step too to fix you footer....
Sorry Burt - I made a mistake initially - here is the final step
Remove position:relative and z-index from #footer
Then you should be good to go!