div inside li full width - html

I'm trying to put divs inside li. If the user klick on one li-tab, the div appears. The list elements are in horizontal position, and the div content should be placed under the whole list. At the moment, if the div appears, the standard content appears over the div.
.filter-list {
position: relative;
}
.filter {
display: inline-block;
padding-right: 40px;
}
.subnav {
position: absolute;
}
<ul class="filter-list">
<li class="filter">Name
<div id="subnav">onetwothree
</div>
</li>
<li class="filter">Name two</li>
<li class="filter">Name three</li>
</ul>

try this
<ul class="filter-list">
<li class="filter">Name
<div class=row>
<div id="subnav">onetwothree</div>
</div>
</li>
<li class="filter">Name two</li>
<li class="filter">Name three</li>
</ul>

Related

How to move elements in a bootstrap grid div

CSS:
border: 5px solid red;
}
#menu li{
font-size: 25px;
display:inline;
}
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-lg-2" id="menu">
<ul class ="Menuitems">
<li>The Hub</li>
<li>FAQ</li>
</ul>
</div>
I am attempting to move the text in the li tags to the centre of the div. I cannot figure out the CSS to do so and I don't wish to use "position relative" "top: 5px" because it is bad practise and will mess up the responsive design element of the project. Text align is also not possible as the div is not large when it is full screen, see code pen for information
https://codepen.io/mdot700/pen/bGEGwLa
Found this with bootstrap
Source : https://www.codeply.com/go/bp/6COUMfNrEU
<div class="d-flex">
<ul class="list-inline mx-auto justify-content-center">
<li class="list-block-item">Item 1</li>
<li class="list-block-item">Item 2</li>
<li class="list-block-item">Item 3</li>
<li class="list-block-item">Item 4</li>
<li class="list-block-item">Item 5</li>
</ul>
</div>

Nested list alignment issues

I have a dropdown menu (full-width) on my dropdown, I have a nested list and I want each column to have equal height and width. I tried to add a container inside each column and put display: table-cell; but it seemed my code isn't working at all. can ya'll help me with this?
<div class="column">
<div class="col-container">
<ul id="sub-list">
<li class="sub-list-item">
<a class="sub-list-title">창업 프로세스</a>
</li>
<li class="nested-child">
<ul class="sub-sub-list">
<li class="item"><a class="sub-sub-title">경진대회정보</a></li>
<li class="item"><a class="sub-sub-title">명예의 전당</a></li>
</ul>
</li>
<li class="sub-list-item">
<a class="sub-list-title">행사 네트워크</a>
</li>
</ul>
</div>
</div>
snippet from style.scss
.column{
float: left;
margin: 0;
display: table;
.col-container{
display: table-cell;
background: yellow;
padding: 21px;
}
}
I'll provide a photo of what the output should be like.
This is made using nested UL. how do we achieve this one?
You can change the flex-basis value to adjust the number of columns you want to dislplay, hope you have got the solution looking for.
Refer flexbox:
ul,
li {
margin: 0;
padding: 0;
}
.list-item-main {
display: flex;
flex-wrap: wrap;
}
.list-item-main>.list-item {
list-style: none;
flex-basis: 33%;
box-sizing: border-box;
padding: 15px;
}
.list-item-main>.list-item .nested-ul>li {
list-style: none;
box-sizing: border-box;
padding: 0 15px;
}
.list-item-main .list-item-head {
background: gold;
}
<div class="list-container">
<ul class="list-item-main">
<li class="list-item">
<a>Single List item</a>
</li>
<li class="list-item">
<ul class="nested-ul">
<li class="list-item-head">nested list 1 item</li>
<li class="list-item">nested list 1 item</li>
<li class="list-item">nested list 1 item</li>
<li class="list-item">nested list 1 item</li>
</ul>
</li>
<li class="list-item">
<ul class="nested-ul">
<li class="list-item-head">nested list 2 item</li>
<li class="list-item">nested list 2 item</li>
<li class="list-item">nested list 2 item</li>
<li class="list-item">nested list 2 item</li>
</ul>
</li>
<li class="list-item">
<ul class="nested-ul">
<li class="list-item-head">nested list 3 item</li>
<li class="list-item">nested list 3 item</li>
<li class="list-item">nested list 3 item</li>
<li class="list-item">nested list 3 item</li>
</ul>
</li>
<li class="list-item">
<ul class="nested-ul">
<li class="list-item-head">nested list 4 item</li>
<li class="list-item">nested list 4 item</li>
<li class="list-item">nested list 4 item</li>
<li class="list-item">nested list 4 item</li>
</ul>
</li>
</ul>
</div>

Nested UL - CSS Responsive menu anchor problem

I have this simple HTML
<ul>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
</ul>
And this simple CSS
<style>
.sub-items {
display: none;
}
.item:hover .sub-items {
display: block;
}
</style>
This works in desktop, however, in mobile, when you touch on the second or third parent you automatically open the child url. How could I avoid this without using javascript?
Thanks in advance
According to mobile device hover features work as click or active events so better approach is .item:active .sub-items { display: block;} can we use through media query
.sub-items {
display: none;
}
#media only screen and (max-width:1240px) {
.item:hover .sub-items {
display: block;
}
}
#media only screen and (max-width:480px) {
.item:active .sub-items {
display: block;
color:red
}
}
<ul>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
</ul>

Set background color for <li> but not its child

I would like to set one <li> of a HTML Lists with background colour.
There are some children inside, but I would like to keep the children without background color (transparent).
<ul>
<li style="background: #fb7171!important;">
<span>HEADING 1</span>
<ul>
<li style="background: transparent!important;">sub-heading A</li>
<li style="background: transparent!important;">sub-heading B</li>
</ul>
</li>
</ul>
How do I do so?
I posted my code on JSFiddle: https://jsfiddle.net/6zvwxva0/
Wrap each of the li contents (the text) in a span or a div.
Apply the background-color to these. In order to the sub-items have a different color, you need to override the parent.
/* First level */
ul li span {
display: block; /*this makes the span as wide as the li*/
background-color: #fb7171;
}
/* all children (multiple levels) */
ul ul li span {
display: block;
background-color: transparent;
}
<ul>
<li>
<span>HEADING 1</span>
<ul>
<li><span>sub-heading A</span></li>
<li><span>sub-heading B</span></li>
</ul>
</li>
<li>
<span>HEADING 1</span>
<ul>
<li><span>sub-heading A</span></li>
<li><span>sub-heading B</span></li>
</ul>
</li>
</ul>
You are going perfectly with your last fiddle code. https://jsfiddle.net/6zvwxva0/6/
you have to add only 'width:100%' in span tag.
<ul>
<li>
<span style="background: #fb7171; display:inline-block;width:100%">HEADING 1</span>
<ul>
<li>sub-heading A</li>
<li>sub-heading B</li>
</ul>
</li>
</ul>
I posted code here also. https://jsfiddle.net/0q541cj2/
This one will give exact result as you wanted.
<ul>
<li>
<span style="background: #fb7171!important;display:inline-block;width:100%;">HEADING 1</span>
<ul>
<li style="background: transparent!important;">sub-heading A</li>
<li style="background: transparent!important;">sub-heading B</li>
</ul>
</li>
</ul>
You can consider a pseudo element (on the li or the span) that will behave as a background and easily control its position with top/left/right/bottom:
li.back span {
position: relative;
}
li.back span:before {
content: "";
position: absolute;
top: 0;
bottom: -3px;
left: -30px;
right: -100%;
background: #fb7171;
z-index: -1;
}
<ul>
<li class="back">
<span>HEADING 1</span>
<ul>
<li>sub-heading A</li>
<li>sub-heading B</li>
</ul>
</li>
<li class="back">
<span>HEADING 2</span>
<ul>
<li>sub-heading A</li>
<li>sub-heading B</li>
</ul>
</li>
</ul>
there is two approach to fix your problem :
#1
you can just set the display:inline for the li like this
<ul>
<li style="background: #fb7171; display:inline;">
<span>HEADING 1</span>
<ul>
<li>sub-heading A</li>
<li>sub-heading B</li>
</ul>
</li>
</ul>
#2
or you can just set the background on span. the result would be the same
<ul>
<li>
<span style="background: #fb7171; display:inline-block;">HEADING 1</span>
<ul>
<li>sub-heading A</li>
<li>sub-heading B</li>
</ul>
</li>
</ul>
NOTE
in the first approach if you want to li be full with you can simply do this :
<ul>
<li>
<span style="background: #fb7171!important;display:inline-block;width:100%;">HEADING 1</span>
<ul>
<li style="background: transparent!important;">sub-heading A</li>
<li style="background: transparent!important;">sub-heading B</li>
</ul>
</li>
</ul>
remember that in this situation you should keep those background transparent properties on childrens.
You must apply background color to span element in order to get what you wanted. Also I encourage you to use external or internal css over inline css if possible. Here is an working example.
HTML
<ul class="item-has-bg">
<li >
<span>HEADING 1</span>
<ul>
<li>sub-heading A</li>
<li>sub-heading B</li>
</ul>
</li>
</ul>
CSS
.item-has-bg > li > span {
background-color: #fb7171;
display: block;
}

CSS Selector To Make Bootstrap Dropdown Menu Appear On Hover

I'm creating a menu using Bootstrap on Drupal, but I'm having trouble getting the dropdown to work on hover.
What's supposed to happen is when you hover over a main menu item, a dropdown menu will appear below it. The dropdown menu is functioning, as well as the main menu, but the dropdowns currently appear on screen at all times. I want to do this using CSS, but can't seem to find the right selector to make it visible/hidden when hovering on and off.
My HTML and CSS for this project are attached below. Thanks!
<div class="region region-header">
<div id="block-menu-block-2" class="block block-menu-block main-navigation">
<div class="content">
<div class="menu-block-wrapper menu-block-2 menu-name-main-menu parent-mlid-0 menu-level-1">
<ul class="menu"><li class="first expanded menu-mlid-650">Main Menu Item 1<ul class="menu"><li class="first last leaf menu-mlid-687">Dropdown Item 1</li>
</ul></li>
<li class="expanded menu-mlid-651 dropdown ">Main Menu Item 2<ul class="menu"><li class="first last leaf menu-mlid-668">Dropdown Item 2</li>
</ul></li>
<li class="expanded menu-mlid-653 dropdown">Main Menu Item 3<ul class="menu"><li class="first leaf has-children menu-mlid-656">Dropdown Item 3</li>
</ul></li>
<li class="last expanded menu-mlid-655 dropdown">Main Menu Item 4<ul class="menu"><li class="first last leaf menu-mlid-664">Dropdown Item 4</li>
</ul></li>
</ul></div>
</div>
</div>
<div id="block-menu-block-1" class="block block-menu-block collapse navbar-collapse mobile-nav">
<div class="content">
<div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
<ul class="menu"><li class="first collapsed menu-mlid-650">Main Menu Item 1</li>
<li class="collapsed menu-mlid-651 dropdown ">Main Menu Item 2</li>
<li class="collapsed menu-mlid-653 dropdown">Main Menu Item 3</li>
</ul></div>
</div>
</div>
</div>
CSS:
.dropdown-menu {
display: block;
border-radius: 0px;
display: block;
left: 0;
top: 100%;
float: left;
list-style: none;
background-clip: padding-box;
position: static;
width: 100%;
}
.mobile-nav ul.menu li ul.menu {
#extend .dropdown-menu;
.main-nav ul.menu li ul.menu {
#extend .dropdown-menu;
}
#media only screen and (min-width: 1000px;) {
.dropdown-menu {
width: auto;
display: block;
position: absolute;
width: auto;
padding-left: 10px;
padding-right: 10px;
}
}
The menu class is the parent for all menus to it should be
.menu ul {
display:none;
}
$(document).ready(function() {
$(".menu li a").hover(function() {
$(this).next().show();
}).mouseout(function() {
$(this).next().hide();
});
});
.menu ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="region region-header">
<div id="block-menu-block-2" class="block block-menu-block main-nav top-nav contextual-links-region">
<div class="content">
<div class="menu-block-wrapper menu-block-2 menu-name-main-menu parent-mlid-0 menu-level-1">
<ul class="menu">
<li class="first expanded active-trail menu-mlid-650">Main Menu Item 1
<ul class="menu">
<li class="first last leaf active-trail active menu-mlid-687">Main Menu Item 2
</li>
</ul>
</li>
<li class="expanded menu-mlid-651 dropdown ">Main Menu Item 3
<ul class="menu">
<li class="first last leaf menu-mlid-668">Item 3 Dropdown Item
</li>
</ul>
</li>
<li class="leaf menu-mlid-652">Main Menu Item 4
</li>
<li class="leaf menu-mlid-654">Main Menu Item 5
</li>
<li class="expanded menu-mlid-653 dropdown">Main Menu Item 6
<ul class="menu">
<li class="first leaf has-children menu-mlid-656">Item 6 Dropdown Page
</li>
<li class="last leaf menu-mlid-659">Item 6 Dropdown Page 2
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="block-menu-block-1" class="block block-menu-block collapse navbar-collapse mobile-nav contextual-links-region">
<div class="content">
<div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid- 0 menu-level-1">
</ul>
</div>
</div>
</div>
</div>
Here is a simple :hover based dropdown menu, using just CSS - no scripting needed:
ul {
margin: 0;
padding: 0;
}
li {
position: relative;
display: block;
width: 120px;
height: 24px;
line-height: 24px;
padding: 6px;
list-style-type: none;
background-color: rgb(127, 127, 127);
cursor: pointer;
}
li ul {
position: absolute;
display: none;
}
li:hover {
background-color: rgb(163, 163, 163);
}
li:hover ul {
position: relative;
display: block;
top: -12px;
left: 114px;
z-index: 6;
}
li li {
background-color: rgb(191, 191, 191);
}
<ul>
<li>Menu Item 1
<ul>
<li>Submenu Item 1</li>
<li>Submenu Item 2</li>
<li>Submenu Item 3</li>
</ul>
</li>
<li>Menu Item 2
<ul>
<li>Submenu Item 1</li>
<li>Submenu Item 2</li>
<li>Submenu Item 3</li>
</ul>
</li>
<li>Menu Item 3
<ul>
<li>Submenu Item 1</li>
<li>Submenu Item 2</li>
<li>Submenu Item 3</li>
</ul>
</li>
</ul>