I've got a dropdown list beneath a parent <li>. When hovering over the parent <li> the children appear as expected, but the parent <ul> also drops down, which is not expected behavior. I can't figure out why. Here's a codepen demonstrating the issue.
When you drop down the interior list it stretches the outer list item, which in turn makes the entire top-level menu that height. Your top-level list items then drop to the bottom of that element. You can keep them all at the top with this:
ul.navigation li {
...
vertical-align: top;
}
It's worth mentioning that all that behavior could be accomplished with CSS alone. Here's a start:
ul.navigation li ul {
max-height: 0;
opacity: 0;
transition: all .5s;
}
ul.navigation li:hover ul {
max-height: 200px;
opacity: 1;
}
Demo
Try adding: vertical-align: top; o the css of the elements that are dropping down.
Related
My problem is that Firefox is adding 2px to the height of the anchors in my nav. I'm controlling the height by adding padding to the anchors that are nested inside a list.
It's throwing my nav height off and things aren't lining up.
When I inspect the elements, the heights are:
FF: 20px
IE: 18.4px
Chrome: 18px
How do I make sure the heights are the same? I'm adding padding to the anchors so that the whole button is clickable instead of just of the words. Any ideas?
ul, li{
padding: 0;
}
li{
width: 33%;
text-align: center;
display: inline-block;
}
a{
text-decoration: none;
padding: 15px 0;
background-color: bisque;
display: block;
}
a:hover {
background-color: #bbb;
}
<ul>
<li>Link 1</li><li>Link 2</li><li>Link 3</li>
</ul>
Not sure why it's giving a different height, but to fix it I specified the height of the li and it seems to work. Wish I knew why it has a different height in the first place though.
I have two scroll bars and I've set a border radius for it with
::-webkit-scrollbar {
width: 17px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
border-radius: 10px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
I have assigned the Div's each unique ID's and a class for both: #Scroll1 & #Scroll2 & .Overflow
My issue is that the overflow is for scrolling through my table of data but both tables are in one big div and I wanted to match the border radius's to the main div.
here is an example:
I will position it better later but what I want is the bottom scroll bar to abandon its
border-top-right-radius and the top scroll bar to drop the border-bottom-right-radius
Any help will be kindly appreciated.
here should be a friendly JSfiddle with the same issue:
http://jsfiddle.net/z98Kq/
If the top scrollbar has the id #Scroll1 and the bottom #Scroll2, simply use:
#Scroll1{
border-bottom-right-radius:0;
}
#Scroll2{
border-top-right-radius:0;
}
If the bars dont have id attributes like this- you can use nth-of-type or nth-child (or their first- and last- derivations) to target the first (top) and last (bottom) scrollbars.
Given your fiddle provided HERE, you should use:
#canceltable::-webkit-scrollbar-thumb,#canceltable::-webkit-scrollbar-track{
border-bottom-right-radius:0;
}
#Deletetable::-webkit-scrollbar-thumb,#Deletetable::-webkit-scrollbar-track{
border-top-right-radius:0;
}
Demo
I have a header strip with a shadow effect and contains navigation links; when you hover over them, a sub-menu appears.
See test page here
How can I make the sub-menu appear on a layer BEHIND the header strip? I need the header's box shadow to cast on top of the sub-menu.
Currently the sub-menu ( .main-navigation li ul ) has a z-index lower than the header strip ( .site-header ) but this is having no effect. I've tried giving it a negative z-index but this puts it behind the content (therefore hidden) and the links no longer work - I've read this is a common problem so I'd like to avoid using a negative z-index.
Hope you can help.
Z-index might not be the solution in this case, due to the stacking context of elements. Without re-ordering your html, you might try this trick using box-shadow on a pseudo-element attached to your sub-menu. For example:
.main-navigation li ul { display: none; position: absolute; top: 100%; margin: 0; overflow: hidden; }
.main-navigation li ul:before { content: ""; display: block; width: 160%; height: 10px; margin-left: -30%; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); }
Check this DEMO. Note that this is only one possible solution, as there are likely other ways to achieve the same effect.
The text content should already naturally appear behind the shadow of the header since it is an adjacent sibling element, ordered after the header in the html. (I added a background image to the content div in the demo to show this.)
can anyone tell me what I have done wrong in creating this vertical CSS dropdown menu. The sub-level "hides" under the CSS quote element underneath. The CSS menu has been sought and uses styled lists.
Would this be a Z index issue or positional issue or am I just a doughnut?
Here is the code link on Pastebin : http://pastebin.com/CBuT532G
(I can never copy my code into the code option here, which doesn't bode well!)
Gutted I can't show a screen grab!
Cheers
just add z-index 1 in your dropdown-menu css
ul.dropdown-menu {
border-radius: 10px 10px 10px 10px;
display: table;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
z-index: 1;
}
Make instead of <ul class="dropdown-menu"> to <ul class="dropdown-menu" style="z-index: 999;">
Works for sure! :)
I have created a custom drop-down element, which is listed on this page:
http://jsfiddle.net/spryno724/2snUH/3/
Click on the drop-down menu in the "Result" secion, and you will see the problem. By rolling over the choices in the expanded drop-down list, you notice the roll-over indicators don't stretch to the available width.
While still maintaining the width of the menu when it was collapsed, how can I stretch the background color of each menu item? I'd also like each of the menu items to remain on their own line. A couple of adjustments that I made the CSS caused some of the list items to wrap their own text.
Thank you for your time.
Use negative margins with width: auto instead of width: 100% for items:
UL.dropdown.open LI {
margin: 0 -23px 0 -10px;
padding-right: 23px;
padding-left: 10px;
position: relative;
width: auto;
}
See http://jsfiddle.net/2snUH/4/ .
Or get rid of horizontal padding for UL (and specify horizontal padding for LI instead), and then you will not need negative margins for LI items.
To fix the width of the li elements use:
ul.dropdown.open {
padding: 5px 0;
}
ul.dropdown.open li {
display: block;
padding: 5px;
text-wrap: none;
width: 100%;
box-sizing: border-box;
}