I have a fixed sidebar, with overflow-x:hidden so I get a scrollbar to scroll. But now I want to add a submenu, that when shown will overflow into the main window.
This works fine if I set overflow:visible but then I lose the scrolling ability.
Can I get them both together?
http://codepen.io/anon/pen/OPzvdP
#sidebar-wrapper {
width: 200px;
background-color: #396DA5;
position: fixed;
height: 100%;
overflow-x: hidden;
}
#menu ul ul {
display: none;
list-style: none;
}
#menu ul ul {
position: relative;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul ul {
padding: 50px;
position: absolute;
left: 80%;
top: 0;
background: #f00;
}
<div id="sidebar-wrapper">
<div id=menu>
<ul>
<li>Item Hover
<ul>
<li>subitem<li>
</ul>
</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</div>
</div>
The top li item has a hover, that can be fully see when the overflow-x:hidden is removed from the top css line, but then the side bar cant be scrolled!
EDIT - Answers have said use position:fixed and this works. But can this be applied to any of the list items so the submenu opens beside the parent?
No need to add overflow-y.
Your class should be
#menu ul li:hover > ul {
display: block;
position: fixed;
top: 8px;
left: 150px;
}
DEMO
Try
overflow-y: scroll
and set your hover box to position fixed:
#menu ul ul { padding:50px; position: fixed; left: 200px; top:0; background:#f00;}
You will need to adjust the position.
Not a very pretty solution though.
Related
So I'm trying to make a box/div with a max-height that contains 2 vertical scrollable lists of items that adjusts their heights depending on the amount of the items while still fitting in the parents' max-height. Example. And if both of them have overflowing items I want both lists to have 50% height. Example 2. Sorry if this sounds a little cryptic and hard to understand, having a hard time trying to describe it.
This is what I currently have.
HTML:
<div class="list-box">
<div class="list-1">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="list-2">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
SASS:
.list-box {
display: flex;
flex-direction: column;
max-height: calc(100vh - 15rem);
.list-1,
.list-2 {
height: auto;
overflow-y: auto;
}
}
Hope this will fix your issue.
HTML
<div class="parent-wrap">
<div class="child-wrap"></div>
<div class="child-wrap"></div>
<div>
CSS
.parent-wrap {
height: 100%;
border: 1px solid;
height:600px;
padding: 3px;
display: flex;
flex-direction: column;
}
.child-wrap {
border: 1px solid red;
overflow: auto;
}
.child-wrap:nth-child(1) {
max-height: 50%;
}
.child-wrap:nth-child(2) {
flex: 1;
}
I think you haven't need to flex.
/*CSS:*/
* {
box-sizing: border-box;
}
.list-box {
height: 500px;
border: solid green;
}
.list-1,
.list-2 {
overflow: auto;
max-height: 50%;
}
.list-1 {
border: solid red;
}
.list-2 {
border: solid blue;
}
<!-- HTML -->
<div class="list-box">
<div class="list-1">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="list-2">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
I have elements that are floating left and have the width of 33.33333% I am struggling to get these elements to center on the page, I still want the text inside the elements to text-align: left, but I have no idea how to center these items on the page:
ul.home-product-list {}
.home-product-list li {
float: left;
width: 33.33333%;
}
<ul class="home-product-list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
Screenshot
What do I do?
Try applying margin: 0 auto; to items that you wanna centre them.
ul.home-product-list {
width: 100%;
}
.home-product-list li {
width: 33.33333%;
margin: 0 auto;
}
<ul class="home-product-list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<div class="container__list">
<ul class="home-product-list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
.container__list {
margin: 0 auto;
max-width: 960px;
}
ul.home-product-list {}
.home-product-list li {
float: left;
width: 33.33333%;
}
Hope this helps, if you are trying to center everything inside the row. Max-width could vary, I just added a random number, so you can add your custom width.
Try following code
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100%;
display: inline-block;
text-align: center;
}
ul.home-product-list {
display: inline-block;
width: 100%;
/* margin: 0px auto; */
list-style-type: none;
padding-left: 0px;
}
li {
float: left;
width: 33%;
}
</style>
</head>
<body>
<div>
<ul class="home-product-list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
</body>
</html>
I'm trying to add a top margin to every li element in a ul element that has the css property column-count: 2 set. For some reason, the margin works for every li element except the first element in the second column:
ul {
column-count: 2;
padding: 0;
border: 1px solid black;
}
li {
margin-top: 10px;
}
li:nth-child(1) {
background-color: red;
}
li:nth-child(5) {
background-color: blue;
}
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
What about just using margin-bottom instead? Also apply 10px padding to your ul in order to achieve the same.
ul {
column-count: 2;
padding: 10px 0 0 0;
border: 1px solid black;
}
li {
margin-bottom: 10px;
}
li:nth-child(1) {
background-color: red;
}
li:nth-child(5) {
background-color: blue;
}
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
You could set the display property of the list items to inline-block and the width to 100% to remedy this
ul {
column-count: 2;
padding: 0;
border: 1px solid black;
}
li {
margin-top: 10px;
display: inline-block;
width: 100%;
}
li:nth-child(1) {
background-color: red;
}
li:nth-child(5) {
background-color: blue;
}
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
The suggestion #Troels gave is a good option. You can look into padding as an option too:
li {
padding-bottom: 10px;
}
I know the general rule of thumb is research before asking questions, and I'm looking at a lot if different sources. Not to much luck here.
My end goal is to have the text centered and at the bottom of the div. Simple as that.
But when I use the code given by other sources, it's not centered in the actual div.
HTML:
<div class="fbox" id="breast">
<span class="title">Breast Procedures</span>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<span class="read">View Descriptions</span>
</div>
<div class="fbox" id="facial">
<span class="title">Facial Procedures</span>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<span class="read">View Descriptions</span>
</div>
<div class="fbox" id="body">
<span class="title">Body Procedures</span>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<span class="read">View Descriptions</span>
</div>
<div class="fbox" id="surgery">
<span class="title">Non-Surgical Procedures</span>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<span class="read">View Descriptions</span>
</div>
CSS:
.title{
font-size:16px;
margin:0 auto;
text-align:center;
font-weight:600;
}
.fbox{
width: 250px;
height: 300px;
background: rgb(250, 250, 250);
-moz-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
display:inline-block;
vertical-align:top;
text-align:center;
margin:0 auto;
position:relative;
}
.main-content ul li{
list-style-type:none;
}
.main-content ul{
margin:0 auto;
}
.read{
height:40px;
width:250px;
position:absolute;
bottom:0;
}
JSFiddle
All help is appreciated!
You were so close!
SOLUTION:
Replace:
.read {
height: 40px;
width: 250px;
position: absolute;
bottom: 0;
}
With:
.read {
height: 40px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
CODE SNIPPET:
.title {
font-size: 16px;
margin: 0 auto;
text-align: center;
font-weight: 600;
}
.fbox {
width: 250px;
height: 300px;
background: rgb(250, 250, 250);
-moz-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
display: inline-block;
vertical-align: top;
text-align: center;
margin: 0 auto;
position: relative;
}
.main-content ul li {
list-style-type: none;
}
.main-content ul {
margin: 0 auto;
}
.read {
height: 40px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
<div class="fbox" id="breast">
<span class="title">Breast Procedures</span>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<span class="read">View Descriptions</span>
</div>
<div class="fbox" id="facial">
<span class="title">Facial Procedures</span>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<span class="read">View Descriptions</span>
</div>
<div class="fbox" id="body">
<span class="title">Body Procedures</span>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<span class="read">View Descriptions</span>
</div>
<div class="fbox" id="surgery">
<span class="title">Non-Surgical Procedures</span>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<span class="read">View Descriptions</span>
</div>
JSFiddle
<ul class="categories">
<li><a href="#" >All categories</a>
<ul class="sub-menu"></br>
<li>item </li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item </li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item </li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
CSS:
.sub-menu {
display: none;
}
.categories li:hover .sub-menu {
display:block;
}
I'm trying here to make a mega menu.
in this case which tag should I Select in CSS and which CSS rules should I imply so the items will appear in columns (mega menu).
thanks a lot
You can use columns
.sub-menu {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3; /* Edge, IE10+ */
list-style-type: none;
margin: 5px 0;
}
.sub-menu li {
border: 1px solid black;
margin: 5px;
padding: 5px;
}
.sub-menu li:first-child {
margin-top: 0;
}
<ul class="categories">
<li><a href="#" >All categories</a>
<ul class="sub-menu">
<li>item </li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item </li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item </li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
Fiddle with display: block on hover Fiddle