I'm sorry to ask this question because it has been largely posted, but I checked a lot of links and didn't solve it yet. I have a navbar with 2 elements and I cannot center it in the middle of the nav.
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
padding-left: 18px;
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
display:block;
text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
list-style: none;
display: block;
text-align: center;
}
#menu ul {
width: 100%;
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu a {
display: block;
line-height: 50px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
<nav id="menu">
<input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label>
<ul>
<li><a href='/'>DASHBOARD</a></li>
<li><a href='/model'>MODEL</a></li>
</ul>
</nav>
Probably in the large number of css elements I'm not able to see where the code is not working.
I posted the code here:
codepen
You should remove the left padding from the main #menu element, set the ul's display to inline-block and the width to auto (just remove the width property).
This will work because the #menu element has text-align: center. the ul will be centered since its width is not 100% (because width is set to auto and the display to inline-block).
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
padding-left: 0; // remove this
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
display:block;
text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
list-style: none;
display: block;
text-align: center;
}
#menu ul {
display: inline-block; // and set this
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu a {
display: block;
line-height: 50px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
You can use flex positions.
Use property justify-content : center to center all children div inside a parent div. It's useful to distribute the space between or around the elements.
This will also make your CSS code lighter. The more CSS, the more difficult it is.
It's also good for responsive design.
I have also removed some CSS property. This code can be further improved and reduced. Good luck !
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
// padding-left: 18px;
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
// display:block;
// text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
// list-style: none;
// display: block;
text-align: center;
}
#menu ul {
width: 100%;
display: flex;
justify-content: center;
}
#menu li {
// float: left;
margin : 0px;
display: inline;
// position: relative;
}
#menu a {
display: block;
line-height: 51px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
<nav id="menu">
<input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label>
<ul>
<li><a href='/'>DASHBOARD</a></li>
<li><a href='/model'>MODEL</a></li>
</ul>
</nav>
I am trying to make my navigation bar scroll with the website so it is visible at all times.
When testing this locally, it works perfectly for mobile and desktop. However, when I published this code live on my website the nav bar doesn't follow the scroll (only on mobile). I thought I was missing the position:sticky attribute below the media tag, but that didn't seem to fix it either. Any help anyone can offer would be great, I'm very new to this so I might be missing something obvious. Also if there is an easier way to do this entirely, let me know.
Here's my CSS and HTML:
.nav-toggle{
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: auto;
min-height: 4rem;
line-height: 4rem;
position: sticky;
top: 0;
display:block;
width: 100%;
background-color: #ffffff;
z-index: 2;
}
.links{
float: right;
background-color: #ffffff;
padding-right: 69px;
}
.links a{
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color:#58606C;
line-height: 4rem;
}
label {
font-size: 26px;
line-height: 70px;
margin-right: 40px;
display: none;
color: #63C3EF;
}
#toggle{
display: none;
}
.logo-mobile {
display: block;
float: left;
width: 48px;
margin-left:120px;
line-height: 4rem;
}
#media only screen and (max-width: 700px) {
.nav-toggle{
position: sticky;
top: 0;
}
label {
display: block;
cursor: pointer;
width: 26px;
float: right;
margin-right: 15px;
}
.logo-mobile{
width: 35px;
height: 35px;
line-height: 4rem;
display: block;
float: left;
margin-left: 15px;
padding-top: 15px;
}
.links{
text-align: center;
width: 100%;
display: none;
padding-right: 0;
}
.links a {
clear: right;
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
.links .current { /*the state when the link is active*/
color: #63C3EF;
}
}
#toggle:checked + .links {
display: block;
}
<div class="nav-toggle">
<img src="images/logom#2x.png" alt="KM">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="links">
Work
About
</div>
</div>
I'm fairly new to html, and when I tried to create a webpage, I encountered a problem. I managed to make a navigation bar with a drop down menu directly under the "Games" section, but if I scroll down and open the drop down menu, it no longer opens directly under the navigation bar. This is my HTML code.
<div class="wrapper">
<div id="main-title">
<header>
<h1>Max Reviews</h1>
</header>
</div> <!-- Title box-->
<div id="nav"> <!-- Navigation Bar -->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About Me</li> <!-- Link to about page -->
<li class="drop">
<p>Games</p>
<div class="drop-content">
<p>Red Faction: Guerrilla</p> <!-- Contains links to the respective pages -->
<p>Way of the Samurai 3</p>
<p>Singularity</p>
</div>
</li>
<li>Reviews</li>
<li>External Store</li> <!-- Link to external site -->
<li>Videos</li> <!-- Contains links to Youtube -->
</ul>
</nav>
</div>
<div class="image"> <!-- Banner-->
<a href="singularity.html">
<img src="modified singularity aging 1.jpg" alt="singularity">
<h2><span>Recommended Game of the Month</span></h2>
</a>
</div>
<div id="home-content"><p>Learn more about the site ☛here☚</p></div>
<div id="footer">
<p>© Copyright 2016-2017. All images here were taken and edited by me. All rights reserved. Games featured here might not be suitable for all audience.</p>
</div>
</div>
And this is the stylesheet.
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
margin: 0;
width: 100%;
background-color: #FFFFFF;
padding: 0px;
overflow-x: hidden;
}
body {
transition: background 600s ease-in-out;
}
body:hover {
background-color: #4B0101;
}
/*main title*/
#main-title {
background-color: #33B2E7;
color: #FFFFFF;
position: relative;
top: 25px;
left: 20px;
padding: 10px;
margin-left: 10px;
display: inline-block;
transition: color 1s, transform 1s;
transition-delay: 2s;
}
#main-title:hover {
color: black;
transform: rotate(360deg);
}
/* Nav */
#nav nav{
padding-top: 100px;
margin-bottom: 0;
}
#nav ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 40px;
display: inline-block;
}
#nav li {
float: left;
width: 16%;
}
li a, .dropbtn {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
}
.active {
background-color: #6CCC0A;
padding-right: 50px;
}
li a:hover, .drop:hover .dropbtn {
background-color: #BFA811;
}
a {
padding-top: 10px;
padding-bottom: 10px;
}
li.drop {
display: inline-block;
}
.drop-content {
display: none;
position: absolute;
background-color: #970707;
min-width: 50px;
box-shadow: 0px 8px 16px 0px #000000;
z-index: 100;
}
.drop-content a {
color: #FFFFFF;
padding: 15px 20px;
display: block;
text-align: left;
}
.drop-content a:hover {
background-color: #02BBC4
}
.drop:hover .drop-content {
display: block;
position: fixed;
top: 155px;
border: 1px solid black;;
}
/*banner*/
.image {
position: relative;
width: 100%;
}
.image h2 {
position: absolute;
top: 600px;
text-align: center;
width: 100%;
right: 350px;
}
.image h2 span {
color: #FFFFFF;
font: Arial, Calibri, Sans-serif;
background: #000000;
padding: 10px;
}
.image h2:hover span {
background-color: #003316;
}
.button {
position: absolute;
top: 1013px;
left: 700px;
padding: 16px 32px;
text-align: center;
margin: 4px 2px;
display: inline-block;
cursor: pointer;
background-color: rgb(41,120,104);
color: rgb(240,144,22);
font-family: Cambria, Times New Roman, serif;
font-size: 20px;
}
/*content*/
#home-content {
position: relative;
padding: 20px;
text-align: center;
margin-left: 90px;
display: block;
color: #8A0707
}
#home-content a {
color: #09922A
}home-content a:visited {
color: #000000
}
/*Footer*/
#footer {
background: #000000;
width: 100%;
height: 40px;
position: relative;
bottom: 0;
left: 0;
padding-top: 10px;
overflow: hidden;
}
#footer p {
font-family: arial, calibri, sans-serif;
color: #FFFFFF;
text-align: center;
}
#aboutme h2 {
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
font-family: Cambria, Calibri, sans-serif;
font-size: 20px;
color: #000000;
}
#aboutme article {
padding-top: 20px;
position: relative;
margin-left: 25%;
margin-right: 25%;
display: inline-block;
font-family: arial, cambria, serif;
line-height: 200%;
color: #777000;
text-align: center;
border: 2px solid #000000;
padding: 10px;
}
#gallery-title {
text-align: center;
font-family: Cambria, calibri, sans-serif;
padding-top: 20px;
}
#image-1 {
text-align: center;
margin: 0 25%;
padding: 20px;
}
.img-desc-1 {
padding: 20px;
color: #047615;
}
#image-2 {
text-align: center;
margin: 0 25%;
border: 2px solid #262020;
padding: 20px;
}
#prompt-text {
text-align: center;
padding-top: 30px;
font-family: cambria, calibri, sans-serif;
}
.image-container img{
height: 300px;
width: 300px;
padding-left: 60px;
padding-top: 60px;
}
.image-container p{
padding-left: 80px;
font-family: Arial, cambria, sans-serif;
color: #560404;
text-decoration: none;
}
.image-container {
display: block;
text-align: center;
padding-left: 20px;
}
#image1 {
padding-right: 60px;
padding-bottom: 10%
}
#image2 {
padding-right: 60px;
padding-bottom: 10%;
}
#image3 {
padding-bottom: 0;
margin: 0;
}
.gameimages {
padding-bottom: 15%;
text-align: center;
}
.gameimages p {
padding-top: 20px;
}
.gameimages h3 {
text-align: center;
font-family: cambria, times new roman, sans-serif
}
#side-nav {
height: 200px;
float: right;
bottom: 1500px;
right: 3%;
padding: 10px;
background-color: #8C3406;
display: block;
position: relative;
text-align: center;
}
Please help me as I've been trying to solve this problem for 2 days. Also, this is my first time posting a question here, so forgive me if I indented my code wrongly, or if I inadvertently violated some of the rules of Stack Overflow.
The reason for this behaviour is that your drop-content has position:fixed on hover.
From MDN:
…an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor… Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.
Working example on JSFiddle and here is what I've changed:
#nav ul {
/*overflow: hidden;*/
}
.drop:hover .drop-content {
/*position: fixed;
top: 155px;*/
position: absolute;
}
Update CSS to
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
margin: 0;
width: 100%;
background-color: #FFFFFF;
padding: 0px;
overflow-x: hidden;
}
body {
transition: background 600s ease-in-out;
}
body:hover {
background-color: #4B0101;
}
/*main title*/
#main-title {
background-color: #33B2E7;
color: #FFFFFF;
position: relative;
top: 25px;
left: 20px;
padding: 10px;
margin-left: 10px;
display: inline-block;
transition: color 1s, transform 1s;
transition-delay: 2s;
}
#main-title:hover {
color: black;
transform: rotate(360deg);
}
/* Nav */
#nav nav{
padding-top: 100px;
margin-bottom: 0;
}
#nav ul {
list-style-type: none;
margin: 0;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 40px;
display: inline-block;
}
#nav li {
float: left;
width: 16%;
}
li a, .dropbtn {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
}
.active {
background-color: #6CCC0A;
padding-right: 50px;
}
li a:hover, .drop:hover .dropbtn {
background-color: #BFA811;
}
a {
padding-top: 10px;
padding-bottom: 10px;
}
li.drop {
display: inline-block;
}
.drop-content {
display: none;
position: absolute;
background-color: #970707;
min-width: 50px;
box-shadow: 0px 8px 16px 0px #000000;
z-index: 100;
}
.drop-content a {
color: #FFFFFF;
padding: 15px 20px;
display: block;
text-align: left;
}
.drop-content a:hover {
background-color: #02BBC4
}
.drop:hover .drop-content {
display: block;
}
/*banner*/
.image {
position: relative;
width: 100%;
}
.image h2 {
position: absolute;
top: 600px;
text-align: center;
width: 100%;
right: 350px;
}
.image h2 span {
color: #FFFFFF;
font: Arial, Calibri, Sans-serif;
background: #000000;
padding: 10px;
}
.image h2:hover span {
background-color: #003316;
}
.button {
position: absolute;
top: 1013px;
left: 700px;
padding: 16px 32px;
text-align: center;
margin: 4px 2px;
display: inline-block;
cursor: pointer;
background-color: rgb(41,120,104);
color: rgb(240,144,22);
font-family: Cambria, Times New Roman, serif;
font-size: 20px;
}
/*content*/
#home-content {
position: relative;
padding: 20px;
text-align: center;
margin-left: 90px;
display: block;
color: #8A0707
}
#home-content a {
color: #09922A
}home-content a:visited {
color: #000000
}
/*Footer*/
#footer {
background: #000000;
width: 100%;
height: 40px;
position: relative;
bottom: 0;
left: 0;
padding-top: 10px;
overflow: hidden;
}
#footer p {
font-family: arial, calibri, sans-serif;
color: #FFFFFF;
text-align: center;
}
#aboutme h2 {
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
font-family: Cambria, Calibri, sans-serif;
font-size: 20px;
color: #000000;
}
#aboutme article {
padding-top: 20px;
position: relative;
margin-left: 25%;
margin-right: 25%;
display: inline-block;
font-family: arial, cambria, serif;
line-height: 200%;
color: #777000;
text-align: center;
border: 2px solid #000000;
padding: 10px;
}
#gallery-title {
text-align: center;
font-family: Cambria, calibri, sans-serif;
padding-top: 20px;
}
#image-1 {
text-align: center;
margin: 0 25%;
padding: 20px;
}
.img-desc-1 {
padding: 20px;
color: #047615;
}
#image-2 {
text-align: center;
margin: 0 25%;
border: 2px solid #262020;
padding: 20px;
}
#prompt-text {
text-align: center;
padding-top: 30px;
font-family: cambria, calibri, sans-serif;
}
.image-container img{
height: 300px;
width: 300px;
padding-left: 60px;
padding-top: 60px;
}
.image-container p{
padding-left: 80px;
font-family: Arial, cambria, sans-serif;
color: #560404;
text-decoration: none;
}
.image-container {
display: block;
text-align: center;
padding-left: 20px;
}
#image1 {
padding-right: 60px;
padding-bottom: 10%
}
#image2 {
padding-right: 60px;
padding-bottom: 10%;
}
#image3 {
padding-bottom: 0;
margin: 0;
}
.gameimages {
padding-bottom: 15%;
text-align: center;
}
.gameimages p {
padding-top: 20px;
}
.gameimages h3 {
text-align: center;
font-family: cambria, times new roman, sans-serif
}
#side-nav {
height: 200px;
float: right;
bottom: 1500px;
right: 3%;
padding: 10px;
background-color: #8C3406;
display: block;
position: relative;
text-align: center;
}
2 changes done.
Removed overflow:hidden in #nav ul
Keot display:block only in .drop:hover .drop-content
When hovering over the links in drop2 div, the entire drop2 div moves upward a few pixels. Same problem with drop3.
Any ideas why the div is shifting up when I hover over it? Thank you, any advice much appreciated.
#nav {
background-color: #373737;
float: left;
height: 30px;
padding: 0px 0px 0px 0px;
width: 970px;
}
.nav a {
display: block;
}
.nav ul li a {
position: relative;
}
a {
text-decoration: none;
}
a.item {
color: white;
}
.item {
position: relative;
}
a.item:hover {
background-color: #dcd0c0;
height: 30px;
color: #373737;
font-weight: bold;
}
.menu {
list-style-type: none;
margin: auto;
width: 970px;
text-align: center;
}
.nav .items {
display: inline;
float: left;
margin: 0px 100px 0px 100px;
padding: 0;
text-align: center;
width: 82px;
}
.drop2 {
display: none;
text-align: left;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
.items:hover .drop2 {
display: block;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #f4f4f4;
position: relative;
z-index: 99;
}
.drop3 {
display: none;
text-align: left;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
width: 150px;
}
.items:hover .drop3 {
display: block;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #f4f4f4;
position: relative;
z-index: 99;
}
.drop2 > a {
color: #373737;
}
.drop3 > a {
color: #373737;
}
.drop2 > a:hover {
font-weight: bold;
}
.drop3 > a:hover {
font-weight: bold;
}
<div id="nav">
<div class="nav">
<ul class="menu">
<li class="items">
Photos
</li>
<li class="items">
Locations
<div class="drop2">
Bays
Lakes
Pacific Ocean
</div>
</li>
<li class="items">
Catches
<div class="drop3">
Bass
Other
</div>
</li>
</ul>
</div>
</div>
Add line-height: 30px; to your #nav tag in css.
jsfiddle
I am using a ul & li a bit like a select dropdown to trigger a JS function (not shown).
It's working fine - except the menu items appear BEHIND divs that are shown below them.
I've mocked up the problem here: http://jsfiddle.net/bf8ugef7/1/
I'm fiddling with z-index and position:absolute but can't see how to make it work.
Can anyone help?
Here is the HTML and CSS:
body {
font-family: sans-serif;
color: gray;
font-weight: 100;
}
div, li {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
li {
color: #333333;
text-decoration: none;
/* background-image: url("images/mullion.gif"); */
}
div.images {
border: 1px solid #555555;
/* padding-left: 5px; */
width: 100%;
float: left;
clear: left;
margin-bottom: 20px;
/*
background-image: url("images/iMullion.gif");
background-repeat: no-repeat;
*/
}
div.lowerText {
width: 100%;
}
div.btn {/* +filter */
float: right;
width: 195px;
cursor: default;
text-align: right;
/* margin-left: 1px; */
display: inline-block;
}
div.btn1 {
float: left;
width: 153px;
cursor: default;
text-align: center;
margin-left: 1px;
display: inline-block;
position: absolute;
color: black;
background-color: #79c1ee;
left: 182px;
}
div.btn2 {
float: left;
width: 20px;
display: inline-block;
color: white;
font-weight: 100;
text-align: center;
background-color: white;
cursor: default;
position: absolute;
left: 162px;
z-index: 100;
}
div.btn2 ul {
list-style: none;
position: absolute;
display: block;
margin: 0px;
padding: 0px;
z-index: 100;
}
div.btn2 ul li {
display: none;
cursor: pointer;
color: white;
height: 25px;
background-color: #79c1ee;
margin-top: 1px;
z-index: 100;
}
div.btn2 ul li:first-child {
margin-top: 0px;
display: inline-block;
width: 20px;
z-index: 100;
}
div.btn2 ul:hover {
height: 200px;
}
div.btn2 ul:hover li {
display: block;
z-index: 100;
}
div.btn2 ul li:hover {
background-color: #13A3E2;
z-index: 100;
}
/*
div.btn2 ul li:hover {
display: block;
width: 20px;
height: 100px;
}
*/
div.btn3 {
margin-left: 1px;
float: left;
width: 20px;
display: inline-block;
vertical-align: top;
text-align: center;
font-weight: 400;
color: white;
background-color: #13A3E2;
position: absolute;
left: 336px;
cursor: pointer;
}
div.btn3:hover {
background-color: red;
}
div.btn4 {
/* border: 1px solid black; */
padding-left: 5px;
float: left;
width: 153px;
display: inline-block;
color: #444444;
cursor: default;
background-color: white;
}
div.attr {
padding-left: 5px;
color: #444444;
background-color: #79C1ED;
float: right;
clear: none;
display: inline-block;
text-align: left;
}
div.filters {
width: 100%;
line-height: 1.8;
overflow: hidden;
display: block;
font-size: 14px;
text-decoration: none;
float: left;
}
div.toptext {
line-height: 2.2;
display: block;
max-height: 35px;
color: #444444;
background-color: #555555;/* matches border color */
color: white;
width: 100%;
padding-left: 5px;
cursor: not-allowed;
/* border: 1px solid pink; */
}
div.leftnav {
width: 350px;
float: left;
clear: left;
}
div#container {
padding: 0px;
margin: 0px;
}
<div class="leftnav">
<div class="images">
<div class="toptext">Filters
<div class="btn">+ filter</div>
</div>
<div id="container">
<div class="filters rem" id="f12">
<div class="btn4" id="b4f12">Pupil name</div>
<div class="btn2" id="b2f12">
<ul>
<li id="ddf_12_0">=</li>
<li id="ddf_12_1">></li>
</ul>
</div>
<div class="btn1" id="b1f12">Joe Bloggs</div>
<div class="btn3" id="if12">x</div>
</div>
<div class="filters rem" id="f13">
<div class="btn4" id="b4f13">Pupil name</div>
<div class="btn2" id="b2f13">
<ul>
<li id="ddf_13_0">=</li>
<li id="ddf_13_1">></li>
</ul>
</div>
<div class="btn1" id="b1f13">Bill Clinton</div>
<div class="btn3" id="if13">x</div>
</div>
</div>
</div>
</div>
Thanks
Emma
Try this code:
div.btn2 {
float: left;
width: 20px;
display: inline-block;
color: white;
font-weight: 100;
text-align: center;
background-color: white;
cursor: default;
left: 162px;
}
div.btn2 ul {
display: block;
margin: 0;
padding: 0;
}
div.btn2 ul li {
display: none;
cursor: pointer;
color: white;
height: 25px;
background-color: #79c1ee;
}
div.btn2 ul li:first-child {
display: inline-block;
border-top: none;
width: 20px;
}
div.btn2:hover li {
display: block;
position: absolute;
width: 20px;
border-top: 1px solid #fff;
}
div.btn2:hover li:first-child {
position: relative;
}
div.btn2 ul li:hover {
background-color: #13A3E2;
}
# Claudiu Yes it should be comment, but i dont have enough points to add comments
div.btn2 {
width: 20px;
display: inline-block;
color: white;
font-weight: 100;
text-align: center;
cursor: pointer;
left: 162px;
}
div.btn2 ul {
display: block;
margin: 0;
padding: 0;
}
div.btn2 ul li {
display: none;
cursor: pointer;
color: white;
height: 25px;
background-color: #79c1ee;
}
div.btn2 ul li:first-child {
display: inline-block;
width: 20px;
}
div.btn2:hover li {
display: block;
position: absolute;
width: 20px;
background: #000;
}
div.btn2:hover li:first-child {
position: relative;
}
div.btn2 ul li:hover {
background-color: #13A3E2;
}
i have updated the fiddle