I have a problem with my dropdown or submenu. It worked perfectly fine before, but after I changed my menu to be floating, the submenu won't show anymore.
this is the code I used for menu:
border-bottom:2px solid #e9e9e9;
position:fixed;
width:2000px;
background-color:#ffffff;
padding-left:605px;
padding-right:210px;
margin-right:-200px;
And this is my website
http://lobaab.com/
could you help me on how to fix this plz
Nested ULs are hidden by display: none in the default state, and you never change this property to block.
.sf-menu li:hover > ul {
display: block !important; /* importnat isn't necessary if you know how strong selector you need to use */
}
Than, you set width: 100% for submenu, but it´s width of their parent (LI). You want probably set higher width, or don´t set the width exactly and use only white-space: nowrap - submenu will have the width of the longest item.
Related
I started a new job this week and one of my duties will be fixing/updating the website.
Our front page has six floated elements with mouse behaviors wrapped in a UL. In Firefox and IE, it appears just fine.
In Chrome, the last li element is lower than the others by about 20 or so pixels (I tried removing the style that was on the "last" element which changed the top margin (-18), but it didn't change anything).
The site is at rlba.com. If anyone has any suggestions, I'd appreciate it.
To answer your question...
Set #flashContainer2 ul, line 274 in your styles.css file, to have a width of 942px and a display of block. This will correct the behavior you are experiencing.
But please listen to j08691 and alireza safian in your comments and fix your question so that other people can learn from this.
There is no reason for your ul to be display:inline, especially if you have a defined height, so remove your display attribute and let it be the default (display:block;).
Then remove the default browser padding on the ul to have it be flush with the left side of your site's content container.
#flashContainer2 ul {
width: 940px;
height: 420px;
/* display: inline; - remove this */
padding: 0; /* add this */
}
And lastly, your li tags in the ul are 155px wide with padding-right of 2px (so the li is effectively 157px) but the ul is 940px wide. 157x6 = 942px. So you could either remove the width on "#flashContainer2 ul" so it grows to the container and becomes 942px wide, or remove the 2px padding from the last element so all of the li's fit in the ul.
#flashContainer2 .lastInList {
padding-right: 0; /* add this */
}
I'm confused about why my paragraph doesn't begin in a new line based on the overflow property of the previous element.
Check out my plunker, change the overflow property in line 11 to hidden and it will work fine. On visibile, it screws up the view.
I know doing a clearfix can fix this issue, but what I'm interested in is why overflow is doing this to my view;
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
overflow: visible; /* Change this to visible/hidden*/
}
The problem is that because your ul has float: left; the text element goes by default on its right. So when you add the overflow: hidden; property it clears the area around the list.
There is also a great read for floating elements.
Let me clear you something overflow:hidden make the UL clear because it is shorter form of :after{clear:both;content:"";display:block;}
but in overflow:hidden it clears it self and take it's height but nothing will be shown outside of this.
In this example you have floating elements and the parents UL is not taking its width and height that is why paragraph goes beside to it. when you add overflow:hidden then UL takes its height and width because it is shorter form of has layout property :after{clear:both;content:"";display:block;}
Hope so you will be cleared by this
Thanks
It is due to the property of float left in anchor. Remove overflow property from ul, it will work excellent.
Add the following properties in css to:
ul{ font-size:0px;}
ul li{ vertical-align:top; display:inline-block;}
ul li a{ font-size:16px; float:none;}
I have this CSS menu:
http://jsfiddle.net/7JC8t/
If you hover your mouse over 'inostranstvo' you will see a dropdown open below it. What I've been trying to do but failing is to get the dropdown items to look like the items in the horizontal menu.
So when a user hovers over 'inostranstvo' the items that show up should have: the same width (width of the widest item), same height and background as the existing menu items.
The background is easy, but I can't force the height and I don't know how to align the widths. This doesn't do anything:
#nav li:hover ul li{
height:55px;
line-height:55px;
width:200px;
}
The width value is random, what's most important is the height, which I can't seem to force on the list items. On the other hand, adding a border works, but it adds it inside the red background area. I'm sure this can't be complicated, but I can't figure it out.
Have you tried to set the submenu li elements to "display-type: block"?
I have added the following css to JSFiddle and it seems to work:
#nav li:hover ul li {
display: block;
background: #DE2211;
border-bottom: 1px solid black;
}
http://jsfiddle.net/FS4zT/
If you visit the above link you see what am describing below.
Summary: I have set the z-index of the submenu to 99 and the z-index top level menu to 9..
So basically i was thinking when i move the mouse over to the 1st menu, the 1st submenu will stay in focus when i move the mouse over the items of the submenu.
But for some reason in Firefox 11.0 it switches over to the 2nd Top Level Menu when i try to move my mouse over the 2nd/3rd/4th items of the first sub menu.
In IE 7 : It works as desired by i can still see the border of the 2nd Top Level Menu overlapping the items of the sub-menu even tho their z-index is higher. The border problem can be even seen in firefox.
Can someone shed some light where i might be going wrong?
This should fix it, I hope.
#menu li ul li {
position: relative;
}
Beware of the stacking context of the z-index. What you want is not working for parent-child z-indices.
The problem is that the parent li of the submenu is not as wide as the submenu (4x times smaller). So if you hover to the right, the li loses focus.
One way to solve this, is setting z-index: 0 on al ul submenus and z-index: 1 on the current submenu. The submenu's should have position: absolute.
Update: Solution with position: relative (accepted answer) is really a good one. This is working because the lis of the submenu do not make the parent container larger since they are left floated.
You must change the height in #menu li
#menu li {
width: 140px;
height: 25px;
float: left;
border-right: 1px inset white;
z-index: 9;
}
The other way you can go to keep your borders at 50px is when you add to the CSS something like this.
#menu li:hover ~ li{
height:25px;
}
I have dropdown menu and its made via a list and position absolute, however the dropdown links are very very very small area and do not cover the text completely.
How can I fix this?
Example http://outreviews.com/v%202/index.html (the dropdown menus)
Remove the padding from the sub menu's UL and LI and give the A element "display:block" This will make the A element take up the entire width of the menu.
You can fiddle with the padding to get it the way you want it.
If you add:
ul li a {
display: inline-block;
width: 100%;
height: 100%;
}
It should work okay, and since even IE allows display: inline-block; on natively in-line elements it should be relatively cross-browser friendly (certainly under a valid doctype).
It's worth remembering that padding on the parent li will also reduce the possible width of the child a element, and the display: inline on the same parent li is also likely to cause you a little trouble (since display: block; on the a would be so much simpler).
Edited to note that #Chris Bentley correctly noted the points in my final paragraph (above the hr) just prior to my answer.
make the following changes:
in #headermenu li change the padding:20px; to padding :0 20px;
add delete the top:55px; from #headermenu li ul
What you can do is make the li elements display:list-item and the a elements display:block. That's what's being done on the site you're linking to.