Somehow my drop down menu isn't going down but is going to the top: http://fawky.de/fawky/powerbikes/index.html This is my full CSS, is something blocking it from going down?
Using top:50px; didn't work either.
http://pastebin.com/YqifT4JW
Thanks.
First of all remove position:absolute from .topmenu li. Then you should use visibility: hidden; instead of display: none; to hide the submenus. This way the submenu is hidden but the space for it is reserved (more info)
remove position:absolute from .topmenu li
Related
I can't find a way to make my header dropdown to be positioned the way I want it to. First off, the dropdown is horizontal, while it is supposed to stack up under each other. Second, the dropdown is not vertically aligned with the parent link, so I want it to be directly under its parent link and not a few pixels to the right of it. Using the left: __% only worked on one while totally pulling off track the other dropdown of a different parent, so it wasn't relative to the position of the parent of the dropdown.
Here is the jsfiddle: https://jsfiddle.net/u6v44hdw/
I'm having trouble and I think I'm supposed to add the code here somewhere:
li ul {
display: none;
position: absolute;
top: 15%;
padding-left: 1px;
}
Thanks!
Your missing the class="sub" in <ul> sub menu.
Edit:
Here is he full example of what you want: https://jsfiddle.net/u6v44hdw/2/
Edit2: I think you don't need that z-index.
As can be demonstrated in this fiddle, adding too many elements in a Bootstrap .nav causes it to just add items vertically down. How would I go about limiting its height and making it horizontally scrollable?
First you need to tell the ul to not wrap and overflow into a scroll bar. Then the li elements need to not be floated and display inline. This will do it:
ul.nav {
white-space: nowrap;
overflow-x: auto;
}
ul.nav li {
display: inline-block;
float: none;
}
Fiddle: http://jsfiddle.net/bmfcd3zt/8/
Try this:
.nav{flex-wrap:nowrap;overflow-x:auto}
First, here is a fiddle that I've found on a scrolling implementation of tabs.
Second, I don't think that it's a good UX to provide so many links in a tabbar. I recommend you to use dropdown menus or mega menu.
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.
I designed a vertical menu using CSS, li and ul tags. It works fine, but just for many hints. After some time, hover effect works just for the last item.
Please look at my project here: http://www.saberi.ws/test/
Please move your mouse on the menu in the left side (Products, Countries, ...) to see this in action.
You can see related CSS file here.
Your #ticker is lying in front of your navigation. Add z-index: 0 to your #ticker and add position: relative; z-index: 1 to your #container_left_menu.
This will move your navigation over your ticker. The position: relative is neccessary, because z-index does only work with position:absolute, position:relative, or position:fixed.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
My solution is much simpler, to my mind. Simply add overflow: hidden; to your #news.
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.