Here is the entire code for my menu. I'm not posting it here again for clarity.
Some code explanation:
id="onlink" means the link is clicked. The page is active.
What I want is when MENU is onlink, its entire submenu (here both: submenu and submenu2) should become visible too (note we have not clicked any particular submenu).
Is it possible to establish such dependency in pure css?
So far the submenu only pops up on menu hover and disappears after it.
I think you are looking to get the submenus to be hovered as well even after the MENU is not ONLINK. Here is a solution. Hope this is what you are looking for. I used the opacity css property.
#menu li ul.sub-menu {
opacity: 0;
position:absolute;
}
#menu li ul.sub-menu a {
border: none;
background: none;
display: block;
}
#menu li:hover .sub-menu {
opacity:1;
width: 150px;
text-align: center;
}
here is a fiddle http://jsfiddle.net/Y8pnm/2/
Just expand your selector to include every .sub-menu which is after #onlink using the General sibling selector (~).
#menu li:hover .sub-menu,
#menu #onlink ~ .sub-menu {
display:block;
width: 150px;
text-align: center;
}
jsFiddle Demo
You could make MENU and it's submenu share the same class and then use
.class:hover {
// Your CSS code
}
Related
I want to make a dropdown menu with CSS. I know a little bit how to make it but the HTML structure is different.
My structure is like that:
So in the end I would like to have it work like that:
-When you hover over menu1, the first submenupanel should dropdown with its submenulink.
the CSS of submenu_panel is looking like that:
.submenu_panel {
width: 100%;
height: 100%;
background: gray;
height:0px;
overflow: hidden;
transition: all 0.2s ease-in-out;
}
Can anyone help me to make my dropdown menu?
This is a short version of it in jsfiddle
https://jsfiddle.net/4bjk8opa/
Will this work with you.
Fiddle
ul > li {display: block; float: left; margin-right: 10px; position: relative; background: Red; padding: 0.5em; line-height: 1em}
ul ul {display: none; width: 150px; position:absolute; top: 2em; left: 0}
ul ul > li {float: none;}
ul > li:hover > ul,
ul > a:hover + ul {display: block}
You'll either have to change your HTML structure or use JavaScript to achieve this. You're also declaring height twice for your .submenu_panel.
Steevan's Fiddle shows how you'd have to change your structure to make it work with pure CSS.
To make it work with jQuery, add an ID to the link you want to show #pn1Submenu when hovered, in this case I've used "target":
JS:
$('#target').on('click', function() {
$('#pn1Submenu').show();
});
HTML:
<a href="/" id="target" class="menu_link"...
My problem is that I've got a div at the top of my site that has a dropdown menu with a float to the left, the thing is that under that div where I want to have a header whenever I hover over the menu the header floats to the left as well.
I tried to do a clear div after the top div then on css use clear:both; but it didn't really help
Here's the JSfiddle:
http://jsfiddle.net/Safushi/XRNP5/
ul {
font-size: 16px;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #464646;
white-space: nowrap;
}
ul li a:hover {
background: #565656;
}
is some of the code for the menu (had to paste some code to be able to paste JSfiddle link).
It will be fixed by adding a
position: absolute;
to the ul that contains the submenu.
The child ul element needs to be absolutely positioned if you don't want it to effect the other elements.
Example Here
#top li > ul {
position:absolute;
width:100%;
}
And as Adrift mentions, you may also want to give the ul a width of 100%.
You got the layer of HTML file right,but the property "position" wrong.
Demo
Once a tag's settled position:absolute; ,it will only be positioned referring to its containing block.So you need to set #menu{postion:relative;} to let its parent-tag be the containing block.In fact,now the submenu is totally deleted from the normal flow,so it won't affect the styles of other tags.
Moreover,I highly recommend you to resist to use descendant selectors,which not only let your browser slower,and your code maintenance much more complex as well.
I have a multi-level menu look like
I want my menu
Has the same background (#5b740d as you see)
Has the same active background (red as you see)
Has the same hover background (red as you see)
And three above option will for all menu and sub-menu
But my code look like complex. Here is my example code for hover
/* hover: can using a simple selector to make all are same background */
.menu li:hover {
background: red;
}
.menu li li ul li a:hover {
background: red;
}
.menu li ul li:hover a {
background: red;
}
I get the css on internet but it's complex then i change it by my way (But it still complex :( plz help me make it simple ).
But i get bug: when i hover item (2) like in my picture bellow then item (3) was hover?
plz simplified my css code to do three option above (i don't understand complex code :( ) and help me fix my bug thank.
Here is my code http://jsfiddle.net/SWF6w/
There's no way to make this more 'simple', there is very little superfluous markup or definitions in that code, so I don't really understand your appeal to make it more simple.
You can easily fix the red hover on child elements by specifying a direct descendent selector on your li:hover a selector, though. For example:
.menu li ul li:hover > a {
background: red;
}
Will produce this result > http://jsfiddle.net/SWF6w/1/
Replace this piece of code :
.menu li li ul li a:hover {
background: red;
}
.menu li ul li:hover a {
background: red;
}
With this one:
.menu li li ul li>a:hover {
background: red;
}
.menu li ul li:hover>a {
background: red;
}
Here is updated jsFiddle: http://jsfiddle.net/SWF6w/2/
i cant post all of my code, so please check the url.
http://www.bierhauschina.com/shekou/kulinarium/
here is css:
http://www.bierhauschina.com/menu/menu_style.css
The problem is a css menu. my menu shows all lists of menu under the first menu. i don't know where is problem, but it is exactly in css. where.. i can't got it.
Add position: relative to .nav li in your CSS.
Add position: relative; to .nav .select, .nav .current, making it like this:
.nav .select, .nav .current {
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
white-space: nowrap;
position: relative;
}
This style:
.nav .select *:hover .select_sub, .nav .current .show
Sets position to absolute. Set it to relative. Also you are loading menu_style.css twice, remove the second reference.
I have a menu uses nested unordered lists to give the appearance of a secondary dropdown menu. This is working well for the most part. I recently refactored the CSS code to make it cleaner and easier for me to understand, but now I can't seem to get the secondary (dropdown) menu to appear behind the top-level menu. Both elements have positions declared.
The HTML is fairly straightforward and I don't think there's any problem here:
<div id="header-menu">
<ul>
<li>what</li>
<li>what
<ul>
<li>what</li>
<li>what</li>
<li>what</li>
</ul>
</li>
<li>what</li>
<li>what</li>
<li>what</li>
</ul>
</div>
The CSS, however, is doing things that I don't really understand.
#header-menu > ul > li {
font-size: 2em;
display: inline;
position: relative;
}
#header-menu > ul > li:hover {
background: #a4b0ac;
padding: 25px 0;
}
#header-menu > ul > li > a {
padding: 25px;
position: relative;
z-index: 100;
}
#header-menu li > ul {
display: none;
position: absolute;
z-index: 99;
background: #CC6601;
}
#header-menu li:hover > ul {
display: block;
}
#header-menu li ul > li {
font-size: 0.8em;
display: block;
position: relative;
}
#header-menu li ul > li a {
padding: 10px;
display: block;
}
#header-menu li ul > li a:hover {
background: #a4b0ac;
display: block;
}
EDIT: Misread your question initially.
You can't put different z-indexes (z-indices?) on elements that are nested in that way because inside of one element cannot hide behind itself while the rest of it shows. You'll have to un-nest these and then apply the z-index, or remove the conflicting reference in the first z-index applied to <a>.
I tested this in Firefox 3.6 on Windows and it appears to work fine. That is, the secondary menu is appearing under the primary menu. Perhaps you could give us a screenshot of what you're seeing?
Cheers,
Scott
I looked at in in IE7, FF3.5, and Chrome (4.0.249.8).
It looked great in Chrome (drop down under the second menu item), in IE7 the drop down was under the third menu item, and in FF it was under the first menu item. Is this part of the problem? If is is, I believe it is a "position" (relative/absolute) problem vs. a "z-index" problem.
Also, with regard to z-index, I believe that IE resets the z-index stack whenever you change the position along the hierarchy. In your example, the css changes from "relative" to "absolute". Maybe that has to do with it?