I usually dont have problems with css, and I'm made this nav menu myself but I just can't seem to understand why it will not show my div when I hover over an item ... I create a jsfiddle # http://jsfiddle.net/LuLTM/ with all the code as well ...
#beautyworld #beautyhealth {display:none;}
#beautyworld #beautyhealth:hover {color:black;display:block!important}
I want when hover over div #beautyworld for the div #beautyhealth to appear ... I just dont understand why my css is not working .... Could someone please advise ? Thank You
I think the problem is that you are trying to have fire a hover over something that is currently 'display:none'. Since display none collapses the element, there is nothing to hover. You heed to have it hover at a relative parent level to cause the display of the child.
For example:
#beautyworld > div { display:none; }
#beautyworld:hover > div { color:black; display: block !important; }
Related
I have made a menu that 'popups' on hover when javascript is disabled. However this is working ok, the menu shows a scrollbar when the menu is to large to fit into the viewport (window).
When it popups on hover there are two scrollbars, one of the window and one of the menu. Looks very ugly and can confuse the user.
With javascript enabled I apply a .noscroll class to the body so there only one scrollbar.
.noscroll { overflow:hidden !important; }
Tried to do this with CSS only but can't get it to work, tried several things like:
.nav .panel:hover > body,
.nav .panel:hover > html { overflow:hidden !important; }
.nav .panel:hover #body { overflow:hidden !important; } /* body with id body */
The menu itself is fixed positioned. The reason I do it this way is to be sure the menu covers the whole window because height:100% doesn't want to cover the whole document and it's very ugly. Also, the search bar will be always visible.
How can achieve the effect I want?
Image (click on right mousebutton to view larger image):
This can't be done with current CSS rules. You can only apply rules to children of the specified element, not parents. See https://stackoverflow.com/a/1014958/1034613 for specifics. For now, you will have to stick to Javascript for that.
I'm making a homepage like this: http://jsbin.com/umaguc/1/ and I'm currently working on the dropdown menu. Now what I want is to make an effect like: http://www.script-tutorials.com/demos/249/index.html; I have a div id="lavalamp" which has width, height and background color (looks like a rectangle); when I hover one of #nav ul li element (like Home, Game Offline, Game Online, Esport, Music ...) i want this #lavalamp div to be moved and changed its width so that it will looks like the effect I mentioned above.
This is the idea for my code:
#nav li:nth-of-type(1):hover ~ #lavalamp {
left: 39px;
}
#nav li:nth-of-type(2):hover ~ #lavalamp {
left:110px;
width:110px;
}
but sadly it's just not work. When I hover over an #nav ul li element, nothing changes ! Hope you guys can have me with this problem .. Thanks a lot !
It looks like you've used a general sibling selector to select #lavalamp, but that element never appears as a sibling of your li element.
Unfortunately, I don't believe CSS has a way for you to climb back up the DOM to get to your #lavalamp from the lis. You could use jQuery, or you could think about ways to restructure your markup that would make the element accessible through pure CSS.
Here I've got a jquery menu which is working perfectly. But Ive given it a fixed width of 400px and so what happens is that if I add more than certain number of links to the main ul they will flow in the next line and that is absolutely not desired.
I tried overflow:hidden and line-height to somehow overcome the issue BUT NO RESULT anyway.
Here is the menu : http://jsfiddle.net/b5Wdc/
As you see there, the red color link flows on the next line and that is the problem.
What do should I write to hide the overflown links in this situation?
Thank you all anyway.
From our conversation in the comments on the question, it seems that your menu is completely fixed and any "extra" items should always be hidden and there is no dynamic display or wrapping required. So you can just use CSS to hide all menu items that you know won't fit in. Since a menu item has a width of 99px and the menu is 400px you know you will only ever show 4 items. This purely CSS will hide the rest:
.HeadMenu #nav > li:nth-child(n+5) {
display:none;
}
However it requires a minimum of IE8 for the nth-child CSS selector support.
Since you mentioned jQuery in the question you could accomplish the same in JavaScript if you need to support IE8 with:
$('.HeadMenu #nav > li:nth-child(n+5)').hide()
Alternatively, keep the CSS solution (as it's cleaner) and use selectivizr to bring nth-child selector support to IE8.
if you change your styles to the following i think it may work:
.HeadMenu .HeadMenuMain
{
display:block;
position:relative;
margin:0;
width:400px;
padding:0;
direction:rtl;
height:40px;
white-space:nowrap; //will make elements stay on one row
}
.HeadMenu .HeadMenuMain li
{
display:inline-block; //will make elements stay on one row with the nowrap
list-style:none;
position:relative;
}
http://jsfiddle.net/b5Wdc/2
Adding an overflow:hidden to the navigation menu will do the trick:
.HeadMenu #nav {
overflow: hidden;
}
I have the problem whereby I can't keep my sub menu visible. When I hover over the parent <li> it appears, and then when I move down to select one of the sub menu items it disappears. This is as soon as focus is lost from the parent <li>
I can't find a solution anywhere.
can someone please check it?
http://www.mymediaventure.com/about.php. It is under the Pricing tab. This is so frustrating. other examples I look at seem to work and I can't spot any clear differences that would hint why theirs works and mine doesn't.
Thanks in advance.
The problem is in styles.css and has to do with your #main_content h1 title element overlapping your div#primary_navigation. You can fix it by setting a higher z-index on your navigation element as I've done in the example below.
#wrapper #top #right div#primary_navigation
{
position : relative;
z-index: 2;
font-size : 11pt;
margin-top : 72px;
}
And a little further down in the CSS:
#main_content h1
{
position : relative;
z-index: 1;
top : -20px;
font-weight : normal;
}
If you want to visually see the problem, add a background colour to your #main_content h1 and you'll notice it almost completely overlaps your tabs. As a result you can trigger the dropdown when you hover over the top of the Pricing tab, but as you move down to the sub items, your mouse goes over the title and the menu disappears.
#main_content h1 {
font-weight:normal;
position:relative;
top:-20px;
}
THis is the problem, try deleting the position:relative, or change it to something else, ie:absolute
My solution to this was to expand the padding around the parent so that the selectable/hover region was larger.
In my case I set something like: .nav a {padding: 20px;}
I had a similar problem and I've found a solution for mine. Now I'm not versed in coding at all, some light Dreamweaver, but that's about it. I was having this problem with a tumblr theme and none of these solutions worked. Only after changing top: 25px; to top: 20px;, the dropdown did work for my site. Hope this helps someone.
I followed the advice of the previous poster but with modifications. I changed all of my relative positioning to absolute for all items on the page (header, menu, and content) and this fixed the menu problem. I had to change for all three items for the menu to stop disappearing on mouseover.
I had a margin set on the <ul> which I removed and put on a div containing the <ul>.
anyway I managed to get a drop down menu from image hover effect, example and example code here dropdown menu from custom button image hover
I hope this helps someone
I had a similar problem: a drop down menu disappeared when the mouse pointer hovered over a part of the drop down menu at which underneath a adsense ad was shown. Putting the ad down in the html page solved the issue. Did not try out other solutions.
I also had this problem. The problem was that there was a space between where the main menu ended and where the dropdown menu began, so while moving the nouse down to the dropdown options, it would pass over an area of the background and the menu would disappear.
The fix was adjusting the top position as shown below (in my case, from 4.0 to 3.75em)
.main-navigation ul ul {
position: absolute;
top: 3.75em;
I had the same problem with the secondary hover navigation going away when i tried to move from the primary to the secondary menu. What seemed to help for me was to move the margin up into the primary menu. I added the following line to my already existing ul li ul { margin-top: -.1em; }
I have a table inside a couple of nested divs. One column holds an image whose width makes the total width of the page wider than the display and the horizontal scrollbar shows.
This cell is from an asp.net ajax popup (on mouseover) and is hidden via javascript, so the scrollbar isn't needed.
Is there a way via css/xhtml to make it so that the scrollbar doesn't show? I am sure that the width of the table cell is causing the problem because when I remove it, the scrollbar is gone. The image element is nested in a div. I tried overflow: hidden and manipulating the table cell widths - neither worked, at least without altering the widths of the images.
Thanks in advance.
I can't say I'm sure why you'd be getting a scrollbar with overflow:hidden, but here's the trick I use to have mouse-over popups:
HTML:
<div><a href="#" class="showtooltip">Text you want visible at all times. <div
id="tooltip">elements you want for mouse tooltip</div></a>
CSS to format links:
a:link .showtooltip{
//CSS
}
a:hover .showtooltip{
//CSS
}
a:hover .showtooltip{
//CSS
}
a:active .{
//CSS
}
Your CSS will likely be the same for all of those next up we need to set the CSS for the tooltip:
a:link .showtooltip div{
visibility:hidden;
}
a:hover .showtooltip div{
visibility:hidden;
}
a:hover .showtooltip div{
visibility:visible;
//CSS to properly position and size div
}
a:active . div{
visibility:hidden;
}
You can then have your ajax write to document.getElementById('tooltip')
I should have mentioned the fact that this problem only occurs in IE7 and not in FF3. Anyways, the following link illustrates the bug I ran into. Hope this helps anyone else who runs into this problem.
http://snook.ca/archives/html_and_css/position_relative_overflow_ie/