when I move my cursor to the main menu("for example: Menu 2"), I can see my dropdown list under
After when i move my cursor to submenu1 it is not displaying and i can't select it too
here is my sample code:
<style type="text/css">
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #666;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
</style>
<div id="menu" align="left">
<ul id="menu">
<li>
<a href='<%=request.getContextPath()%>/auth/gs.page'>Menu1</a>
</li>
<li><a>Menu2</a>
<ul class="sub-menu">
<li>
<a href='<%=request.getContextPath()%>/auth/view.page'>submenu1</a>
</li>
</ul>
</li>
</div>
Please provide me idea to resolve it
I am guessing the behaviour you're seeing is actually the submenu disappearing as you move your mouse down from the top-level nav item.
Because of the way you've set it up, there's a small gap (1-3px depending on browser and default user styles) that means it loses the hover status (and therefore hides the submenu) as you are "unhovering" the top-level nav item when you go over that gap.
If that is what you're seeing, the easiest way to fix it is to remove the top value from ul#menu li ul.sub-menu (you have it set to 30px) and add in equivalent padding to the li of the submenu to make it look right.
ul#menu li ul.sub-menu {
display:none;
position: absolute;
left: 0;
width: 100px;
}
ul#menu li ul.sub-menu li {
padding-top: 2px;
}
Here's a fiddle with that change: http://jsfiddle.net/adnrw/J44NJ/
I don't see any problems when running your code. Could you clarify what you mean by "not displaying immediately"?
ul#menu li:hover ul.sub-menu
Should probably be:
ul#menu li:hover ul.sub-menu, ul#menu li ul.sub-menu:hover
Related
I having a problem getting menu items to reappear in CSS and html. The first two line of CSS code below, "display none", hides the menu items, in which I want. However, the second code does not make the menu items appear again when the mouse is hovering over the menu. Any help on this would be greatly appreciated.
ul li ul li ul li{
display:none;
}
ul li ul li:hover {
background: #696630;
display:block; !important;
}
The item you want to reappear are the LI's nested further down, so ensure the hover is on the parent, but the element you actually style is the correct child.
ul li ul li ul li {
display: none;
}
ul li ul li:hover ul li {
display: block;
}
Please see example below. In your code, you had !important behind the semicolon which is the wrong place. I should've been directly after block.
Don't use this when it can be avoided.
ul {
padding: 0;
margin: 0;
}
li {
padding: .5em;
cursor: pointer;
position: relative;
width: 100px;
}
li:hover {
background: #696630;
}
.sub,
.subsub {
display: none;
position: absolute;
top: 1.5em;
left: 0;
}
.main li:hover ul.sub {
display: inline-block;
}
.sub li:hover ul.subsub {
display: inline-block;
}
<ul class="main">
<li>Main
<ul class="sub">
<li>Sub
<ul class="subsub">
<li>sub sub</li>
</ul>
</li>
</ul>
</li>
</ul>
Hi There can anyone help me i try to create a dropdown submenu but it doesn't work for me.
I dont know how to reate a nice menu.
example:
When i hover over "massages" then the menu must come down and show the submenu.
css here
.menu{
width:821px;
height:42px;
margin:0px;
background:url(images/menu.gif) no-repeat left;
}
.menu ul{
list-style:none;
padding:0 0 0 15px;
margin:0px;
}
.menu ul li{
display:inline;
}
.menu ul li ul{
display:inline;
}
.menu ul li a{
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
color:#fff;
line-height:42px;
font-size:14px;
}
.menu ul li.aktivni-active a{
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
line-height:42px;
font-size:14px;
Html:
<div class="menu">
<ul>
<li class="aktivni-active">Home</li>
<li>Massages</li>
<ul>
<li>Aanbiedingen</li>
</ul>
<li>Aanbiedingen</li>
<li>Prijzen</li>
<li>Agenda</li>
<li>Contact</li>
</ul>
</div>
Can anyone explane me how to create a dorpdown submenu on "Massages"
Thnx
Check with the below link.
Fiddle
/* Menu Dropdown */
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #666;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
}
ul#menu li ul.sub-menu a {
width:150px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
/* Top Nav Background Hover */
ul#menu li a:hover {
background:#000;
}
ul#menu li ul li a:hover {
background:#999;
}
/* 3rd level nav */
ul#menu li ul.sub-menu li ul {
display:none;
position: absolute;
top: 0px;
left: 115px;
width: 100px;
}
/* show the 3rd level when the second is hover */
ul#menu li ul.sub-menu li:hover ul {
display:block;
}
/* Menu Dropdown */
You should change your markup, as far as I know submenu should be part of list item it refers to
<ul>
<li class="simple-item">item</li>
<li class="submenu">item
<ul class="submenu-goes-inside-li">
<li class="simple-item">item</li>
<li class="simple-item">item</li>
<li class="simple-item">item</li>
</ul>
</li>
</ul
In your case submenu is separated from list items.
Using the same structure you have just add class to the drop menu,
set ul inside the dropMenu to display none, then to display on however. You can use css3 or jquery to make it have a nice animation or toggle.
<div class="menu">
<ul>
<li class="aktivni-active">Home</li>
<li class="dropMenu">Massages</li>
<ul>
<li>Aanbiedingen</li>
</ul>
<li>Aanbiedingen</li>
<li>Prijzen</li>
<li>Agenda</li>
<li>Contact</li>
</ul>
</div>
CSS
.menu ul{
display:none
}
.menu:hover ul{
display:block;
}
if you want some better just use jquery http://api.jquery.com/toggle/
I have some serious problem with my menu and its hover effect.
I have a very basic menu, which has a submenu:
<ul id="menu">
<li>Menu1</li>
<li>Menu2
<ul>
<li>SubMenu1</li>
<li>SubMenu2</li>
</ul>
</li>
<li>Menu3</li>
</ul>
Here is the CSS I'm using:
#menu li {
display: inline;
}
#menu li a {
padding: 10px;
}
#menu li a:hover {
background: #000;
}
#menu ul ul {
display: none;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul ul {
width: 200px;
height: 100px;
background: #000;
}
Okay, so my problem is, that when I hover my mouse the Dropdown menu and gets my mouse on the Submenus, the Hover effect of the Parent menu item (in this case Menu2) is disappearing. So it will not have black BG when I hover the mouse on the submenu items.
Is there anything I could do to make that hover effect stay on the partent menu (Menu2)?
First problem: your selectors are wrong.
#menu IS an ul , then #menu ul ul means
an ul descendant of an ul descendant of my #menu, that is an ul
You don't have three levels of uls, so...
change ul ul to li ul.
The second problem is that you are affecting a tag on hover, but a tag is a sibling, not an ancestor (or parent) of your submenu ul.
You should then target your li, not your a.
Demo: http://jsfiddle.net/mSrkn/ (with tons of problems still there, but with the two above resolved)
#menu li {
display: inline;
}
#menu li a {
padding: 10px;
}
#menu li:hover {
background: #000;
}
#menu li ul {
display: none;
}
#menu li:hover > ul {
display: block;
}
#menu li ul {
width: 200px;
height: 100px;
background: #000;
}
The problem is with yout selectors:
#menu ul li:hover > ul {
display: block;
}
This says that any element with ID that has a child ul with lis that's hovered with a child ul should be selected. Your markup is different from this, the UL itself is the ID #menu so you have to remove the first ul from the selectors themselves:
#menu li:hover > ul {
display: block;
}
http://jsfiddle.net/V7Ltw/
You might try adding the following to your CSS
#menu li:hover{
background-color: #000;
}
By hovering over the sub-menu, you're still hovering over the parent list item.
And you should follow Kyle's answer as well as you do need to remove the first UL selector from your css.
You have to change a lot of stuff to make this work, the basic idea is to put the submenu inside your menu items :
CSS:
#menu li {
display: inline;
}
#menu li a {
padding: 10px;
}
#menu li a:hover {
background: #000;
}
#menu ul.submenu {
display: none;
float: left; // For viewing purpose
}
#menu ul.submenu { padding: 20px; }
#menu ul.submenu:hover {
display: block;
}
#menu li:hover > ul.submenu {
display: block;
}
ul.submenu:hover + a { background: #000; }
#menu ul {
width: 500px;
height: 100px;
background: #000;
}
HTML:
<ul id="menu">
<li>Menu1</li>
<li>
<ul class='submenu'>
<li>SubMenu1</li>
<li>SubMenu2</li>
</ul>
Menu2
</li>
<li>Menu3</li>
</ul>
Demo here : http://jsfiddle.net/V7Ltw/
I have a menu bar. The menu bar is horizontal. The sub menu is then extended vertically upon hovering. The items in this sub menu includes Manage subjects, Manual Crawl, Crawl Interval and Archive List. When the mouse is hover to Manage subjects, it should prompt another dropdown list at the right side of it to product a sub sub menu. However, I can make this sub sub menu to appear on the right. its over lapping my sub menu. as i am really new to CSS, i definitely need help in this. i have a feeling i am not even editing
#menu ul li ul li ul, #menu ul li ul li:hover ul ,#menu ul li ul li:hover ul li and #menu ul li ul li ul li a:hover. thank you.
HTML
<div id="menu">
<ul>
<li>Home</li>
<li>Executive Summary</li>
<li><a href="#" > Visual Analytics</a></li>
<li><a href="#" >Settings</a>
<ul>
<li><a href="#" >Manage Subject</a></li>
<ul>
<li>Add Subject</li>
<li>Edit Subject</li>
<li>Delete Subject</li>
<li>Export Subject</li>
</ul>
<li>Manual Crawl</li>
<li>Crawl Interval</li>
<li>Archive List</li>
</ul>
</li>
</ul>
</div>
CSS
#menu {
position: relative;
float: left;
width: 1200px;
height: 35px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 0;
background-color:#000;
text-align: center;
z-index:1;
}
#menu ul {
position: relative;
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
#menu ul li {
position: relative;
float: left;
height: 100%;
padding: 0;
line-height: 35px;
}
#menu ul li a {
position: relative;
height: 100%;
width: auto;
float: left;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0 3px;
color: #fff;
text-align: center;
}
#menu ul li ul {
display: none;
width: 150px; /* Width to help Opera out */
background-color: rgba(0,0,0,0.5);
}
#menu ul li:hover ul {
display:block;
position: absolute;
top: 35px;
left: 0;
margin: 0;
padding: 0;
z-index: 1;
width:150px;
}
#menu li li a{
height: 35px;
width: 150px;
float: left;
text-decoration: none;
padding: 0px;
margin: 0 0px;
color: #fff;
text-align: center;
}
#menu ul li ul li a:hover{
background: rgba(255,255,255,0.5);
width:150px;
float:left;
}
#menu ul li ul li ul{ display:none; position:absolute;background-color:rgba(28,28,240,0.5);}
#menu ul li ul li:hover ul { display:block; position:absolute; top:0px;background-color:#fff;}
#menu ul li ul li:hover ul li { list-style:none; float:none; margin-left:1px; padding:0px; position:relative;background-color:#fff;}
#menu ul li ul li ul li a:hover{
background-color: rgba(28,28,240,0.5);
width:150px;
float:left;
}
First Question
You have to wrap the submenus ul in the higher level menuitem li to make them appear correctly. Here is an easy example for the html structure.
<ul id="menu">
<li><a>mainmenu</a></li>
<li><a>mainmenu</a></li>
<li><a>mainmenu</a>
<ul>
<li><a>first level submenu</a></li>
<li><a>first level submenu</a></li>
<li><a>first level submenu</a>
<ul>
<li><a>second level submenu</a></li>
<li><a>second level submenu</a></li>
<li><a>second level submenu</a></li>
<li><a>second level submenu</a></li>
</ul>
</li>
<li><a>first level submenu</a></li>
<li><a>first level submenu</a></li>
</ul>
</li>
<li><a>mainmenu</a></li>
<li><a>mainmenu</a></li>
</ul>
Second Question
The trick for moving the second level submenus to the right was giving them the property left:150px.
#menu ul ul{
left:150px;
}
Improvements of your Stylecheet
By the way notice that you can specify all properties of a initially hidden box in css first. Then your :hover selector only needs to set the display:block rule to show the element. If it is hidden by display:none the already set background color won't be visible.
But there are other points you could improve your stylecheet, too. For example you can set properties for all submenus with the selector #menu ul (if your ul of the menu has the id menu) because they are all lists in your menu. If you want to only set something for the first level submenu you can use #menu > li > ul as it only approaches direct children. For the second level submenus use #menu ul ul.
Using these techniques your stylecheet is more abstract. My solution also works for and unlimited number of levels of submenus. You could for example implement a third level submenu only by adding the html code. The stylecheet can handle it.
Example
Here is a working fiddle of your example: http://jsfiddle.net/m8Bcb/4/
There you can see the improved source code (both html and css) and a working live demo. And with this edit the stylecheet is also commented for your understanding. I hope that helps you and you will continue learning css!
Your submenu needs to be inside of the list item of the parent menu.
Modify your HTML like so:
<ul>
<li>Home</li>
<li>Executive Summary</li>
<li><a href="#" > Visual Analytics</a></li>
<li><a href="#" >Settings</a>
<ul>
<li><a href="#" >Manage Subject</a>
<ul>
<li>Add Subject</li>
<li>Edit Subject</li>
<li>Delete Subject</li>
<li>Export Subject</li>
</ul>
</li>
<li>Manual Crawl</li>
<li>Crawl Interval</li>
<li>Archive List</li>
</ul>
</li>
</ul>
Notice that all I did was move the </li> to be after the </ul> of the submenu.
change your css like this
#menu ul li:hover > ul {
display:block;
position: absolute;
top: 35px;
left: 0;
margin: 0;
padding: 0;
z-index: 1;
width:150px;
}
when you hover li the whole ul shows, thats why you must select direct siblings.
and add
#menu ul li ul li ul {
display: none;
}
Just to add to danijar's js fiddle solution.
You may wish for all sub menus to display relative to the first list ('main menu items') however a better solution may be to display lists or 'sub menus' relative to their parent list item.
/* ensure each submenu displays relative to it's parent list item */
#menu ul li {
position: relative;
}
Here is an example of a menu that you may want to add the above line of styling for:
http://jsfiddle.net/codk1sgm/5/
Have a look at the menus on this page:
http://www.pieterdedecker.be/labs/vspwpg/?page_id=96
They look okay in Chrome 5 (above) and IE8 (below).
When I load the page into Firefox 3.5 (above) or IE7 (below) something goes wrong.
In the first case, the arrows on the right have moved to the next row. In the second case, the menu falls apart entirely.
How do I adapt the website I'm developing to this? Is it because FF3.5 and IE7 haven't implemented W3C standards entirely or simply because my CSS doesn't make sense? My HTML code has been validated XHTML 1.0 Strict as shown here.
Update - If you don't have IE7 and you're a Windows user, you can view the site through the eyes of IE7 here without actually having to install IE7: http://spoon.net/browsers
IE7 Dropdown
As Sotiris mentioned, the easiest fix for IE7 would be to give ul#menu > li > ul a fixed width. This would cause the child <li> and <a> elements to properly take 100% of their parent width.
What's currently happening in IE7 is that your dropdown menu width is being determined by the length of your longest child element on account of the white-space: nowrap property. IE7 then doesn't properly apply this to the dropdown's <ul>, which instead takes its width from the top level menu item (104 pixels in your case).
If you still want to keep the dynamic width menus, you can fix it in IE7 with a snippet of jQuery that loops through all your links on load, finds the widest one and sets the parent <ul> to that width. It should be run in your $(window).load event handler, just after you set all ul#menu > li ul to display: block:
// Nodig om de width te kunnen raadplegen
$("ul#menu > li ul").css("display", "block");
// Loop through all dropdowns and find widest child link in each
$('ul.children').each(function(){
// Find widest link in each submenu
var widest = 0;
$(this).children('li').each(function(){
if($(this).width() > widest)
widest = $(this).width();
});
// Set submenu width to widest child link
if(widest != 0)
$(this).width(widest);
});
To fix the centered items, you'll also need to remove the text-align: center from this rule:
ul#menu > li{
background: url(img/menuitem.png) left top;
display: block;
float: left;
height: 36px;
margin-right: 1px;
position: relative;
width: 104px;
}
Finally, you'll need to make sure the hasLayout flag is set properly on your dropdown links. You can do this by setting zoom: 1 on the following rule:
ul#menu > li > a, ul#menu > li > ul a {
zoom: 1;
display: block;
text-decoration: none;
white-space: nowrap;
}
Firefox 3.5 Submenu Indicator
This is an easier fix. Add the ul#menu > li > ul > li a declaration and change your span.sf-sub-indicator rule as follows:
/* Makes the link a coordinate map for span.sf-ub-indicator */
ul#menu > li > ul > li a {
position: relative;
padding-right: 10px;
}
ul#menu > li > ul > li a > span.sf-sub-indicator {
position: absolute;
top: 0;
right: 0;
}
This will absolutely position the indicator to the far right of your link. Note you'll need to apply this fix for IE7 as well otherwise your submenus will be pushed down one link too far.
change class ul#menu > li > a, ul#menu > li > ul a to -
ul#menu > li > a, ul#menu > li > ul a
{
display:inline-block;
text-decoration:none;
white-space:nowrap;
width:95%;
}
and move <span>>></span> out of the anchor tag. this works on firefox could not try it on IE
Update
<style type="text/css">
.menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
{
border: 1px solid orange;
color: white;
background-color: orange;
}
.menucontrol a:hover
{
background-color: #fff;
color: #333;
}
.menucontrol, .menucontrol ul
{
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
position: relative;
line-height: 1.5em;
}
.menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
{
display: block;
padding: 0px 5px;
text-decoration: none;
}
.menucontrol li
{
float: left;
position: relative;
}
.menucontrol ul
{
position: absolute;
width: 12em;
top: 1.5em;
display: none;
}
.menucontrol li ul a
{
width: 12em;
float: left;
}
.menucontrol ul ul
{
top: auto;
}
.menucontrol li ul ul
{
left: 12em;
margin: 0px 0 0 10px;
}
.menucontrol li:hover ul ul, .menucontrol li:hover ul ul ul, .menucontrol li:hover ul ul ul ul
{
display: none;
}
.menucontrol li:hover ul, .menucontrol li li:hover ul, .menucontrol li li li:hover ul, .menucontrol li li li li:hover ul
{
display: block;
}
</style>
<body style="font-family: Consolas; font-size: 11px;">
<ul class="menucontrol">
<li>1 HTML</li>
<li>2 CSS</li>
<li>3 Javascript
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download<ul>
<li>3.1.1 Download<ul>
<li>3.1.1 Download</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
</li>
<script type="text/javascript">
function mainmenu()
{
$(" .menucontrol ul ").css({ display: "none" }); // Opera Fix
$(" .menucontrol li").hover(function()
{
$(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
}, function()
{
$(this).find('ul:first').css({ visibility: "hidden" });
});
}
$(document).ready(function()
{
mainmenu();
});