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 :)
Related
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);
I am working on a navbar menu for my website, but I am stacked. The concept is to have the logo in the middle of the navbar and the three menu options from left and the other three menu from right.
<header id="top-header">
<div class="row">
<div class="large-12 columns">
<div class="logo"></div>
<ul class="menu" id="nav-menu">
<li>MENU 1</li>
<li>MENU 2</li>
<li>MENU 3</li>
<li>MENU 4</li>
<li>MENU 5</li>
<li>MENU 6</li>
</ul>
</div>
</div>
</header>
I tried to add a width to <li> with percentage like this which worked for the menu titles:
#top-header ul > li {
display: block;
float: left;
width: 16%;
position: relative;
}
However, my problem now is the image with the logo. It doesn't stay on the center of the screen. The image is the whole navbar with the logo on the middle, so I was hoping to resize vertically the image when the browser change resolution.
#top-header .logo {
background-color: transparent;
background-image: url("img/menubar_logo.png");
height: 100%;
padding-left: 10px;
position: absolute;
transition: all 0.3s ease 0s;
width: 100%;
z-index: 1;
}
I would include the logo as the middle list element and turn it into a faux table. This will eliminate the need to define a width for the elements within.
http://jsfiddle.net/3pf4onbj/
HTML
<header id="top-header">
<div class="row">
<div class="large-12 columns">
<ul class="menu" id="nav-menu">
<li>MENU 1</li>
<li>MENU 2</li>
<li>MENU 3</li>
<li><div class="logo"></div></li>
<li>MENU 4</li>
<li>MENU 5</li>
<li>MENU 6</li>
</ul>
</div>
</div>
</header>
CSS
.logo {
width:100px;
height:30px;
background:#ff0;
}
#top-header ul {
display:table;
width:100%;
margin:0;
padding:0;
}
#top-header ul > li {
display: table-cell;
vertical-align:middle;
margin:0;
padding:0;
text-align:center;
}
#top-header ul > li a {
display:block;
padding:3px 5px;
}
I am not sure if this is the right way to do this but I am trying to align a number of ULs beside each other and should drop the third UL when the screen size is smaller. I just need help with the CSS because for some reason, they keep stacking on top of one another even though I already changed the width to 50%. I already created the '#media'.
HTML:
<ul>
<li>Content 1</li>
</ul>
<ul>
<li>Content 2</li>
</ul>
<ul>
<li>Content 3</li>
</ul>
CSS:
ul {
display: block;
width: 100%;
float:left;
}
#media (max-width: 767px){
ul {
width: 50%;
}
}
You need to remove the display: block, and width: 100%. And make display: inline-block
ul {
display: inline-block;
float:left;
overflow: auto;
}
Since making width: 100% will cover up the whole width, you are getting the uls one down another
You don't need the #media.
You need to use display:inline on your lists.
Have a look here: EXAMPLE
This is all you need.
HTML
<ul>
<li>Content 1</li>
</ul>
<ul>
<li>Content 2</li>
</ul>
<ul>
<li>Content 3</li>
</ul>
CSS
ul {
display:inline-block;
float:left;
}
You can see it over here : http://codepen.io/anon/pen/GwBak
Try changing the window size .
CSS code
{
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
}
#navcontainer a:hover
{
background-color: #369;
color: #FFF;
}
In html code
<div id="navcontainer">
<ul>
<li>Milk
<ul>
<li>Goat</li>
<li>Cow</li>
</ul>
</li>
<li>Eggs
<ul>
<li>Free-range</li>
<li>Other</li>
</ul>
</li>
<li>Cheese
<ul>
<li>Smelly</li>
<li>Extra smelly</li>
</ul>
</li>
</ul>
</div>
I need to achieve this layout, please note on the current item,
The 3 sublists are supoused to be children of the current item,
The problem here is that if I set the position absolute and left:0 and width:100%; the max width would be determined for the parent's width,
So,
How can I keep the lists children and make them use the whole avaliable space?
this is my markup for now: (can i keep it?)
<nav>
<ul class="main">
<li><?=lang('grupo-cabau')?></li>
<li class="active">
<?=lang('nuestros-hoteles')?>
<ul>
<li>
<ul>
<li>list
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
<ul>
<li>listt <ul>
<li>item</li>
</ul>
</li>
</ul>
<ul>
<li>list
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><item</li>
<li>item</li>
</ul>
<ul class="lang">
<li>ESP
<ul>
<li>ENG</li>
<li>DEU</li>
</ul>
</ul>
</nav>
My current implementation (almost there):
header .wrapper > div nav ul.main > li.active > ul {
background: none repeat scroll 0 0 #FFFFFF;
display: block;
height: 141px;
left: 0;
position: absolute;
top: 60px;
width: 100%;
}
Problem when I set li.active to position:relative (very far from there):
So question is,
How can the position:absolute child be bigger (and left,right properties respond to the layout) with the parent being position:relative???
Is my only chance to take the list out of the tree?
What you are trying to do is set the width based on a parent's parent. That is the problem. But as you commented, the menu has a fixed width, which makes it easier.
I cleaned the HTML up to this:
<ul class="nav">
<li>item 1</li>
<li>item 2
<ul>
<li>List 2.1
<ul>
<li>item 2.1.1</li>
<li>item 2.1.2</li>
<li>item 2.1.3</li>
</ul>
</li>
<li>List 2.2
<ul>
<li>item 2.2.1</li>
<li>item 2.2.2</li>
<li>item 2.2.3</li>
</ul>
</li>
<li>list 2.3
<ul>
<li>item 2.3.1</li>
<li>item 2.3.2</li>
<li>item 2.3.3</li>
</ul>
</li>
</ul>
</li>
<li>item 3</li>
<li>item 4</li>
</ul>
Then made this CSS:
body, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
list-style: none;
margin: 0;
padding: 0;
width: 500px; /* needs to be a fixed width */
background: lightblue;
}
.nav > li {
display: inline-block;
background: lightblue;
margin-right: -4px;
padding: 15px;
}
.nav > li > ul {
position: absolute;
display: table;
width: 500px; /* same width as .nav */
left: 0;
margin-top: 15px;
background: lightgreen;
}
.nav > li > ul > li {
display: table-cell;
width: 33%;
}
Check this demo: http://jsfiddle.net/LinkinTED/4a98c/
You'll probably want to show the submenu on a :hover effect, check http://jsfiddle.net/LinkinTED/4a98c/2/
I've got this menu wich is setup inline and has dropdowns.
The inner ul has a background.
Each dropdown li has a :hover that changes the background of the li:
<div id="navMain">
<ul>
<li>Forside
<ul>
<li>1111111111111</li>
<li>Link 1-2</li>
<!-- etc. -->
</ul>
</li>
<li>Om Os
<ul>
<li>Link 2-1</li>
<li>Link 2-2</li>
<!-- etc. -->
</ul>
</li>
<li>Link 3
<ul>
<li>Link 3-1</li>
<li>Link 3-2</li>
<!-- etc. -->
</ul>
</li>
</ul>
</div>
Problem is, that when one of the submenu li is longer than the others, it will only expand itself, and not the other li ofcourse.
This results in the :hover effect having different lengths.
So how would i make all li in each inner ul the same size as the widest one?
Here you can find the CSS if needed.
Here. Notice I added a class to your menu li's and that I added a body background to your css, because I couldn't notice your menus. Finally the trick is done by making the li elements 100% width
body {
background-color: green;
}
.menu li {
width: 100%
}
#navMain {}
#navMain ul {
padding: 0;
margin: 0;
z-index: 2;
}
#navMain ul li {
margin-right: 5px;
text-align: center;
}
#navMain li a {
display: block;
text-decoration: none;
color: white;
padding-left: 10px;
padding-right: 10px;
}
#navMain li a:hover {
background-color: black;
}
#navMain ul li:last-child {
margin-right: 0px;
}
#navMain li {
position: relative;
float: left;
list-style: none;
margin: 0;
padding: 0;
font-size: 17px;
font-weight: bold;
color: #fff;
}
#navMain ul ul {
position: absolute;
top: 20px;
visibility: hidden;
background-image: url(img/alphaBg.png);
}
#navMain ul li ul li {
font-size: 12px;
margin-right: 0px;
text-align: left;
}
#navMain ul li ul li:first-child {
padding-top: 5px;
}
#navMain ul li:hover ul {
visibility: visible;
}
<html>
<head>
</head>
<body>
<div id="navMain">
<ul>
<li>Forside
<ul class="menu">
<li>1111111111111</li>
<li>Link 1-2</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
</ul>
</li>
<li>Om Os
<ul class="menu">
<li>Link 2-1</li>
<li>Link 2-2</li>
<li>Link 2-3</li>
</ul>
</li>
<li>Link 3
<ul class="menu">
<li>Link 3-1</li>
<li>Link 3-2</li>
<li>Link 3-3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
li {display:block} will make the list items as wide as the widest item in that parent container
body {
background: #ededed;
margin: 0 auto;
}
.wrapper {
width: 720px;
border: 1px solid red;
padding: 5px;
}
.menu {
padding: 0;
margin: 0;
width: 100%;
border-bottom: 0;
}
.menu li {
display: table-cell;
width: 1%;
float: none;
border: 1px solid green;
margin: 2px;
padding: 10px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="wrapper">
<ul class="menu">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
</div>
</body>
</html>