i have a weird problem with Chrome only. I have a menu on my website with a submenu that shows only when parent item get hovered.
Here's my CSS :
.menu .liFirstLevel ul
{
position: relative;
background-image: url(/imgs/bg-submenu.jpg);
background-repeat: repeat;
}
.menu .liFirstLevel:hover ul {
display: block;
z-index: 5;
padding: 0px;
line-height: 30px;
}
Here's the problem : Lets supppose that i have a parent menu with a submenu that contains 3 options. Like this :
<ul class='menu'>
<li class='liFirstLevel'>
<ul class='submenu'>
<li>SubMenu1</li>
<li>SubMenu2</li>
<li>SubMenu3</li>
</ul>
</li>
</ul>
When i hover the ul.menu, the submenu always display, as supposed to. But when i try to select one of the subitem menu, it disapear as soon as the crusor is at the middle height of the first subitem... So in the exemple above, As soon as i reach the middle height of "Submenu1" my submenu disapear. Now here's the strange part : If i minimize chrome and then bring it back, the bug is gone...
My menu is 100% functionnal. So i'm pretty sure my CSS is ok...
Any ideas of what i can try ? I tried so many things.
I hope i'm clear, it's a bit complex to explain !
Thanks
Related
I am trying to create a drop-down menu for when the user hovers an item in another menu.
My current HTML:
<ul>
<li class="menu-main-items">Item1</li>
<ul id="submenu">
<li>Sub-item1</li>
<li>Sub-item2</li>
</ul>
</li>
<li class="menu-main-items">Item2</li>
</ul>
CSS:
.menu-main-items{display:inline;}
#submenu{display:none;}
li:hover #submenu{ //display the submenu below the parent main item }
To align the sub-menu with the parent item, I was thinking using position:relative; on #submenu and adding a certain offset, but that causes flickering, as the sub-menu is being displayed before item 2, rearranging the menu. As of now I have searched around and could only find explanation with one item in the main menu which doesn't cause the problem.
Is there another way to approach this?
You should make the li elements inline-block and change the positioning to absolute. The flickering is because the element is being shown and pushing the content out of the way as it is inserted into the flow. position: absolute removes it from the flow, getting rid of the flicker.
If you want to move the submenu relative to the parent, add position: relative to the parent and use top and left (bottom and right aren't really useful) to move it.
For more information, see this CSS-Tricks article.
.menu-main-items{
display:inline-block;
position: relative;
}
#submenu{
display:none;
position: absolute;
left: -10px;
}
li:hover #submenu{
display: block;
}
<ul>
<li class="menu-main-items">Item1
<ul id="submenu">
<li>Sub-item1</li>
<li>Sub-item2</li>
</ul>
</li>
<li class="menu-main-items">Item2</li>
</ul>
Li : position: relative;
Ul.submenu : position: absolute;
You can position the submenu relative to the li using:
Top, bottom, left, right.
Example
Li {position: relative}
Ul {position: absolute;top:25px;left:0;}
You can hide and show on hover
Ul {display: none;}
Li.mainmenu-items:hover > ul {display: block;}
The > in the css rule means it only targets the first element of the specified child under it. So this is the first level of ul,s inside of the current item hovered
I've got a menu that pops out of a list item. Something to this effect:
<li>
<ul class="topmenu">
<li class="submenu">
<a class="otherIT" href="#" title="Common IT Tasks"><img src="./images/ittasks.png" alt="Common IT Tasks" /></a>
<a class="otherIT" href="#" title="Common IT Tasks">Other - Common IT Tasks</a>
<p>Most common IT tasks.</p>
<ul class="subsubmenu">
<li>
Log a ticket
</li>
<li>
Map drives
</li>
<li>
Unlock a user
</li>
</ul>
</li>
</ul>
</li>
Immediately underneath this li item I have this:
<li class="break">
Back to top
</li>
When I don't hover over the li item it gives me this effect:
When I hover over this li item it gives me this effect:
Great the menu works, my issue is the gap between the word "Back to top" with the li item, it is fairly large. I believe it is due to the invisible li items of the list. For anyone interested, the CSS is something to this effect:
ul.topmenu, ul.topmenu ul {
display: block;
margin: 0;
padding: 0;
}
ul.topmenu li {
display: inline;
list-style: none;
margin: 0;
padding-right: 1.5em;
}
ul.topmenu li ul {
visibility: hidden; }
ul.topmenu li.submenu:hover ul {
visibility: visible;
}
Simple classic visibility is hidden unless you hover, however, the whitespace between the word "Back to top" with the list item is too large.
visibility: hidden only makes the element invisible, but does not remove it from the page flow.
display: none will hide the element and remove it from the page flow (so it won't take up any space or affect other elements in any way).
visibility : hidden only makes the element invisible, but does not remove it from the page flow. display: none will hide the element and remove it from the page flow (so it won't take up any space or affect other elements in any way)
ul.topmenu li ul
{
display: none;
}
ul.topmenu li.submenu:hover ul
{
display: block;
}
visibility:hidden do not show element, but still reserves space for it.
Try display:none
Use the CSS display: none rule instead of visibilty: hidden, because you want your tag to not be displayed at all, you don't want a blank space allocated in it's place (see). From the W3 docs:
Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves.
Also, what does the W3 validator say about your HTML?
I have a menu which has sub-menus and I have defined it as such:
<nav class='top'>
<li>Lanky</li>
<li>
Links
<nav class='sub'>
<li>dead beef</li>
<li>cafe feed</li>
</nav>
</li>
<li>Locks</li>
<li>Linger</li>
</nav>
I style it in such a way that the sub nav appears beside it's parent when on hover.
Problem is, I cannot click on those links. When I hover over the parent, the sub menu shows to the right and the Locks link displays beside the sub-menu (this is expexted). But once I mouseOut - say to try and click on dead beef, they disappear and the Lock link jumps back to its original position.
How do I make the sub menu persist to allow the mouse slide over to it?
To make your code compliant and accessible, you need to use the <ul> tags.
I suggest wrapping your <li> within the <ul> tags to fix your navigation errors - where you can also apply your class to the ul tag and there is no need for an additional div.
<ul class='top'>
<li>Lanky</li>
<li> Links
<li>
<ul class='sub'>
<li>dead beef</li>
<li>cafe feed</li>
</ul>
</li>
<li>Locks</li>
<li>Linger</li>
</ul>
Fixed this by addressing the list elements that had nav containers nested within. Many thanks to thirtydot for pointing me to jsFiddle - an amazing tool!
Here is the CSS...
nav { text-align: left; }
nav li { display: inline; text-align: center; }
nav a { display: inline-block; }
nav li { width: 95px; }
nav li nav { display: none; }
nav li:hover nav { display: inline; }
well i am not good with CSS menus.... i need TO MAKE THIS but was unable to align text to the bottom of listli
so it tried to do this with tables.. i was thinking Display Block is gonna solve my problems but turned out it didn't... you see in the jsFiddle example that i posted, when mouse is on the top areas of cell the link doesnot work which is true because there is no link there... can somebody please tell me how to convert it to CSS Menu
I would suggest making the menu with an unordered list instead of tables. Something like this:
HTML:
<ul id="my_menu">
<li>Name of Page 1</li>
<li>Name of Page 2</li>
<li>Name of Page 3</li>
<li>Name of Page 4</li>
</ul>
CSS:
ul#my_menu, ul#my_menu li {list-style: none;}
ul#my_menu li {display: block; float: left; width: 100px; height: 100px;}
ul#my_menu li a {display: block; text-decoration: none; color: #ccc; background: url('url_of_gradient') repeat-x; padding: 70px 10px 10px 10px; width: 80px; height: 20px;}
ul#my_menu li a:hover {background: url('url_of_hover_gradient') repeat-x;}
Try something like this, setting a gradient image (you'll have to make this) as the background on the links. Then create another image for the hover state. You'll also have to tweak the heights and widths to your liking.
This shouldn't require any javascript.
Here's a CSS menu generator that can get you started, I used it a while ago and it did fine for my project :)
Suckerfish dropwdown generator.
More:
My CSS Menu
Wonder Webware
Pure CSS Menu
The list goes on...
Hope it helps :)
I'm trying to create a menu, in which the last menu item (with different class) will stick automatically to the right corner of the menu. I'm attaching a screenshot for this. There are a few menu items on the left and the last item should somehow count the rest of the available space on the right in the menu div, add this space as padding to the right and display a background in whole area ON HOVER (see the screen to understand this please)
Is something like this possible?
Thanks a lot
See if this will work for you: http://jsfiddle.net/neSxe/2
It relies on the fact that non-floated elements get pushed out of the way of floated elements, so by simply not floating it the last element fill up the rest of the space.
HTML
<ul id="menu">
<li>Services</li>
<li>Doctors</li>
<li>Hospitals</li>
<li>Roasted Chicken</li>
<li class="last">Customer Service</li>
</ul>
CSS
#menu {
width: 600px;
}
#menu li {
float: left;
}
#menu li a {
display: block;
padding: 6px 14px 7px;
color: #fefefe;
background-color: #333;
float: left;
}
#menu li a:hover {
background-color: #666;
}
#menu li.last {
float: none;
}
#menu li.last a {
text-align: center;
float: none;
}
Edit
I've made some changes to make it work smoother on IE6, by floating the anchors too.
If anybody else needs this and do not need to support IE6 and below, you can get rid of those two properties.
assuming your html looks like this:
<div id="menu">
<div class="entry">Services</div>
...
<div class="entry last">Support Staff</div>
</div>
I would make the #menu position: relative;, so that you can position the last menu entry absolute inside the #menu div.
Not necessarily putting the menu item last, but if you always wanted that rounded corner at the end then you could apply a background image to the ul itself and position that right top with the curve. The only issue you'd run into with this method is, if you hover over the last menu it will not put a hover right to the right-hand edge.
If you knew how many menu items there were you could achieve this by setting the correct widths for all your menu items?
Have a look at this:
http://jsfiddle.net/ExLdQ/
The trick is to use your lighter green as the background or background-image for the whole list. You can than use the darker green on all li's and add a background-color:transparent to li.last.
Just add float: right; to your css for the last menu item, and use light background for both the list itself and the last menu item.