Considering the following menu code JSFiddle here:
<div class="menu">
<nav>
<ul>
<li>Logo</li>
<li>
Services
<div class="menu-submenu">
<ul>
<li>Very big text here in this option</li>
<li>Option</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
</li>
<li>Support</li>
<li>Contact</li>
</ul>
</nav>
</div>
And CSS:
.menu {
width: 100%;
background-color: white;
margin-bottom: 5px;
}
.menu nav ul {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.menu nav ul li:first-child {
padding-left: 10%;
padding-top: 5px;
padding-right: 30px;
}
.menu nav ul li:not(:first-child) {
line-height: 30px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.menu nav ul li:first-child {
height: 30px;
}
.menu nav ul li:last-child {
margin-left: auto;
margin-right: 10%;
align-self: flex-end;
}
.menu nav ul li:hover:not(:first-child) {
background-color: blue;
color: white;
}
.menu nav ul li {
position: relative;
}
.menu-submenu {
display: none;
}
.menu nav ul li:hover .menu-submenu {
display: flex;
}
.menu-submenu ul {
position: absolute;
top: 30px;
display: flex;
flex-direction: column;
}
.menu-submenu ul li {
flex: 1;
background-color: red;
z-index: 10;
}
a. How do I make the submenu to open on vertical, not horizontal ?
b. How do I allow the submenu text not to brake (open with greater width that its parent) ?
a) You correctly set flex-direction: column on .menu-submenu ul. The problem is you also set flex-direction: row on .menu nav ul with equal (but applied) specificity. To correct this, simply give your .menu-submenu ul selector more specificity (by changing it to .menu-submenu > ul for example).
b) Your .menu nav ul li:first-child gets applied to both the navbar and the submenu. Due to the height and padding restrictions, this causes the display of the submenu to get messed up. I believe you only want to apply it to the main navbar. As such, simply change this rule to make use of the child combinator (>), as .menu nav > ul > li:first-child.
You'll want to apply > to either side of ul to target your navbar. To target your submenu, you should use .menu .menu-submenu > ul and .menu .menu-submenu > ul > li so that you don't get confused about which menu gets targetted.
Here's an example showcasing the submenu vertical, along with removing all other rules that were (likely) incorrectly applied to it:
.menu {
width: 100%;
background-color: white;
margin-bottom: 5px;
}
.menu nav ul {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.menu nav > ul > li:first-child {
padding-left: 10%;
padding-top: 5px;
padding-right: 30px;
}
.menu nav > ul > li:not(:first-child) {
line-height: 30px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.menu nav > ul > li:first-child {
height: 30px;
}
.menu nav > ul > li:last-child {
margin-left: auto;
margin-right: 10%;
align-self: flex-end;
}
.menu nav > ul > li:hover:not(:first-child) {
background-color: blue;
color: white;
}
.menu nav ul li {
position: relative;
}
.menu-submenu {
display: none;
}
.menu nav ul li:hover .menu-submenu {
display: flex;
}
.menu .menu-submenu > ul {
position: absolute;
top: 30px;
display: flex;
flex-direction: column;
}
.menu .menu-submenu > ul > li {
flex: 1;
background-color: red;
z-index: 10;
}
<div class="menu">
<nav>
<ul>
<li>Logo</li>
<li>
Services
<div class="menu-submenu">
<ul>
<li>Very big text here in this option</li>
<li>Option</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
</li>
<li>Support</li>
<li>Contact</li>
</ul>
</nav>
</div>
You can make it nicer with less code:
.menu, .menu * {margin: 0; padding: 0; box-sizing: border-box}
.menu {
background: white;
margin-bottom: 5px;
}
.menu ul {
list-style: none;
display: flex;
align-items: center;
}
.menu ul li {
margin: 0 5px; /* adjust */
padding: 5px; /* adjust */
}
.menu ul li:last-child {
margin-left: auto;
}
.menu ul li:hover:not(:first-child) {
background: blue;
color: white;
}
.menu ul li:hover .menu-submenu {
display: flex;
}
.menu-submenu {
display: none;
position: relative; /* added */
}
.menu-submenu ul {
position: absolute;
top: 5px; /* modified; adjust; needs to match the padding of the ".menu ul li" */
left: -5px; /* added; adjust; needs to match the padding of the ".menu ul li" (negative) */
display: flex;
flex-direction: column;
}
.menu-submenu ul li {
width: 100%; /* added */
padding: 5px; /* adjust */
white-space: nowrap; /* added */
background: red;
z-index: 10;
}
<nav class="menu">
<ul>
<li>Logo</li>
<li>
Services
<div class="menu-submenu">
<ul>
<li>Very big text here in this option</li>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
</li>
<li>Support</li>
<li>Contact</li>
</ul>
</nav>
Otherwise the point is in using the white-space: nowrap to prevent line breaking and width: 100% to make them even in width. Since the .menu-submenu ul has position: absolute, position: relative needs to be on its parent element.
Related
So I want a dropdown menu but instead of it pop up in left, it will pop up down without overlay other subtopics and so these other subtopics will float to bot.
I made this montage on paint so you can see what I want:
enter image description here
nav ul {
box-shadow: 0px 0px 5px whitesmoke;
list-style-type: none;
background-color: #FB030F;
margin: 0;
padding: 0;
width:calc(100% - 3px);
}
nav > ul > li ul {
display: none;
}
nav ul > li {
display: block;
position: relative;
}
nav #m {
display: block;
padding: 5px 5px;
text-decoration: none;
white-space: nowrap;
color: white;
}
nav #m:hover {
background-color: #ff7373;
}
nav > ul li:hover > ul {
display: block;
position: absolute;
top: 0;
top: 100%;
}
ul li:hover > #n {
display: block;
position: absolute;
top: 0;
left: 100%;
}
nav a {
text-align: center;
}
<nav>
<ul>
<li>Builds
<ul id="n">
<li>Build 1</li>
<li>Build 2</li >
<li>Build 3</li>
<li>Build 4</li>
<li>Build 5</li>
<li>Build 6</li>
<li>Build 7</li>
<li>Build 8</li>
</ul>
</li>
<li>Configurador</li>
<li>Componentes</li>
<li>Guia</li>
</ul></li>
</nav>
Let me just write something here so I can post this question, because stack overflow is telling me that I cannot post this because I have too much code and so I have to add more details. But I guess my doubt is simple and I do not need to add more info, if I am wrong tell me please.
If I understand you right, then try this:
nav ul {
box-shadow: 0px 0px 5px whitesmoke;
list-style-type: none;
background-color: #FB030F;
margin: 0;
padding: 0;
width:calc(100% - 3px);
}
nav > ul > li ul {
display: none;
}
nav ul > li {
display: block;
position: relative;
}
nav #m {
display: block;
padding: 5px 5px;
text-decoration: none;
white-space: nowrap;
color: white;
}
nav #m:hover {
background-color: #ff7373;
}
nav > ul > li:hover ul {
display: block;
}
nav a {
text-align: center;
}
I just deleted some classes which positioned blocks absolute, that's why menu appeared not where you wanted.
Hope it'll help.
I'm training my CSS to pass to JS, but I'm worried because I'm having some problems doing a drop-down menu.
The concept I already get, but when I put it to work, it's kind of bugging, and moving the nav.
header {
overflow: auto;
}
header img {
float: left;
margin-left: 300px;
margin-top: 10px;
}
header img:hover {
opacity: 0.8;
}
nav {
float: right;
margin-right: 250px;
margin-top: 40px;
}
nav ul {
padding: 0px;
}
nav ul li {
display: inline;
margin-right: 50px;
border-right: 1px solid black;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
color: black;
text-decoration: none;
font-weight: bold;
font-family: roboto;
margin-right: 50px
}
nav ul li a:hover {}
nav li ul {
display: none;
}
nav li:hover ul {
display: block;
position: relative;
}
nav li:hover li {
float: none;
}
<header>
<img src="logo.png">
<nav>
<ul>
<li>
Menu 01
<ul>
<li>Submenu 01</li>
</ul>
</li>
<li>Menu 02</li>
<li>Menu 03</li>
<li>Menu 04</li>
</ul>
</nav>
</header>
I sent the code with the img tag just to make clear the position of the stuff. I'm also learning the stuff, so it'll probably be very bad in others monitors.
nav li ul{
display: none;
position:absolute;
}
nav li:hover ul{
display: block;
}
thats all
I have a menu with margin-top and margin-left of 12 pixels for the elements that are inside another , but when the cursor is between that space (margin), the menu is hidden. I can solve that if I remove position:absolute, but I need it. How can I solve this?
HTML
<ul>
<li>Home</li>
<li>Food
<ul>
<li>Chilean food</li>
<li>Chinese food</li>
<li>Mexican food
<ul>
<li>Nachos</li>
<li>Quesadillas</li>
<li>Tacos</li>
</ul>
</li>
</ul>
CSS
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
ul li {
position: relative;
}
ul li ul {
display: none;
position: absolute;
margin-top: 4px;
}
ul li:hover > ul {
display: block;
}
ul li a {
text-decoration: none;
padding: 12px;
display: block;
background: black;
color: white;
white-space: nowrap;
}
ul li ul li ul {
top: 0;
left: 100%;
margin-top: 0;
margin-left: 4px;
}
JSFiddle: https://jsfiddle.net/v3ebd6hy/3/
Thanks!
Change the margin-top to padding-top in ul li ul.
Fiddle for Reference
I made a drop down nav menu which also partially hovers over the aside. But when I hover over the drop down menu part that is over the aside, the nav bar collapses and I end up selecting the aside. Also parts of the aside are over the nav sub menu.
This picture shows the overlap. The orange one is being hovered, when moving the mouse to the left half, into the grey aside area but still over the nav sub menu, the 'Stats' sub menu collapses and the 'Data sheet' link gets selected.
I've tried all kinds of things with z-index and adjusting positions and so on but I don't know what I'm doing wrong.
JSFiddle shows the problem.
HTML:
<nav>
<ul>
<li>Home</li>
<li>Stats
<ul>
<li>Graph</li>
<li>DataSheet</li>
<li>Print</li>
</ul>
</li>
<li>Projects
<ul>
<li>View</li>
<li>Add</li>
<li>Edit</li>
</ul>
</li>
<li>Employees
<ul>
<li>View</li>
<li>Add</li>
<li>Edit</li>
</ul>
</li>
<li>Settings</li>
<li>About</li>
</ul>
</nav>
<aside>
<ul>
<li><a>Graph</a></li>
<li><a>Data sheet</a></li>
<li><a>Print graph</a></li>
</ul>
</aside>
CSS:
nav {
background: black;
width: auto;
height: 50px;
font-weight: bold;
}
nav ul {
list-style: none;
}
nav ul li {
height: 50px;
width: 125px;
float: left;
line-height: 50px;
background-color: #000;
text-align: center;
position: relative;
}
nav ul li a {
text-decoration: none;
color: #fff;
display: block;
}
nav ul li a:hover {
background-color: #ff6a00;
}
nav ul ul {
position: absolute;
display: none;
}
nav ul li:hover > ul {
display: block;
}
aside {
float: left;
width: 200px;
height: 700px;
background: grey;
}
aside input {
background-color: red;
}
aside ul {
list-style: none;
/*no bulets*/
height: 100%;
}
aside ul li {
height: 50px;
width: 100%;
float: left;
border-bottom: 1px solid black;
line-height: 50px;
text-align: center;
position: relative;
}
aside ul li a {
text-decoration: none;
width: 100%;
color: #fff;
display: block;
}
aside ul li a:hover {
background-color: #ff6a00;
display: block;
}
Add z-index to your nav ul element:
nav ul {
list-style: none; /*no bulets*/
z-index: 100;
}
Updated Fiddle
For more information about the z-index style and what it does, click here.
I am new to website design, and there are a few flaws in my navbar that I cannot fix.
I cannot get the navbar to center properly.
When the screen resolution changes, the list overflows into the next line.
there is 1 list element that is sized differently and I cannot seem to figure out why.
Here is the code:
https://jsfiddle.net/b02nm6ae/#update
CSS:
.nav_wrapper {
z-index: 9999;
padding: 0;
margin: 0;
width: 100%;
min-width: 50px;
}
.nav_wrapper ul {
display: block;
position: relative;
position: fixed;
/* fixes automatic values set by ul */
margin: 0;
padding: 0;
}
.nav_wrapper ul li {
list-style: none;
display: list-item;
background-color: #993300;
float: left;
}
/* hides the submenu by default */
.nav_wrapper ul ul {
display: none;
position: absolute;
}
/* makes the sub menu appear on hover over list element */
.nav_wrapper ul li:hover > .sub_nav1 {
display: list-item;
list-style: none;
}
/* lists the list items on top of one another */
.nav_wrapper ul .sub_nav1 li {
float: none;
position: relative;
}
.nav_wrapper ul li a{
display: block;
text-decoration: none;
color: #ffffff;
padding: 12px;
}
.nav_wrapper li a:hover{
color: #000;
background-color: #ffffff;
}
/* Dropdown Menu arrow */
.nav_wrapper ul li > a:after {
content: '\25BE';
}
.nav_wrapper ul li > a:only-child:after {
content: '';
}
HTML:
<body>
<!-- NAV -->
<div class="nav_wrapper">
<ul class="nav">
<li>Home</li>
<li>Calandar</li>
<li>About Us
<ul class="sub_nav1">
<li>The Pastor</li>
<li>History</li>
<li>About Byzantines</li>
</ul>
</li>
<li>Mass Times</li>
<li>Contact Us</li>
</ul>
<div>
<!-- SECTION 1 -->
</body>
</html>
Once you float the li then centering becomes problematical. In these instances, it's often preferred to use display:inline-block and center then by applying text-align:center to the parent ul.
This does have a white-space downside but there are methods around that, one of which (font-size) I have used here.
As for the single element with the greater height...that was caused by the pseudo-element...so slapped a quick patch over it. Frankly, I would be applying a class to the parent li and using a pseudo-element on the li but that's another debate entirely.
body {
font-family: 'Didact Gothic', sans-serif;
padding: 0;
margin: 0;
background-color: #CCCCFF;
}
.nav_wrapper ul {
display: block;
margin: 0;
padding: 0;
text-align: center;
font-size: 0;
/* remove whitespace */
}
.nav_wrapper ul li {
list-style: none;
display: inline-block;
vertical-align: top;
background-color: #993300;
position: relative;
font-size: 1rem;
/* font-size reset */
}
/* hides the submenu by default */
.nav_wrapper ul ul {
display: none;
top: 100%;
left: 0;
position: absolute;
}
/* makes the sub menu appear on hover over list element */
.nav_wrapper ul li:hover > .sub_nav1 {
display: block;
width: 100%;
}
/* lists the list items on top of one another */
.nav_wrapper ul .sub_nav1 li {
position: relative;
width: 100%;
}
.nav_wrapper ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 12px;
}
.nav_wrapper li a:hover {
color: #000;
background-color: #ffffff;
}
/* Dropdown Menu arrow */
.nav_wrapper ul> li > a:after {
content: '\25BE';
line-height: 0;
}
.nav_wrapper ul li > a:only-child:after {
content: '';
}
<div class="nav_wrapper">
<ul class="nav">
<li>Home
</li>
<li>Calendar
</li>
<li>About Us
<ul class="sub_nav1">
<li>The Pastor
</li>
<li>History
</li>
<li>About Byzantines
</li>
</ul>
</li>
<li>Mass Times
</li>
<li>Contact Us
</li>
</ul>
<div>
Well I notice that if I set a 25 pixel height to
.nav_wrapper ul li a
that removes the extra space for example..
.nav_wrapper ul li a{
height:25px;
display: block;
text-decoration: none;
color: #ffffff;
padding: 12px;
}
https://jsfiddle.net/b02nm6ae/9/