I've read replies for similar problems to mine, and I believe I've tried the steps mentioned but I'm still having problems with my dropdown menu disappearing when mouse off.
I've removed the formatting of the dropdown just so the code is bare bones, please take a look:
http://freerange.wesleypearce.co.uk
If you mouse over past productions you'll see my problem.
Thanks in advance for what probably is quite a simple fix, it's just alluding me!
Cheers,
Wes.
In the rule for your dropdown uls, use padding-top: <#>px; rather than top: 45px; to put spacing between the menu header and your list. The top value should be no more than the height of the menu header, otherwise you'll create a gap between it and the list, which will remove the list's visibility as soon as the cursor moves off the header and over the gap.
Try this one on style.css line 89
I have changed the top position of ul. The problem is there is a gap between your a tag (Past Products) and dropdown ul
#menu ul ul {
margin: 0 auto;
position: absolute;
top: 40px;
visibility: hidden;
width: 90px;
}
You're pushing your submenu too far from your main menu item, just declare it 100% to push your submenu exactly below your main menu item to fix the problem:
#menu ul ul {
top: 100%; /* fix */
}
Related
this is going to be embarrassing, but I haven't been writing code/css for a while, so please bear with me ;-)
All I need is a simple drop down menu, but for some reason the one I came up with does not work, the drop down disappears when moving the mouse down, and text (from my main content) gets overlayed. I suspect this is happening because I use absolute position for my elements, but there must be a solution other than moving content down by stating #main top: 300px;
http://dynomotion.com/dev/home/About.html
Any ideas?
Thanks,
Sascha
Your #main div is covering up the #menu div which blocks the functionality you are seeking. You can solve this by adjusting your #menu statement in style.css to include a z-index.
For example:
#menu {
position:absolute;
left: 12px;
top: 80px;
z-index: 2;
}
Inherited a educational organization website and running into an issue with a dropdown submenu getting clipped by an inner-content div. It looks like there is a z-index of 100 for that inner-content div, but no matter what I set the submenu z-index to I can't get it to layer over the div.
The menu item that is getting clipped is Connect > Interest Section (IS) > *Clipped Menu (there should be 5 visible links).
The organization URL is http://minnetesol.org/.
Clipped subnav element
if you change the following it will work but there is more at play in the styles then z-index:-
#main-nav ul ul li ul {
left: 250px;
top: -50px;
}
#content {
margin: 0 auto -40px;
}
You would need to tweak the logo in the header after making these changes.
It looks like a z-indexing issue - #content #inner-content has a z-index of 100, so you'll need to do
#head{
z-index: 101;
}
I'd also recommend lowering your #inner-content z-index to 1 and #head to 2 just to prevent more z-index issues in the future.
Heres my website unbotttled.com and the categories sub menu does not align with its parent categories? Is it to do with the padding, is there another way to solve this other than removing the padding? Any help would be greatly appreciated. Thanks in advance.
The <a> and the <ul> are both being padded by the containing <li> "Categories". To help you understand - If you look closely the drop down is getting lined up to the left edge of "Categories" because of the containg <li>'s padding:15px.
There are a few ways to fix this, using a negative margin is one:
#menuleft ul li:hover ul {
display: block;
position: fixed;
visibility: visible;
width: 130px;
padding: 0;
padding-top: 20px;
margin-left: -15px;
Having a thorough understanding of the CSS Box Model is imperative for modern Web Development. It's fairly easy to understand.
Learn about it here: http://www.w3.org/TR/CSS2/box.html
It is not positioned correctly because the li it is inside of has padding of 15px. So it is to the right by 15px.
Add this CSS to the ul sub-menu margin-left:-15px
I created a dropdown menu for my Wordpress website. In this jsfiddle you can find the HTML and CSS code: http://jsfiddle.net/N5H4c/
see jsfiddle
I have a CSS problem there. I created the dropdown menu but when I hover 'Menu item One' it stretches and gains more width. That should not be. The sub menu items can be larger but the menu item itself shouldn't change the size. Further there is this yellow background everywhere around it when I hover the menu and I would like to remove it.
You need to update
#menu ul {
position: absolute;
background: #f7e600;
}
check jsfiddle
http://jsfiddle.net/N5H4c/5/
Add
position: absolute;
top: 38px; // your menu's height
left: 0;
white-space: nowrap;
to #menu ul : http://jsfiddle.net/N5H4c/2/
I'm trying to design a horizontal menu just using CSS
Please refer to the following
http://jsfiddle.net/aUYca/
The CSS Classes are
li.navMenuParent: A Top Level Menu Item
li.navMenuActiveParent: A Top Level ACTIVE menu item
li.navMenuNode: A Top Level Menu Item that doens't have child items
li.Active: A Child level ACTIVE menu item
I want the menu to always display the child level menu when the parent has a navMenuActiveParent element. (The intial state hover over 2Parent)
.navmenu ul li.navMenuActiveParent > ul
{
display: inline;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}
However i want that submenu hidden when the user hovers over a top level menu item WITHOUT children. (Hover over the HOME menu item)
.navmenu li.navMenuParent ul
{
display: none; -- I want this applied to ALL <ul> under .navMenu
}
I want the Submenu to show the correct submenu when the user hovers over a top level menu item WITH children. (Hover over 1Parent)
.navmenu li.navMenuParent:hover ul, .navmenu li.navMenuParent.hover ul
{
position: absolute;
display: inline;
left: 0;
width: 100%;
margin: 0;
padding: 0;
}
I can't seem to get this to work with pure CSS.
Thanks for any help!
The trick is to apply the right effects to the right elements with as little markup as possible.
http://jsfiddle.net/EGNKE/74/
Mind you I didn't reset most of the stuff because jsFiddle does that for you and I would reccommend a reset css file by default too if you're not like, a god, at css.
It only dies in quirks mode in IE, but it's easy to prevent people from viewing your website in quirks mode by keeping to the standards and/or using X-UA-Compatible header (google it).
I trust you can figure the rest out yourself, else let me know :)
(oh btw you better be using a shorttag for that background arrow in a menu item background: color url('path.jpg') posx posy repeat;)