I'm trying to create a submenu in html/css. I already have a piece of code, but i would like to have a submenu in block below each menu item, but i can't figure out how to do it. Anyone would like to help?
.mainmenu {
margin-left: auto;
margin-right: auto;
}
.mainmenu ul {
width: 940px;
;
overflow: hidden;
font-family: 'swis721_btroman';
position: relative;
background-image: url(../img/01.png);
list-style: none;
font-size: 16px;
color: #000;
}
.mainmenu ul li {
float: left;
text-transform: uppercase;
font-family: 'swis721_btroman';
padding: 0 20px 0 20px;
display: table-column;
font-size: 16px;
color: #000;
}
.mainmenu ul li:first-child {
background: none;
}
.mainmenu ul li a {
float: left;
text-decoration: none;
padding: 9px 0 9px 0;
font-family: 'swis721_btroman';
font-weight: bold;
font-size: 16px;
color: #292F51;
}
.mainmenu ul li a:hover {
text-decoration: none;
color: #FFF;
overflow: hidden;
padding: 9px 9px 9px 9px;
position: relative;
background-color: #292F51;
}
.mainmenu ul ul {
list-style-type: none;
display: none;
}
.mainmenu ul:hover ul {
display: block;
position: relative;
}
<div class="mainmenu">
<ul>
<li class="operador chefe">
operador chefe
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
<li class="safety">
safety
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
<li class="security">
security
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
<li class="atendimento">
atendimento
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
<li class="apoio unidades comerciais">
apoio unidades comerciais
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
</ul>
</div>
Right now, when i hove over a menu item, all the submenu items appear at once, and in inline-block, which is not what i want.
You have two main problems here:
First this selector .mainmenu ul:hover ul it's wrong since is showing all ul elements when you hover the main ul.
Change to this:
.mainmenu li:hover > ul
Making visible just the sub ul element inside a li.
Also those submenus need to be absolute positioned so they don't disturb the layout of the upper menu:
.mainmenu ul li {
position:relative;
}
.mainmenu ul li > ul {
display: none;
position: absolute;
z-index:10;
}
Check this Snippet
.mainmenu ul {
padding:0;
width: 940px;
position: relative;
list-style: none;
font-size: 16px;
color: #000;
}
.mainmenu ul li {
float: left;
text-transform: uppercase;
padding: 0 20px 0 20px;
font-size: 16px;
color: #000;
position:relative;
}
.mainmenu ul li a {
display:block;
text-decoration: none;
padding: 9px 0 9px 0;
font-weight: bold;
font-size: 16px;
color: #292F51;
}
.mainmenu ul li a:hover {
text-decoration: none;
color: #FFF;
background-color: #292F51;
}
.mainmenu ul li > ul {
display: none;
position: absolute;
z-index:10;
}
.mainmenu li:hover > ul {
display: block;
}
<div class="mainmenu">
<ul>
<li class="operador chefe">
operador chefe
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
<li class="safety">
safety
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
<li class="security">
security
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
<li class="atendimento">
atendimento
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
<li class="apoio unidades comerciais">
apoio unidades comerciais
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
</ul>
</div>
This will work fine.
The most important rule is that when you hover a li it should show its child ul.
.main-menu,
.sub-menu {
font-size: 0px;
margin: 0px;
list-style: none;
padding: 0px;
font-family: 'Helvetica';
}
.sub-menu {
display: none;
}
.menu-item,
.sub-item {
background: navy;
color: white;
font-size: 14px;
text-align: center;
min-width: 80px;
padding: 4px;
}
.menu-item {
display: inline-block;
vertical-align: top;
}
.menu-item:hover,
.sub-item:hover {
background: blue;
}
.menu-item:hover > ul {
display: block;
}
<ul class="main-menu">
<li class="menu-item">Item 1</li>
<li class="menu-item">Item 2 (With sub-items!)
<ul class="sub-menu">
<li class="sub-item">Item 3</li>
<li class="sub-item">Item 4</li>
</ul></li>
<li class="menu-item">Item 5</li>
<li class="menu-item">Item 6 (With sub-items!)
<ul class="sub-menu">
<li class="sub-item">Item 7</li>
<li class="sub-item">Item 8</li>
</ul></li>
</ul>
I don't really like submenu coded from scratch (from zero). You can today create some menu "without" any CSS.
You can use Bootstrap class to realize menu like that:
http://jsfiddle.net/fm571dsd/4/
html:
<body>
<div class="container">
<div class="row">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" target="_blank">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
operador chefe
<ul class="dropdown-menu">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
<li class="dropdown">
safety
<ul class="dropdown-menu">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
<li class="dropdown">
security
<ul class="dropdown-menu">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
<li class="dropdown">
atendimento
<ul class="dropdown-menu">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
<li class="dropdown">
apoio unidades comerciais
<ul class="dropdown-menu">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
js:
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
Related
there are navigation panel(div id=#nav) in which is located horizontal menu(nav_main_ul). It has submenu. When I load site main horizontal is appear but on hover submenu of main manu is not appear.
I write:
.nav_main_ul li a:hover .submenu{
top:150;
}
What is wrong?
Everything did work while I use flexbox for sidebar, content and footer.
I'm newbie in html and css. I think reason of failure is conflict between position(absolute, relative) and flexbox.
Thanks in advance.
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#nav {
left: 0;
top: 120px;
background-color: #00004d;
width: 100%;
}
.nav_main_ul {
position: relative;
margin: 0px 0 0 400px;
}
#nav ul {
height: 50px;
list-style: none;
background-color: #00004d;
}
#nav li {
display: block;
float: left;
font-family: Arial, sans-serif;
font-size: 20px;
position: relative;
}
#nav li a {
color: #fff;
display: block;
height: 50px;
padding: 0 10px;
text-decoration: none;
line-height: 50px;
}
.nav_main_ul li a:hover {
background: #000080;
}
/*.nav_main_ul li a:hover .submenu{
top:50;
}*/
.submenu {
position: absolute;
width: 250px;
top: -9999em;
}
.submenu li {
width: 100%;
height: 40px;
background: #00004d;
}
.submenu li a {
line-height: 50px;
height: 50px;
transition: background 0.5s;
}
.submenu li a:hover {
background-color: red;
}
li:hover .submenu li {
display: block;
z-index: 100;
}
<div id="nav">
<ul class="nav_main_ul">
<li>Main
<ul class="submenu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</li>
<li> News
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
</ul>
</li>
<li>About us
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Gallery
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Contacts
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
</ul>
</div>
Edit
Hi Delphi - To answer your question about the + selector, let's take a look at your HTML markup:
<li>
Main
<ul class="submenu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</li>
We need to understand that in the above markup, we can express it as:
LI (Parent / Root)
- A (Child of LI, Sibling of UL)
- UL (Child of LI, Sibling of A)
- LI (Child of UL, Grand-Child of LI)
Your desired action is that when a user hovers over the A, we show the UL.
USUALLY with CSS, we think of NESTED (or PARENT/CHILD) use-cases. But in YOUR use case, the A and UL are NOT in a parent/child relationship. Rather, they are siblings.
So, what we want is: When a user hovers over the A, we want the SIBLING(s) of A (in this case, only UL) to have TOP: 50PX.
There are TWO sibling selectors in CSS, "Adjacent" and "General". Adjacent means that it will ONLY apply when the siblings are directly together. For example:
<div>
<p></p>
<span></span>
<span></span>
<p></p>
</div>
OR:
DIV
- P
- SPAN
- SPAN
- P
Let's assume in the above, we wanted to select every SPAN that is a SIBLING of P. If we did:
p + span { color : red }
Only the FIRST span would be applied. That's because, it's the only span that immediately is next to a P element. Demo: http://jsfiddle.net/ucq5pg13/
What if we wanted ALL spans following a P to be red? That's where our GENERAL sibling selector comes into play:
p ~ span { color: red }
What this says is that ANY span that's a SIBLING of P, that comes AFTER IT, will be red.
It's important to note that it MUST come after. For example:
p ~ span { color: red }
<div>
<span></span> <!-- I WOULD NOT BE RED -->
<p></p>
<span></span> <!-- I WOULD BE RED -->
<span></span> <!-- I WOULD BE RED -->
<p></p>
</div>
Demo: http://jsfiddle.net/kb7n5236/
Hopefully that helps :)
Original:
When you hover over the a link, you'll need to position the .submenu. You can do something like:
<!-- On hover, show submenu -->
.nav_main_ul li a:hover + .submenu,
.nav_main_ul li a + .submenu:hover {
top: 50px;
}
JSFiddle: http://jsfiddle.net/1us0q4m3/1/
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#nav {
left: 0;
top: 120px;
background-color: #00004d;
width: 100%;
}
.nav_main_ul {
position: relative;
margin: 0px 0 0 400px;
}
#nav ul {
height: 50px;
list-style: none;
background-color: #00004d;
}
#nav li {
display: block;
float: left;
font-family: Arial, sans-serif;
font-size: 20px;
position: relative;
}
#nav li a {
color: #fff;
display: block;
height: 50px;
padding: 0 10px;
text-decoration: none;
line-height: 50px;
}
.nav_main_ul li a:hover {
background: #000080;
}
.nav_main_ul li a:hover + .submenu,
.nav_main_ul li a + .submenu:hover {
top: 50px;
}
.submenu {
position: absolute;
width: 250px;
top: -9999em;
}
.submenu li {
width: 100%;
height: 40px;
background: #00004d;
}
.submenu li a {
line-height: 50px;
height: 50px;
transition: background 0.5s;
}
.submenu li a:hover {
background-color: red;
}
li:hover .submenu li {
display: block;
z-index: 100;
}
<div id="nav">
<ul class="nav_main_ul">
<li>Main
<ul class="submenu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</li>
<li> News
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
</ul>
</li>
<li>About us
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Gallery
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Contacts
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
</ul>
</div>
I'm trying to create dropdown navigation with pure CSS and I want to show dropdown menu on ul click. Problem is that simple ul:focus > ul doesn't work even though there is anchor in it. Selectors :hover and :active are working without problems.
HTML
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
</ul>
</li>
CSS
#primary_nav_wrap ul li:hover > ul
{
display:block
}
Here's the code:
https://codepen.io/anon/pen/vgpQWV
Your selector needs to be #primary_nav_wrap ul li > a:focus + ul.
Breaking it down:
When the <a> directly inside the <li> has focus, apply these styles to the immediately adjacent <ul>.
Fixed example:
#primary_nav_wrap {
margin-top: 15px
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul li.current-menu-item {
background: #ddd
}
#primary_nav_wrap ul li:hover {
background: #f6f6f6
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li > a:focus + ul {
display: block
}
<h1>Testing menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home
</li>
<li>Menu 1
<ul>
<li>Sub Menu 1
</li>
<li>Sub Menu 2
</li>
<li>Sub Menu 3
</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1
</li>
<li>Sub Deep 2
</li>
<li>Sub Deep 3
</li>
<li>Sub Deep 4
</li>
</ul>
</li>
<li>Deep Menu 2
</li>
</ul>
</li>
<li>Sub Menu 5
</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1
</li>
<li>Sub Menu 2
</li>
<li>Sub Menu 3
</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1
</li>
<li class="dir">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?
<ul>
<li>Category 1
</li>
<li>Category 2
</li>
<li>Category 3
</li>
<li>Category 4
</li>
<li>Category 5
</li>
</ul>
</li>
<li>Sub Menu 3
</li>
<li>Sub Menu 4
</li>
<li>Sub Menu 5
</li>
</ul>
</li>
<li>Menu 4
</li>
<li>Menu 5
</li>
<li>Menu 6
</li>
<li>Contact Us
</li>
</ul>
</nav>
I have what is hopefully a simple problem that I'm just overcomplicating in my mind.
Here is a Fiddle to demonstrate my issue.
In the Fiddle above you will see a flyout menu setup. On the top option you will see an enlarged first option that has a broken float. This is where my issue is. I need those elements to float alongside each other without breaking the list container holding them.
I understand that the white-space:nowrap is causing the break of that containers space, however, whenever I try and remove that element I can't seem to get my float to honor. I'm sure this is a simple miss on my part due to thinking of things that will be surrounding it, but any advancement on this is appreciated and hopefully an easy up for someone.
CSS:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
#nav{margin:0;padding:0;position:relative;float:left;}
#nav li {list-style:none;}
#nav a {
color:#fff;
display:block;
line-height:2.4;
padding:0 1em;
text-decoration:none;
border-bottom:1px solid #eee;
}
/* FLYOUT */
.sub {
top:0;
margin:0;
padding:0;
left:100%;
display:none;
min-height:100%;
position:absolute;
white-space:nowrap;
border-left:2px solid #eee;
}
#nav li:hover .sub {
display:block;
}
#nav li:hover .sub .sub {
display:none;
}
#nav .sub li:hover .sub{
display:block;
}
.sub a:hover {
color:#fff;
background:#333;
}
.sub img { min-width:120px; float:left; }
.sub .content { float:left; }
/*-- COLORS NOT NEEDED ON LIVE--*/
.first{background:#aaa;}
.second {background:#bbb;}
.third {background:#ccc;}
.fourth {background:#ddd;}
.fifth {background:#aaa;}
.sixth {background:#bbb;}
.seventh {background:#ccc;}
.eighth {background:#ddd;}
.nineth {background:#aaa;}
.tenth {background:#bbb;}
.all {background:#000}
<div id="nav">
<li><a class="first" href="#">Level 1 Option</a>
<ul class="sub first">
<li class="clearfix"><a href="#">
<div class="float">
<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=120%C3%9780&w=120&h=80" alt=""></div>
<div class="">
<h5>This will be a title</h5>
<p>
<strong>Sub-title</strong><br>
Specs<br>
<strong>Sub-title</strong><br>
Specs
</p>
</div>
</a>
<ul class="sub first">
<li>Option 1</li>
<li>Option 1</li>
<li>Option 1</li>
<li>Option 1</li>
</ul>
</li>
<li>Option 2
<ul class="sub first">
<li>Option 2</li>
<li>Option 2</li>
<li>Option 2</li>
<li>Option 2</li>
</ul>
</li>
</ul>
</li>
<li><a class="second" href="#">Level 1 Option</a>
<ul class="sub second">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="third" href="#">Level 1 Option</a>
<ul class="sub third">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="fourth" href="#">Level 1 Option</a>
<ul class="sub fourth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="fifth" href="#">Level 1 Option</a>
<ul class="sub fifth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="sixth" href="#">Level 1 Option</a>
<ul class="sub sixth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="seventh" href="#">Level 1 Option</a>
<ul class="sub seventh">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="eighth" href="#">Light Duty</a>
<ul class="sub eighth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="ninth" href="#">Level 1 Option</a>
<ul class="sub ninth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="tenth" href="#">Level 1 Option</a>
<ul class="sub tenth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="all" href="#">View All</a>
</li>
</div>
Remove the float left form the image within float div. And add some margin over there.
CSS:
.sub img {
min-width: 120px;
/* float: left; */ //Remove this line
margin-top: 10px;
}
See this fiddle.
One way to acheive your desired layout is to set inline-block for both the image container, and the container for the headings/sub headings.
vertical-align: top; is necessary to ensure the two containers align at their top edges.
For the sake of simplicity, I kept your existing float class. (Note that this class needed to be added to the container for the heading/sub-heading/specs.)
.float {
display: inline-block;
vertical-align: top;
}
Please check this code , i think you are looking for this, you dont need to set width to .sub i have added new division and add some property
.float , .inline-block {
display:inline-block;
vertical-align:top;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* close commented backslash hack */
#nav {
margin: 0;
padding: 0;
position: relative;
float: left;
}
#nav li {
list-style: none;
}
#nav a {
color: #fff;
display: block;
line-height: 2.4;
padding: 0 1em;
text-decoration: none;
border-bottom: 1px solid #eee;
}
/* FLYOUT */
.sub {
top: 0;
margin: 0;
padding: 0;
left: 100%;
display: none;
min-height: 100%;
position: absolute;
white-space: nowrap;
border-left: 2px solid #eee;
}
#nav li:hover .sub {
display: block;
}
#nav li:hover .sub .sub {
display: none;
}
#nav .sub li:hover .sub {
display: block;
}
.sub a:hover {
color: #fff;
background: #333;
}
.sub img {
min-width: 120px;
float: left;
}
.sub .content {
float: left;
}
/*-- COLORS NOT NEEDED ON LIVE--*/
.first {
background: #aaa;
}
.second {
background: #bbb;
}
.third {
background: #ccc;
}
.fourth {
background: #ddd;
}
.fifth {
background: #aaa;
}
.sixth {
background: #bbb;
}
.seventh {
background: #ccc;
}
.eighth {
background: #ddd;
}
.nineth {
background: #aaa;
}
.tenth {
background: #bbb;
}
.all {
background: #000
}
.float , .inline-block {
display:inline-block;
vertical-align:top;
}
<div id="nav">
<li><a class="first" href="#">Level 1 Option</a>
<ul class="sub first">
<li class="clearfix"><a href="#">
<div class="float"> <img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=120%C3%9780&w=120&h=80" alt=""></div>
<div class="inline-block"><h5>This will be a title</h5></div>
<div class="">
<p> <strong>Sub-title</strong><br>
Specs<br>
<strong>Sub-title</strong><br>
Specs </p>
</div>
</a>
<ul class="sub first">
<li>Option 1</li>
<li>Option 1</li>
<li>Option 1</li>
<li>Option 1</li>
</ul>
</li>
<li>Option 2
<ul class="sub first">
<li>Option 2</li>
<li>Option 2</li>
<li>Option 2</li>
<li>Option 2</li>
</ul>
</li>
</ul>
</li>
<li><a class="second" href="#">Level 1 Option</a>
<ul class="sub second">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="third" href="#">Level 1 Option</a>
<ul class="sub third">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="fourth" href="#">Level 1 Option</a>
<ul class="sub fourth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="fifth" href="#">Level 1 Option</a>
<ul class="sub fifth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="sixth" href="#">Level 1 Option</a>
<ul class="sub sixth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="seventh" href="#">Level 1 Option</a>
<ul class="sub seventh">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="eighth" href="#">Light Duty</a>
<ul class="sub eighth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="ninth" href="#">Level 1 Option</a>
<ul class="sub ninth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="tenth" href="#">Level 1 Option</a>
<ul class="sub tenth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="all" href="#">View All</a> </li>
</div>
I am a very beginner to HTML and CSS. When I'm practicing CSS drop down menus, sub menus are inline and not aligned properly. Let me know the mistake what I have done and rectify the mistake.
#menu{ list-style-type:none; margin:0; padding:0; }
#menu li{ display:inline; }
#menu li a{ text-decoration:none; background-color:#FFAAFF; color:Black; display:inline-block; padding: 20px 40px; }
#menu li a:hover{ background-color:#AA7FFF; color:White; }
.submenu{ display:none;position:absolute; top:66px; margin:0; padding:0; }
.submenu li a{ display:inline-block; }
#menu li:hover .submenu{ display:inline-block; }
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop down menu</title>
<link href="login.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="menu">
<li>Menu 1
<ul class="submenu">
<li>Sub menu 1.1</li>
<li>Sub menu 1.2</li>
<li>Sub menu 1.3</li>
<li>Sub menu 1.4</li>
</ul>
</li>
<li>Menu 2
<ul class="submenu">
<li>Sub menu 2.1</li>
<li>Sub menu 2.2</li>
<li>Sub menu 2.3</li>
<li>Sub menu 2.4</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4
<ul class="submenu">
<li>Sub menu 3.1</li>
<li>Sub menu 3.2</li>
<li>Sub menu 3.3</li>
<li>Sub menu 3.4</li>
</ul>
</li>
<li>Menu 5</li>
</ul>
</body>
</html>
HI now add this css Define your .submenu and #menu li this css
.submenu{ top: 100%;left: 0;}
#menu li {
display: inline-block;
position: relative;
}
#menu{ list-style-type:none; margin:0; padding:0; }
#menu li{ display:inline; }
#menu li a{ text-decoration:none; background-color:#FFAAFF; color:Black; display:inline-block; padding: 20px 40px; }
#menu li a:hover{ background-color:#AA7FFF; color:White; }
.submenu{ display:none;position:absolute; top:66px; margin:0; padding:0; }
.submenu li a{ display:inline-block; }
#menu li:hover .submenu{ display:inline-block; }
.submenu{ top: 100%;left: 0;}
#menu li {
display: inline-block;
position: relative;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop down menu</title>
<link href="login.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="menu">
<li>Menu 1
<ul class="submenu">
<li>Sub menu 1.1</li>
<li>Sub menu 1.2</li>
<li>Sub menu 1.3</li>
<li>Sub menu 1.4</li>
</ul>
</li>
<li>Menu 2
<ul class="submenu">
<li>Sub menu 2.1</li>
<li>Sub menu 2.2</li>
<li>Sub menu 2.3</li>
<li>Sub menu 2.4</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4
<ul class="submenu">
<li>Sub menu 3.1</li>
<li>Sub menu 3.2</li>
<li>Sub menu 3.3</li>
<li>Sub menu 3.4</li>
</ul>
</li>
<li>Menu 5</li>
</ul>
</body>
</html>
menu li {display: -webkit-inline-box; position: relative;}
use this css
And Must check display for all browser
I can't change the colour of the background that my navigation bar has. I'm not using any framework so there's no conflicts. Here's the code that I have tried:
.navigation-right {
float: right;
}
.navigation-left {
float: left;
}
.navigation-main {
background-color: #000;
width: 100%;
}
.navigation-main li {
display: inline-block;
padding: 10px;
}
.navigation-main a {
color: #F2F2F2;
text-decoration: none;
}
<div class="container">
<section class="navigation">
<nav class="navigation-main">
<ul>
<div class="navigation-right">
<li>Menu
</li>
<li>Menu
</li>
<li>Menu
</li>
<li>Menu
</li>
<li>Menu
</li>
</div>
<div class="navigation-left">
<li>Menu
</li>
<li>Menu
</li>
<li>Menu
</li>
<li>Menu
</li>
<li>Menu
</li>
</div>
</ul>
</nav>
</section>
You are missing an overflow:hidden in the parent of the floating elements. Without it, the browser can't calculate the height hence the background colour not coming through. Try adding this line to your CSS:
.navigation-main{
background-color: #000;
width: 100%;
overflow: hidden; // Add this
}
You have to clear your floats. Using overflow is a sneaky, though not always preferable way. The best way - in my opinion - is using a pseudo element, like so:
/* Clear */
ul::after {
content: "";
display: table;
clear: both;
}
.navigation-right {
float: right;
}
.navigation-left {
float: left;
}
.navigation-main {
background-color: #000;
width: 100%;
}
.navigation-main li {
display: inline-block;
padding: 10px;
}
.navigation-main a {
color: #F2F2F2;
text-decoration: none;
}
<div class="container">
<section class="navigation">
<nav class="navigation-main">
<ul>
<div class="navigation-right">
<li>Menu
</li>
<li>Menu
</li>
<li>Menu
</li>
<li>Menu
</li>
<li>Menu
</li>
</div>
<div class="navigation-left">
<li>Menu
</li>
<li>Menu
</li>
<li>Menu
</li>
<li>Menu
</li>
<li>Menu
</li>
</div>
</ul>
</nav>
</section>
Note though, that you oughtn't split up your menu like that, with divs inside a list. Instead, create two seperate lists.
Just corrected your HTML and add overflow:hidden to you're .navigation-main{...}
JsFiddle There
Teknotica had it aswell :)