sub menu have same width as top menu - css

I've the following menu struckture, but I can't make the last part act as I want.
When you hover over a menu item it shows the children, that part is fine. But when i hover, i would like the "blue" menu to have the same width as the entire red, and the blue text show me fixed to start from the left.'
Can anyone help me going, been trying to create this for an hour now.
thanks
ul.nav {
list-style: none;
}
ul.nav>li {
float: left;
}
ul.nav>li>a {
color: white;
padding:20px;
background-color: red;
}
ul.nav>li>ul {
list-style: none;
display: none;
background-color: blue;
margin-top: 20px;
}
ul.nav>li>ul>li>{
display:block;
}
ul.nav>li>ul>li>a {
color: white;
}
ul.nav>li>a:hover~ul {
display: block
}
<ul class="nav">
<li>
Menu 1.0
<ul>
<li>
Menu 1.1
</li>
<li>
Menu 1.2
</li>
<li>
Menu 1.3
</li>
</ul>
</li>
<li>
Menu 2.0
<ul>
<li>
Menu 2.1
</li>
<li>
Menu 2.2
</li>
<li>
Menu 2.3
</li>
</ul>
</li>
<li>
Menu 3.0
<ul>
<li>
Menu 3.1
</li>
<li>
Menu 3.2
</li>
<li>
Menu 3.3
</li>
</ul>
</li>
</ul>


Please try this. I have given position:relative to ul.nav and position:absolute; to ul.nav > li > ul submenu. and I have added html tag <div class="clear"></div> to clear div beacause ul have float:left property. and also add some other css please check in code.
ul.nav {
float: left;
list-style: none;
padding: 0;
position: relative;
}
ul.nav>li {
float: left;
}
ul.nav>li>a {
color: white;
padding:20px;
background-color: red;
display: block;
}
ul.nav > li > ul {
background-color: blue;
display: none;
left: 0;
list-style:none;
padding: 0;
position: absolute;
right: 0;
top: 100%;
width: 100%;
}
ul.nav>li>ul>li>{
display:block;
}
ul.nav>li>ul>li>a {
color: white;
}
ul.nav>li>a:hover~ul {
display: block
}
.clear{
clear:both;
}
<ul class="nav">
<li>
Menu 1.0
<ul>
<li>
Menu 1.1
</li>
<li>
Menu 1.2
</li>
<li>
Menu 1.3
</li>
</ul>
</li>
<li>
Menu 2.0
<ul>
<li>
Menu 2.1
</li>
<li>
Menu 2.2
</li>
<li>
Menu 2.3
</li>
</ul>
</li>
<li>
Menu 3.0
<ul>
<li>
Menu 3.1
</li>
<li>
Menu 3.2
</li>
<li>
Menu 3.3
</li>
</ul>
</li>
</ul>
<div class="clear"></div>


I think this is what you are looking for, i removed the padding in the submeny ul and added padding to a
ul.nav {
list-style: none;
display: inline-block;
padding: 0;
background: #00f;
}
ul.nav>li {
float: left;
}
ul.nav>li>a {
color: white;
padding:20px;
background-color: red;
}
ul.nav>li>ul {
list-style: none;
display: none;
background-color: blue;
margin-top: 20px;
}
ul.nav>li>ul>li>{
display:block;
}
ul.nav>li>ul>li>a {
color: white;
padding: 20px;
display: inline-block;
}
ul.nav>li:hover ul {
display: block;
padding: 0;
}
<ul class="nav">
<li>
Menu 1.0
<ul>
<li>
Menu 1.1
</li>
<li>
Menu 1.2
</li>
<li>
Menu 1.3
</li>
</ul>
</li>
<li>
Menu 2.0
<ul>
<li>
Menu 2.1
</li>
<li>
Menu 2.2
</li>
<li>
Menu 2.3
</li>
</ul>
</li>
<li>
Menu 3.0
<ul>
<li>
Menu 3.1
</li>
<li>
Menu 3.2
</li>
<li>
Menu 3.3
</li>
</ul>
</li>
</ul>

Related

spacing in a list with css styling

Ive created a box using div class. but Ive been trying to space the row and columnsiV
Ive tried some padding-left and right both it doesnt seem to be working.
<div class="body">
<ul class="box">
<li> Maths </li>
<li> English </li>
<li> Chemistry </li>
<li> Commerce </li>
<li> Computer </li>
<li> Biology </li>
</ul>
</div>
</section>

Is there a reason you aren't just using margin? Specifically,
li {
margin: 10px;
margin-left: 30px; // if you want a different margin on the left
}
If this is not what you're looking for then please elaborate on your question.
li {
margin:10px;
margin-left:30px;
}
<div class="body">
<ul class="box">
<li> Maths </li>
<li> English </li>
<li> Chemistry </li>
<li> Commerce </li>
<li> Computer </li>
<li> Biology </li>
</ul>
</div>

To add padding between the rows, you need to add it to list elements.
Target these by using ".box li" in your CSS

You can use this code
.body .box {
margin: 0;
padding: 0;
}
.body .box li {
margin: 0;
padding: 0;
list-style-type: none;
}
.body .box li a {
margin: 0;
padding: 0 15px;
font-size: 18px;
font-weight: 400;
color: #337ab7;
line-height: 36px;
text-decoration: none;
}
.body .box li:hover a {
color: red;
}
<div class="body">
<ul class="box">
<li>Maths</li>
<li>English</li>
<li>Chemistry</li>
<li> Commerce </li>
<li>Computer</li>
<li>Biology</li>
</ul>
</div>

angular dynamic menu and submenu styling

guys i have dynamic navbar . submenu will be availbe if menu have submenu. i want open submenu under related menu which is hovered and want keep submenu visible to select their item.
with this code submenu will show always at that css style position and menu will disapear when my mouse move to it... how can i solve this issue?
this is my navbar :
<nav>
<div class="nav-wrapper grey darken-3">
<ul class="right hide-on-med-and-down second-nav">
<li *ngFor="let cat of categories">
<a (mouseover)="hover($event, cat)" (mouseleave)="unhover($event)" class="dropdown-button" >{{ cat.title }}</a>
</li>
</ul>
</div>
</nav>
<!-- Dropdown -->
<div *ngIf="hoveredCategory" class="content">
<ul id="hoveredCategory" class="collection">
<li class="collection-item avatar" *ngFor="let sc of hoveredCategory.sub">
<span>
{{ sc }}
</span>
</li>
</ul>
</div>
mycss :
.content {
background-color: #FFFFFF;
margin: 0;
width: 300px;
position: absolute;
right: 0;
min-width: 300px;
max-height: inherit;
margin-left: -1px;
overflow: hidden;
white-space: nowrap;
z-index: 1;
}
hover and unhover :
hover(event, category) {
this.hoveredCategory = category;
}
unhover(event) {
this.hoveredCategory = null;
}

.navigation ul,.navigation li{
list-style: none;
margin: 0;
padding: 0;
float: left;
}
.navigation li{
background:rgba(0,0,0,0.3);
position: relative;
}
.navigation li a {
padding: 15px;
display:block;
text-decoration:none;
}
.navigation ul ul{
display: none;
position: absolute;
top: 100%;
left: 0;
}
.navigation li:hover ul{
display: block;
}
<div class="navigation">
<ul>
<li>
Menu Item
<ul>
<li>Sub Item</li>
<li>Sub Item</li>
<li>Sub Item</li>
</ul>
</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</div>
Try this one.

Create column if list of li is higher than ul

If you hover over Menu 1 in my snippet, you can see it contains more list items than the ul can show because its height is only 80px, how can I create a new "column" so it shows correctly.
Should be:
Menu 1
--------------------------------
Menu 1.1 Menu 1.2 Menu 1.3
Menu 1.2 Menu 1.3
Menu 1.3 Menu 1.1
Menu 1.1 Menu 1.2
ul.nav {
float: left;
list-style: none;
padding: 0;
position: relative;
}
ul.nav>li {
float: left;
}
ul.nav>li>a {
color: white;
padding:20px;
background-color: red;
display: block;
}
ul.nav > li > ul {
background-color: blue;
display: none;
left: 0;
list-style:none;
padding: 0;
position: absolute;
right: 0;
top: 100%;
width: 100%;
height: 80px;
}
ul.nav>li>ul>li>{
display:block;
}
ul.nav>li>ul>li>a {
color: white;
}
ul.nav>li>a:hover~ul {
display: block
}
.clear{
clear:both;
}
<ul class="nav">
<li>
Menu 1.0
<ul>
<li>
Menu 1.1
</li>
<li>
Menu 1.2
</li>
<li>
Menu 1.3
</li>
<li>
Menu 1.1
</li>
<li>
Menu 1.2
</li>
<li>
Menu 1.3
</li>
<li>
Menu 1.1
</li>
<li>
Menu 1.2
</li>
<li>
Menu 1.3
</li>
</ul>
</li>
<li>
Menu 2.0
<ul>
<li>
Menu 2.1
</li>
<li>
Menu 2.2
</li>
<li>
Menu 2.3
</li>
</ul>
</li>
<li>
Menu 3.0
<ul>
<li>
Menu 3.1
</li>
<li>
Menu 3.2
</li>
<li>
Menu 3.3
</li>
</ul>
</li>
</ul>
<div class="clear"></div>

you could use the flex properties:
ul.nav>li>a:hover~ul {
display: flex;
flex-direction:column;
flex-wrap:wrap;
}
ul.nav {
float: left;
list-style: none;
padding: 0;
position: relative;
}
ul.nav>li {
float: left;
}
ul.nav>li>a {
color: white;
padding:20px;
background-color: red;
display: block;
}
ul.nav > li > ul {
background-color: blue;
display: none;
left: 0;
list-style:none;
padding: 0;
position: absolute;
right: 0;
top: 100%;
width: 100%;
height: 80px;
}
ul.nav>li>ul>li>{
display:block;
}
ul.nav>li>ul>li>a {
color: white;
}
ul.nav>li>a:hover~ul {
display: flex;
flex-direction:column;
flex-wrap:wrap;
}
.clear{
clear:both;
}
<ul class="nav">
<li>
Menu 1.0
<ul>
<li>
Menu 1.1
</li>
<li>
Menu 1.2
</li>
<li>
Menu 1.3
</li>
<li>
Menu 1.1
</li>
<li>
Menu 1.2
</li>
<li>
Menu 1.3
</li>
<li>
Menu 1.1
</li>
<li>
Menu 1.2
</li>
<li>
Menu 1.3
</li>
</ul>
</li>
<li>
Menu 2.0
<ul>
<li>
Menu 2.1
</li>
<li>
Menu 2.2
</li>
<li>
Menu 2.3
</li>
</ul>
</li>
<li>
Menu 3.0
<ul>
<li>
Menu 3.1
</li>
<li>
Menu 3.2
</li>
<li>
Menu 3.3
</li>
</ul>
</li>
</ul>
<div class="clear"></div>

Css submenu not remain visible after menu unhover no javascript

I want to use only css, no javascript. When I mouse hover the top-level menu I can display the submenu, but as soon as I unhover the top-level menu the submenu disapper. How could I solve this without using javascript? Have I missed something?
I tried to use .has-children:hover + .sub-menu {display: block;} to display the submenu when I mouse hover the top-level menu, but I have no idea what I can code to keep visible the submenu.
The HTML code is:
.header ul {
list-style: none;
padding: 20px 30px;
}
.header li {
float: left;
position: relative;
}
.header li a {
padding: 20px 30px;
}
.menu {
clear: none;
float: right;
max-height: none;
}
.menu li ul {
position: absolute;
}
.sub-menu {
display: none;
}
.open-menu-link {
display: none;
}
.has-children:hover + .sub-menu {
display: block;
}
<header class="header">
<ul class="menu">
<li>Work</li>
<li>
<a class="has-children" href="#about">Haschildren</a>
<ul class="sub-menu">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
<li>Careers</li>
<li>
<a class="has-children" href="#careers">About</a>
<ul class="sub-menu">
<li>Child 3</li>
<li>Child 4</li>
</ul>
</li>
<li>end</li>
</ul>
</header>

Add the class has-children to the li and use the li's hover event to display the submenu.
.header ul {
list-style: none;
padding: 20px 30px;
}
.header li {
float: left;
position: relative;
}
.header li a {
padding: 20px 30px;
}
.menu {
clear: none;
float: right;
max-height: none;
}
.menu li ul {
position: absolute;
}
.sub-menu {
display: none;
}
.open-menu-link {
display: none;
}
.has-children:hover .sub-menu {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<header class="header">
<ul class="menu">
<li>Work
</li>
<li class="has-children">Haschildren
<ul class="sub-menu">
<li>Child 1
</li>
<li>Child 2
</li>
<li>Child 3
</li>
</ul>
</li>
<li>Careers
</li>
<li class="has-children">About
<ul class="sub-menu">
<li>Child 3
</li>
<li>Child 4
</li>
</ul>
</li>
<li>end
</li>
</ul>
</header>
</body>
</html>

Move you has-children class onto the li and then make your selector:
.has-children:hover > .sub-menu
Updated snippet:
.header ul {
list-style: none;
padding: 20px 30px;
}
.header li {
float: left;
position: relative;
}
.header li a {
padding: 20px 30px;
}
.menu {
clear: none;
float: right;
max-height: none;
}
.menu li ul {
position: absolute;
}
.sub-menu {
display: none;
}
.open-menu-link {
display: none;
}
.has-children:hover > .sub-menu {
display: block;
}
<header class="header">
<ul class="menu">
<li>Work</li>
<li class="has-children">
Haschildren
<ul class="sub-menu">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
<li>Careers</li>
<li class="has-children">
About
<ul class="sub-menu">
<li>Child 3</li>
<li>Child 4</li>
</ul>
</li>
<li>end</li>
</ul>
</header>

CSS - Menubar changes width while hover

I created a menu and a submenu that should appear after I hover over the list elements of the main menu. The problem is that the widths of the main menu's list elements changes while hovering, and it looks puzzling. I tried it with a fixed width, but the space between the menu items is too big then.
I also tried to set the submenu to position absolute, but the problem was that the submenu was always located at the same position and not beneath the main menu's item which was active.
I created a codepen for this issue.
HTML:
<ul class="menubar">
<li class="menubar-li">Unternehmen
<ul class="menubar-sub">
<li class="menubar-sub-li">Profil
<li class="menubar-sub-li">Meilensteine
<li class="menubar-sub-li">Team
<li class="menubar-sub-li">News
<li class="menubar-sub-li">Jobs</li>
</ul>
</li>
<li class="menubar-li">Kompetenzen
<ul class="menubar-sub">
<li class="menubar-sub-li">Kreation
<ul class="menubar-subsub">
<li>Strategie
<li>Design
<li>Online
<li>Reinzeichnung</li>
</ul>
</li>
<li class="menubar-sub-li"> Prepress
<ul class="menubar-subsub">
<li>Seitenproduktion</li>
<li>Kreativretusche
<li>Colormanagement
<li>Proofen</li>
</ul>
</li>
<li class="menubar-sub-li">Druck
<ul class="menubar-subsub">
<li>Personalisiert</li>
<li>Web 2 Print</li>
</ul>
</li>
<li class="menubar-sub-li">Katalogmanagement</ul>
</li>
<li class="menubar-li">Portfolio</li>
<li class="menubar-li">Service
<ul class="menubar-sub">
<li class="menubar-sub-li">Mediapool</li>
<li class="menubar-sub-li">DUON</li>
<li class="menubar-sub-li">Datenupload</li>
<li class="menubar-sub-li">Downloads
</ul>
</li>
<li class="menubar-li">Kontakt
<ul class="menubar-sub">
<li class="menubar-sub-li">Ansprechpartner</li>
<li class="menubar-sub-li">Anfahrt</li>
<li class="menubar-sub-li">Impressum</li>
</ul>
</li>
</ul>
CSS:
.menubar {
list-style: none;
position: relative;
bottom: 16px;
}
.menubar a {
color: black;
text-decoration:none;
font-size: 13px;
position: relative;
}
.menubar-li {
float: left;
height:29px;
line-height:29px;
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
margin-right: 10px;
}
.menubar-li:hover {
background-color: #94ba1d;
cursor: pointer;
}
.menubar-li:hover .menubar-sub {
display: block;
}
.menubar-sub {
display: none;
list-style: none;
margin-top: 1px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 0px;
background-color: #94ba1d;
position: relative;
left: -10px;
}
.menubar-sub-li {
line-height: 14px;
padding-top: 5px;
padding-left: 10px;
}
.menubar-subsub {
display: none;
}

You can position the submenu below the main menu button by setting the main menu button to position: relative and placing the (absolute) submenu inside it. You then show/hide the submenu by toggling overflow: hidden and visible.
Here is a demo: http://codepen.io/seraphzz/pen/osGnh

Resources