This is a mock up of a menu i have
HTML
Menu 1 (overflow:hidden)
<div class='menu'>
<ul>
<li>
Item 1
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
<li>submenu 4</li>
<li>submenu 5</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<br/><br/>
Menu 2 (overflow:hidden; overflow-y visible)
<div class='menu menu2'>
<ul>
<li>
Item 1
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
<li>submenu 4</li>
<li>submenu 5</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<br/><br/>
Menu 3 (overflow-x:hidden;)
<div class='menu3'>
<ul>
<li>
Item 1
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
<li>submenu 4</li>
<li>submenu 5</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<br/><br/>
Menu 4 (overflow:visible;)
<div class='menu menu4'>
<ul>
<li>
Item 1
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
<li>submenu 4</li>
<li>submenu 5</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
CSS
.menu {border:1px solid #000000; overflow:hidden;}
.menu ul {list-style:none; margin:5px 5px; padding:0; position:relative}
.menu li {display:inline-block}
.menu li::after {content: " | ";}
.menu ul ul {position:absolute}
.menu ul ul li {display:block;}
.menu2 {overflow-y:visible}
.menu4 {overflow:visible}
.menu3 {border:1px solid #FF0000;overflow-x:hidden}
.menu3 ul {list-style:none; margin:5px 5px; padding:0; position:relative}
.menu3 li {display:inline-block}
.menu3 li::after {content: " | ";}
.menu3 ul ul {position:absolute}
.menu3 ul ul li {display:block;}
Fiddle
Now the idea is that menu item 1 has a sub menu which is triggered to appear via javascript and the submenu is supposed to go outside the box. because this menu is supposed to be responsive i assume the overflow was set in the template for a reason and i want to avoid altering the template as much as i can.
Now as you can see with the code the submenu in Menu 1 is hidden in the box, when i go to override the overflow-y property in Menu 2 to be it's default value (which is the same as overflow's) it's still hidden and there's a scroll box.
now just in case if there was something weird in overflow is still set for the y axis i went and copied the menu class for Menu 3 but instead of doing overflow:hidden i just did overflow-x:hidden; but that still have be a scrollbar. Menu 4 shows how if overflow is set to visible (the default value) i have no scroll bar and my submenu goes out of the box as it should.
My question is why doesn't overflow-y:visible look the same as overflow:visible? to my understanding, overflow:visible is just overflow-x:visible; overflow-y:visible much like how border:1px solid #000000 is the same as setting all the border sides's width, style and color one by one
overflow-x and overflow-y are part of CSS3 (while plain overflow is CSS2), and are still somewhat experimental. The rules for what happens when one value is a "scrolling value" (which includes hidden) and the other is visible are complex, and frankly confusing.
From the CSS3 Overflow Spec:
... if one cascaded values [sic] is one of the scrolling values and the other is ‘visible’, then computed values are the cascaded values with ‘visible’ changed to ‘hidden’.
This seems to justify the behavior you're seeing, but I don't understand why it was designed that way.
overflow: visible;
does not clip content and can be shown out side of content box but for
overflow-y; visible;
content clipped against content box with overflow auto default
I made a revised fiddle but the main issue I found is that the style for .menu was applied to all four menus and that part of its definition was overflow: hiddden, so you were basically getting a conflict with Menu 2. Deleting overflow: hidden from .menu in the first line of your CSS makes both Menu 2 and Menu 4 have the same behavior as you were expecting.
Related
This question already has an answer here:
Select :last-child with especific class name (with only css)
(1 answer)
Closed 2 years ago.
Would like to access item 6 only through css
<div class="div-class">
<li class="li-class">Item 1</li>
<li class="li-class">Item 2</li>
<li class="li-class">Item 3</li>
</div>
<div class="div-class">
<li class="li-class">Item 4</li>
<li class="li-class">Item 5</li>
<li class="li-class">Item 6</li>
</div>
EDIT
I think that it is duplicate. Select :last-child with especific class name (with only css)
So you need which div you want to point. In this case, this is second div so we specified:
div:nth-child(2)
And then we just select last li as below:
li:last-child
So finaly we got:
div:nth-child(2) li:last-child{
background-color: red;
}
EDIT
With jQuery:
$('li').last().css('background', 'red');
Just to let you know, your html structure is incorrect as you should set li right after ul or ol
$('li').last().css('background', 'red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</div>
<div>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</div>
I set up a simple css based dropdown navigation.
The last category of the main navigation (named login) is supposed to look different from the rest, hence I simply applied a different style via last-of-type.
However the style now gets applied to the drop-down menus as well, meaning the last item of the dropdowns have said style applied also.
(Also, I cannot target them with nth-... selector since there will be new categories added / removed every once in a while.)
How would I stop this form happening?
<ul>
<li>item 1
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li> <-- unfortunately different style also...
</ul>
</li>
<li>item 2</li>
<li>item 3</li>
<li>login</li> <-- different stlye
</ul>
If you use a wrap for your unordered lis you can use something like this
<div class="test">
<ul>
<li>item 1
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li> <!-- unfortunately different style also...-->
</ul>
</li>
<li>item 2</li>
<li>item 3</li>
<li>login</li> <!-- different stlye -->
</ul>
</div>
So the CSS
.test > ul > li:last-of-type{color:red;}
set style only for the first ul after div.test and doesn't affect the other nested elements
Codepen
I've created this menu with css. But it wraps if the width of the window is smaller than then entire menu.
How do you stop it from wrapping to the next line?
see code.
http://jsfiddle.net/49RCL/1/
<nav>
<ul class="siteNav">
<li><img src="http://s7.postimg.org/m54vbq4kn/logo.png" width="166" height="60"</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li><form action=""><input type="color" name="favcolor" size="26" placeholder="Search"></form></li>
</ul>
</nav>
add
white-space: nowrap;
to your .siteNav
http://jsfiddle.net/URL4g/
how to float third child menu to left?
i want to float 3rd child menu to left like the main menu "item1"
html
<nav id="nav">
<ul>
<li>Item1
<ul>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1
<ul class"right-menu">
<li>Menu 2</li>
<li>Menu 2</li>
<li>Menu 2</li>
<li>Menu 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
You can target the 3rd child in CSS using the :nth-child syntax.
CSS
#nav ul li ul li:nth-child(3)
However if you want something that will be supported in all browsers I tend to use the adjacent sibling selector or "+".
In your example the css would be:
#nav ul li ul li + li + li {
float:left;
}
Although i would recommend using some classes so that you can reduce the huge number of selectors requires to do this.
Concider the following fiddle: http://jsfiddle.net/dts2T/
This has been bugging me for quite some time now. The Javascript in this fiddle should be redundant. But I've ripped my hair out googling this: How can I do the same using ONLY CSS?
The problem lies in the fact that any of the three columns could potentially contain more than one child. First I need to stretch each .column container to the height of the #bottom div. Then I need to stretch the height of the last element in each .column, so that it fills the remaining space of it's container. But HOW?
And before any of you suggests Faux columns or any other crappy solution to fake column stretching, thank you, but such solutions won't apply to this problem at all. The design I'm implementing suggests gradients on columns and rounded corners, which will make faux columns not applicable. It is the easiest thing in the world to stretch things horizontally, why can' it be equally easy to stretch them vertically?! Aargh!!
I would really appreciate any help from you brilliant guys out there. Any suggestion would be fine. I would even appreciate a good discussion on faking vertical stretching, if it is constructive.
Thank you.
This is a headbanging issue a lot of people run into at one time or another.
You can set the section to display: table; and columns to display: table-cell;. Even border radius and whatever fancy stuff works on it.
Here is a working demo: http://jsfiddle.net/MadLittleMods/QykYu/
Also here is the HTML and CSS:
CSS:
.container
{
display: table;
width: 100%;
border: 2px solid #000000;
}
.column
{
display: table-cell;
border: 1px solid #ff0000;
border-radius: 10px;
}
HTML:
<section class="container">
<div class="column">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div class="column">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div class="column">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
</ul>
</div>
</section>