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
Related
The navbar I created overlaps when I switch my site to a mobile view.
I tried making it fit-content, but it still overlaps. The part that overlaps is the listed items
#navBar {
overflow: hidden;
text-align: center;
border-top: double black 2px;
}
#navBar ul {
padding: 0;
list-style: none;
width: fit-content;
}
#navBar li {
display: inline;
padding-top: 23px;
position: relative;
}
#navBar a {
font-size: 20px;
padding-right: 20px;
text-decoration: none;
text-align: center;
border: 4px solid lime;
padding-bottom: 10px;
padding-top: 20px;
padding-left: 10px;
font-family: American Typewriter, serif;
color: #262626;
text-transform: uppercase;
border-radius: 0px 0px 25px 25px;
}
#navBar a:hover {
color: lime;
}
#navBar a::before {
content: '';
display: block;
height: 5px;
width: 100%;
background-color: lime;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
#navBar::hover::before {
width: 100%;
}
<nav id="navBar">
<div class="bar">
<ul>
<li>Tab1</li>
<li>Tab2 </li>
<li> Tab3</li>
</ul>
</div>
</nav>
I expect the navbar items to be side by side but the actual result in them overlapping.
You can use inline-flex for that
change
#navBar ul {
padding: 0;
margin: 0; /* reset margin */
list-style: none;
width: fit-content;
}
#navBar li {
display: inline-flex; /* change to inline-flex and remove the padding */
position: relative;
}
#navBar {
overflow: hidden;
text-align: center;
border-top: double black 2px;
}
#navBar ul {
padding: 0;
margin: 0;
list-style: none;
width: fit-content;
}
#navBar li {
display: inline-flex;
position: relative;
}
#navBar a {
font-size: 20px;
padding-right: 20px;
text-decoration: none;
text-align: center;
border: 4px solid lime;
padding-bottom: 10px;
padding-top: 20px;
padding-left: 10px;
font-family: American Typewriter, serif;
color: #262626;
text-transform: uppercase;
border-radius: 0px 0px 25px 25px;
}
#navBar a:hover {
color: lime;
}
#navBar a::before {
content: '';
display: block;
height: 5px;
width: 100%;
background-color: lime;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
#navBar::hover::before {
width: 100%;
}
<nav id="navBar">
<div class="bar">
<ul>
<li>Tab1</li>
<li>Tab2 </li>
<li> Tab3</li>
</ul>
</div>
</nav>
I'm having a little positioning error and I'm sure it's a simple fix, but after trying lots of different combinations of margin and padding, I can't get it perfect. The problem is I can't seem to get my drop-up menu (footer-nav ul ul) to move down 10px when it appears by hovering over #info. If I remove the margin from the css under #info, it drops the footer-nav ul ul down 10px where I need it, but it removes the 10px margin between the black box (streaks-content) and the footer-nav. Anyone know how to fix this? I appreciate it so so much! I don't know what I would do without you geniuses!
Here is the JS Fiddle: https://jsfiddle.net/fe2zk4L8/19/
Here is the html:
<header id="header">
<div id="nav">
<ul>
<li id="projects">PROJECTS
<ul>
<li id="one"> ONE </li>
<li id="two"> TWO </li>
<li id="three"> THREE </li>
<li id="four"> FOUR </li>
</ul>
</li>
</ul>
</div>
</header>
<div id="color">
<div id="streaks-content">
</div>
</div>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="info">INFO
<ul>
<li id="twitter">
TWITTER
</li>
<li id="instagram">
INSTAGRAM
</li>
<li id="email">
EMAIL
</li>
</ul>
</li>
</ul>
</div>
</footer>
Here is the css:
a {
text-decoration: none;
color: inherit;
display: block;
}
#header {
width: 100%;
position: fixed;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}
#nav {
width: 100%;
background-color: #FFFFFF;
}
#projects {
display: inline-block;
padding-bottom: 10px;
}
#nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#nav ul li:hover>ul {
display: block;
position: absolute;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#one {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#one:hover {
background-color: black;
color: white;
}
#two {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#two:hover {
background-color: black;
color: white;
}
#three {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#three:hover {
background-color: black;
color: white;
}
#four {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#four:hover {
background-color: black;
color: white;
}
#footer {
width: 100%;
background-color: white;
position: fixed;
margin: 0px;
bottom: 0;
left: 0;
text-align: center;
z-index: 11;
}
#footer-nav {
width: 100%;
}
#info {
display: inline-block;
padding-top: 10px;
}
#footer-nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#footer-nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#twitter {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#twitter:hover {
background-color: black;
color: white;
}
#email {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#email:hover {
background-color: black;
color: white;
}
#instagram {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#instagram:hover {
background-color: black;
color: white;
}
#color {
width: 100%;
align-content: center;
}
#streaks-content {
background-color: black;
width: 300px;
height: 1000px;
display: block;
margin: 0 auto;
}
Please add to the following CSS selector #footer-nav ul li:hover>ul that rule padding-bottom: 0;
so, in total you should have:
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
padding-bottom: 0;
}
I was wondering but I have been spending a lot of time trying to find a way to make my li from my ul stretch across but I seem not to be able to do it. It's very similar to the nav bar of This website and This website.I am asking if someone can help me with this.
Thank you. Best I can provide is a basic nav hover bar
.dropdown-btn {
width: 100%;
height: 50px;
background: white;
line-height: 50px;
display: none;
}
nav {
width: 100%;
height: 50px;
background-color: #d60d8c;
margin-bottom: 1px;
position: sticky;
top: 0;
padding: 0px 0px;
border: none;
}
ul {
text-indent: 0px;
}
nav:hover {
height: 50px;
}
.navbar-tab {
display: block;
}
.hover-list {
position: absolute;
}
.navbar-tab-1 {
background: #d60d8c;
float: left;
border: none;
}
.navbar-tab-1+.navbar-tab-1 {
border-bottom: none;
}
.hover-list {
border-top: black 3px solid;
}
.navbar-tab {
padding-left: 20px;
display: block;
}
.navbar-tab {
max-width: 1240px;
}
.navbar-tab-1 {
padding-right: 68px;
width: auto;
}
.hover-list li {
background-color: #e2e2e2;
border-bottom: 1px white solid;
font-size: 15px;
text-indent: 20px;
height: 35px;
line-height: 35px;
width: 100vw;
border-top: none;
float: left;
}
ul li ul li {
display: block;
}
ul li {
font-size: 19px;
}
ul {
padding: 0px;
list-style: none;
font-family: arial;
margin: auto;
}
.navbar-tab-1:hover {
color: black;
transition-duration: .2s;
}
ul li {
font-family: 'Raleway', sans-serif;
font-weight: 400;
line-height: 50px;
list-style: none;
}
ul li a {
text-decoration: none;
color: black;
}
ul li ul li{
display: none;
transition-duration:
}
.hover-list li:hover{
background-color: #f5f5f0;
transition-duration: .2s;
}
<nav id="navbar">
<div class="dropdown-btn">Go To...</div>
<ul class="navbar-tab">
<li class="navbar-tab-1 selected">Test1</li>
<li class="navbar-tab-1 select">
Test2
<ul class="hover-list select">
<li>Item1</li>
</ul>
</li>
</ul>
</nav>
Maybe something you are looking for
body {
margin:0;
}
.dropdown-btn {
width: 100%;
height: 50px;
background: white;
line-height: 50px;
display: none;
}
nav {
width: 100%;
height: 50px;
background-color: #d60d8c;
margin-bottom: 1px;
position: sticky;
top: 0;
padding: 0px 0px;
border: none;
}
ul {
padding-left: 0;
position: relative;
list-style: none;
margin-bottom: 0;
}
nav:hover {
height: 50px;
}
.navbar-tab {
display: block;
}
.hover-list {
position: fixed;
max-height: 0;
transition: max-height 1s;
padding: 0;
width: 100vw;
overflow: hidden;
left: 0;
top: 66px;
}
.hover-list > li {
width: 100%;
}
.navbar-tab-1 {
background: #d60d8c;
float: left;
border: none;
}
.navbar-tab-1+.navbar-tab-1 {
border-bottom: none;
}
.navbar-tab {
padding-left: 20px;
display: block;
}
.navbar-tab {
max-width: 1240px;
}
.navbar-tab-1 {
padding-right: 68px;
width: auto;
}
.hover-list li {
background-color: #e2e2e2;
border-bottom: 1px white solid;
font-size: 15px;
text-indent: 20px;
height: 35px;
line-height: 35px;
border-top: none;
float: left;
}
ul li ul li {
display: block;
}
ul li {
font-size: 19px;
}
ul > li:hover ul {
max-height: 500px;
}
<nav id="navbar">
<div class="dropdown-btn">Go To...</div>
<ul class="navbar-tab">
<li class="navbar-tab-1 selected">Test1</li>
<li class="navbar-tab-1 select">Test2
<ul class="hover-list select">
<li><a>Item1</a></li>
</ul>
</li>
</ul>
</nav>
This is a simple dropdown navigation menu. The problem here that the dropdown menu doesn't appear if i don't give it a fixed height. Is there a way to make it appear without giving it a fixed height? And if there any other modifications or ameliorations that can be useful please tell me. Thank you.
HTML:
<nav>
<ul class="mainmenu">
<li>Browsers
<div class="submenubig">
<div class="submenusmall Browsers">
<ul>
<li><span>Top Browsers</span>
<ul class="topbrowsers">
<li>Firefox</li>
<li>Chrome</li>
<li>Safari</li>
<li>Opera</li>
<li>Edge</li>
</ul>
</li>
<li><span>Other Browsers</span>
<ul class="otherbrowsers">
<li>Dooble</li>
<li>Coowon</li>
<li>Blackhawk</li>
<li>Beamrise</li>
<li>NetGroove</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
CSS:
*{
box-sizing: border-box;
font-family: Arial;
}
nav{
border: 5px solid orange;
height: 1000px;
}
ul{
list-style: none;
padding: 0;
}
.mainmenu{
margin: 20px auto;
display: table;
width: 1000px;
position: relative;
background-color: #1E1E1E;
}
.mainmenu > li{
display: table-cell;
}
a{
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.mainmenu > li > a{
font-size: 1.3em;
padding: 0;
color: white;
letter-spacing: 0.1em;
}
.mainmenu > li > a:hover{
color: aqua;
}
.mainmenu > li:hover .submenubig{
border-bottom: 5px solid yellow;
max-height: 1000px;
}
.submenubig{
overflow: hidden;
position: absolute;
left: 0;
width: 100%;
transition: 0.2s all ease-in;
max-height: 0px;
background: #555;
}
.submenusmall a:hover{
color: yellow;
text-decoration: underline;
}
/*--------------------------------------------------*/
span{
font-size: 1.3em;
display: block;
text-align: center;
color: burlywood;
letter-spacing: 0.1em;
}
.submenusmall{
padding-top: 20px;
padding-left: 60px;
}
.submenusmall a{
color: white;
font-size: 1.1em;
letter-spacing: 0.1em;
}
.submenusmall > ul{
height: 190px;
/*This is what i'm talking about*/
}
.submenusmall > ul > li{
position: relative;
float: left;
padding: 0 10px;
color: white;
margin-right: 90px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.topbrowsers{
position: absolute;
left: 0;
width: 100%;
top: 45px;
padding: 0;
}
.topbrowsers li{
display: block;
width: 100%;
border-bottom: 1px solid grey;
}
.otherbrowsers{
position: absolute;
width: 100%;
left: 0;
top: 45px;
padding: 0;
}
.otherbrowsers li{
display: block;
width: 100%;
border-bottom: 1px solid grey;
}
I think the problem is that the unordered lists with the .topbrowsers and .otherbrowsers classes are set with position absolute:
The element is removed from the normal document flow; no space is
created for the element in the page layout.
You could try this:
*{
box-sizing: border-box;
font-family: Arial;
}
nav{
border: 5px solid orange;
height: 1000px;
}
ul{
list-style: none;
padding: 0;
}
.mainmenu{
margin: 20px auto;
display: table;
width: 1000px;
position: relative;
background-color: #1E1E1E;
}
.mainmenu > li{
display: table-cell;
}
a{
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.mainmenu > li > a{
font-size: 1.3em;
padding: 0;
color: white;
letter-spacing: 0.1em;
}
.mainmenu > li > a:hover{
color: aqua;
}
.mainmenu > li:hover .submenubig{
border-bottom: 5px solid yellow;
max-height: 1000px;
}
.submenubig{
overflow: hidden;
position: absolute;
left: 0;
width: 100%;
transition: 0.2s all ease-in;
max-height: 0px;
background: #555;
}
.submenusmall a:hover{
color: yellow;
text-decoration: underline;
}
/*--------------------------------------------------*/
span{
font-size: 1.3em;
display: block;
text-align: center;
color: burlywood;
letter-spacing: 0.1em;
}
.submenusmall{
padding-top: 20px;
padding-left: 60px;
}
.submenusmall a{
color: white;
font-size: 1.1em;
letter-spacing: 0.1em;
}
.submenusmall > ul{
// height: 190px;
/*This is what i'm talking about*/
}
.submenusmall > ul > li{
position: relative;
float: left;
padding: 0 10px;
color: white;
margin-right: 90px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.topbrowsers{
// position: absolute;
// left: 0;
width: 100%;
// top: 45px;
padding: 30px 0;
}
.topbrowsers li{
display: block;
width: 100%;
border-bottom: 1px solid grey;
}
.otherbrowsers{
// position: absolute;
width: 100%;
// left: 0;
// top: 45px;
padding: 30px 0;
}
.otherbrowsers li{
display: block;
width: 100%;
border-bottom: 1px solid grey;
}
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