I have a css driven dropdown menu, and in Chrome when I hover over the last option the whole thing jumps to the left slightly. I assume it's because the dropdown menu is adding to the overall width of the main list even though it's styled to float. Is there any way to fix this? (it's not doing it in firefox interestingly)
I've noticed by using webdeveloper to outline elements that the last li appears to get wider when it's hovered, but none of the others do.
the applicable sourcecode is here:
http://jsfiddle.net/WsAEW/
It worked for me changing this:
#menu ul li {
display: inline;
position: relative;
}
to this:
#menu ul li {
display: inline-block;
position: relative;
}
Here is a modified jsfiddle. I think the issue is fixed. Give it a try.
http://jsfiddle.net/WsAEW/5/
BTW, I only changed the following style. The 'float left' gets the elements to line up horizontally and the 'display: block' gets the top element to size to include the drop down menu.
#menu ul li {
float: left;
display: block;
position: relative;
}
Related
I'm trying to center the menu bar and make the menu bar fit the text.
Here is a website I'm trying to edit:
http://www.graffitisumperk.g6.cz/blog/
I've already figure out that I can center menu items this way:
.menu {
text-align:center
}
.menu li {
display:inline-block;
float:none;
margin-left: -5px;
}
.menu li li {
display:block;
text-align:left
}
But I can't seem to fit the menu bar to the width of the menu items.
I've calculated it should be 445px long, but when I change this:
#container {
margin: 0 auto;
max-width: 960px;
to 445px, the whole page it affected, not just the menu bar.
Any ideas how to fix it?
You can do it very very similarly :). One of the effects of display: inline-block; is that the element attempts to resize itself to contain its children. You could achieve this with float or position: absolute as well, but those do not really fit into this layout.
.main-nav { text-align: center; }
.menu { display: inline-block; }
I guessed you might want to center the menu, so I added the text-align too.
Tip: If you use the inspector of your browser (all modern browsers have a pretty decent one), you can easily figure out which element you need to change.
When I looked at your page, it looks like the part you really need to change is the "main-nav" class.
The #container div contains your whole page so you don't want to mess with that one.
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 */
}
Check out the gallery i'm building on a webkit browser..
notice that the words on the top right - available, sold, contact - which are part of a <ul>, are listed vertically.. even though on Firefox, they are listed horizontally because of ul {list-style-type: none;} and li {float: left;}.
Click "available", and notice that they neatly align horizontally. Use the back button or click "dubious" in the top-left corner and they stay in that neat horizontal alignment on the first page. Then refresh your browser, and it becomes vertical again.
.menu ul {
list-style-type: none;
margin: auto;
}
.menu li {
padding: 15px;
float: left;
margin-left: 2px;
margin-right: 2px;
font-size: 20pt;
}
The font in the menu titles used with font-face definition causes this.
A related topic: Accurate width of element when using font-face in Chromium
You may try "display:inline-block" for li's instead of "float: left;"
And why don't you use png images for menu titles?
You can check the problem here: http://jsfiddle.net/gkJAd/4/
I have an unordered list in where every li will have a max-height of 2.25em (I want it to be at most 2 lines). The list-type should show normally, on the outside, aligned on the first line. I tried a few things all with its on issues:
If I add the hidden, height, etc, codes to the li instead of the a, the disc disappears;
If I change the a to be display: block instead of display: inline-block, it shows correctly on Firefox but wrongly everywhere else;
If I change the a to be display: inline it puts the disc at the right place, but, since it is not longer a block, the height is ignored. Anyone got an solution?
Sol
All you need to do is add vertical-align: top to your ul li a selector code.
Updated JSFiddle. Working in FF, Chrome, and IE8/9.
I think this is what you want.
Basically, I floated and then cleared the lis.
Then I gave the ul li as a display:inline-block and a height and made sure to use vertical-align:top;
ul{
margin: 5px 10px 5px 20px;
background:green;
height:250px;
}
ul li{
list-style-type:disc;
float:left;
clear:both;
}
ul li a{
background:green;
line-height:1.25em;
overflow: hidden;
display:inline-block;
height:2.25em;
vertical-align:top;
}
Example: http://jsfiddle.net/jasongennaro/gkJAd/6/
Tested and works in Chrome and FF
I played with this a bit, but it basically comes down to that overflow: hidden will hide the list markers as well. Here's what I came up with: http://jsfiddle.net/N3JGg/
Basically used the display type of list-item, then instead of declaring the discs on the outside, pulled them into the box with inside so the overflow wouldn't hide them. It doesn't give you the same, nice line that you had before, but you've got the markers displaying now.
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;)