So, I'm relatively new to HTML and CSS, and I have researched as to why my nav bar is not working plenty of times, but I can never seem to get it to work. Essentially, the items do not drop down when I hover over them, and if I change display: none; to display:block; they do not appear underneath the item either - they just drop down to the next line and display as inline. I would highly appreciate some constructive criticism so I can learn and continue to develop. Thank you ahead of time!
html, body {
margin: 0;
height: 100%;
width: 100%;
background-color: #0E0B16;
}
#wrap {
height: auto;
width: 100%;
border-bottom-style: solid;
border-bottom-color: #E7DFDD;
border-bottom-width: thin;
}
ul {
padding: 0;
margin: 0;
text-align: justify;
background: #0E0B16;
}
li {
list-style: none;
display: inline-block;
text-align: left;
}
a {
color: #E7DFDD;
text-decoration: none;
display: block;
margin-left: -4px;
padding: 16px 25px;
font-family: Verdana;
font-weight: bold;
border-right-style: solid;
border-right-color: #E7DFDD;
border-right-width: thin;
}
a:hover {
background-color: #E7DFDD;
color: #0E0B16;
}
a:active {
background-color: #E7DFDD;
color: #0E0B16;
}
.active {
background-color: #E7DFDD;
color: #0E0B16;
}
.dropdown-content {
display: none;
}
.dropdown:hover .dropdown-content{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Witcher's World</title>
<link rel="stylesheet" href="witcher.style.css"/>
<meta charset="UTF-8">
<header>
<nav id="wrap">
<ul>
<li><a class ="active" href="witcher.index.html">Home</a></li>
<li>Witcher Lore</li>
<li><a class="dropdown" href="#">Glossary</a></li>
<ul class="dropdown-content">
<li>Characters</li>
<li>Bestiary</li>
</ul>
<li><a class="dropdown" href="#">Weapons</a></li>
<ul class="dropdown-content">
<li>Swords</li>
<!--<ul class="dropdown-content">
<li>Steel Swords</li>
<li>Silver Swords</li>
</ul-->
<li>Signs</li>
</ul>
<li>Books</li>
</ul>
</nav>
</header>
</head>
<body>
<footer>
</footer>
</body>
</html>
Your dropdown class does not cover dropdown-content also you have to give position:absolute to your dropdown-content.
html, body {
margin: 0;
height: 100%;
width: 100%;
background-color: #0E0B16;
}
#wrap {
height: auto;
width: 100%;
border-bottom-style: solid;
border-bottom-color: #E7DFDD;
border-bottom-width: thin;
}
ul {
padding: 0;
margin: 0;
text-align: justify;
background: #0E0B16;
}
li {
list-style: none;
display: inline-block;
text-align: left;
}
a {
color: #E7DFDD;
text-decoration: none;
display: block;
margin-left: -4px;
padding: 16px 25px;
font-family: Verdana;
font-weight: bold;
border-right-style: solid;
border-right-color: #E7DFDD;
border-right-width: thin;
}
a:hover {
background-color: #E7DFDD;
color: #0E0B16;
}
a:active {
background-color: #E7DFDD;
color: #0E0B16;
}
.active {
background-color: #E7DFDD;
color: #0E0B16;
}
.dropdown-content {
display: none;
}
.dropdown:hover .dropdown-content{
display: block;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>Witcher's World</title>
<link rel="stylesheet" href="witcher.style.css"/>
<meta charset="UTF-8">
</head>
<body>
<header>
<nav id="wrap">
<ul>
<li><a class ="active" href="witcher.index.html">Home</a></li>
<li>Witcher Lore</li>
<li class="dropdown">Glossary
<ul class="dropdown-content">
<li>Characters</li>
<li>Bestiary</li>
</ul>
</li>
<li class="dropdown">Weapons
<ul class="dropdown-content">
<li>Swords</li>
<!--<ul class="dropdown-content">
<li>Steel Swords</li>
<li>Silver Swords</li>
</ul-->
<li>Signs</li>
</ul>
</li>
<li>Books</li>
</ul>
</nav>
</header>
<footer>
</footer>
</body>
</html>
.dropdown:hover .dropdown-content won't work because .dropdown-content isn't a child of .dropdown. Doesn't need to be, either, because .dropdown is an a and the sub-menus have a's, and you can't have an a in an a. Put it adjacent to .dropdown and trigger :hover on the parent li.
And the reason the links are displaying inline is because you styled all li as inline-block. I updated that to be ul:not(.dropdown-content) li.
And you probably want to use absolute positioning on the sub-menu so it doesn't impact the parent element or overall header when it's displayed. That also requires adding position: relative to the parent li so it's positioned correctly.
html, body {
margin: 0;
height: 100%;
width: 100%;
background-color: #0E0B16;
}
#wrap {
height: auto;
width: 100%;
border-bottom-style: solid;
border-bottom-color: #E7DFDD;
border-bottom-width: thin;
}
ul {
padding: 0;
margin: 0;
text-align: justify;
background: #0E0B16;
}
ul:not(.dropdown-content) li {
list-style: none;
display: inline-block;
text-align: left;
position: relative;
}
a {
color: #E7DFDD;
text-decoration: none;
display: block;
margin-left: -4px;
padding: 16px 25px;
font-family: Verdana;
font-weight: bold;
border-right-style: solid;
border-right-color: #E7DFDD;
border-right-width: thin;
}
a:hover {
background-color: #E7DFDD;
color: #0E0B16;
}
a:active {
background-color: #E7DFDD;
color: #0E0B16;
}
.active {
background-color: #E7DFDD;
color: #0E0B16;
}
.dropdown-content {
display: none;
}
li:hover .dropdown-content{
display: block;
position: absolute;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Witcher's World</title>
<link rel="stylesheet" href="witcher.style.css"/>
<meta charset="UTF-8">
</head>
<body>
<header>
<nav id="wrap">
<ul>
<li><a class ="active" href="witcher.index.html">Home</a></li>
<li>Witcher Lore</li>
<li><a class="dropdown" href="#">Glossary</a>
<ul class="dropdown-content">
<li>Characters</li>
<li>Bestiary</li>
</ul></li>
<li><a class="dropdown" href="#">Weapons</a>
<ul class="dropdown-content">
<li>Swords</li>
<!--<ul class="dropdown-content">
<li>Steel Swords</li>
<li>Silver Swords</li>
</ul-->
<li>Signs</li>
</ul></li>
<li>Books</li>
</ul>
</nav>
</header>
<footer>
</footer>
</body>
</html>
Add this to your code
.dropdown{
position:relative;
}
.dropdown-content {
display: none;
position: absolute;
top:100%;
}
.dropdown:hover .dropdown-content{
display: block;
}
Related
I've been trying to figure out what is why the dropdown menu isnt changing from display: none; into display: block; when i hover over it.
I briefly looked at a dropdown menu CSS tutorial just to get a basic understanding on how it works but after watching it a few times i have no clue what is not working
P.S i am relatively new to this stuff
Code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: 0;
}
.navbar ul li{
display: inline-flex;
margin-left: 8rem;
list-style: none;
color: white;
padding: .5rem;
border-radius: 1rem;
}
.navbar{
background: rgb(0, 120, 0);
padding: 1.25rem;
font-size: larger;
text-decoration: none;
}
.navbar:link{
text-decoration: none;
}
a{
text-decoration: none;
color: white;
font-family: sans-serif;
}
.navbar ul li:hover{
background: rgba(0, 0, 0, 0.7);
}
.drop-1{
display: none;
background-color: darkgreen;
position: absolute;
left: 6rem;
}
.drop-1 a{
color: lightgreen;
}
.drop-1 ul li{
border-bottom: 1px solid black;
padding-bottom: .5rem;
padding-top: .5rem;
padding-left: 1rem;
padding-right: 1rem;
display: block;
}
.drop-1 ul li:last-child{
border: none;
}
.drop-1 ul li:first-child{
border-top: 1px solid black;
}
.navbar ul li:hover .drop-1{
display: block;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
<div class="drop-1">
<ul>
<li>dropdown1</li>
<li>dropdown2</li>
<li>dropdown3</li>
<li>dropdown4</li>
<li>dropdown5</li>
</ul>
</div>
</body>
</html>```
The dropdown must be in the structure of your styles. You have this style:
.navbar ul li:hover .drop-1{
display: block;
}
Which means that you have a class navbar, and then ul with some li and, "inside" an element with a drop-1 class. When you are hover that li, then your drop-1 element will be visible.
If you put a dropdown inside some li of your navbar, you can see the dropdown.
<div class="navbar">
<ul>
<li>
Test1
<div class="drop-1">
<ul>
<li>dropdown1</li>
<li>dropdown2</li>
<li>dropdown3</li>
<li>dropdown4</li>
<li>dropdown5</li>
</ul>
</div>
</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
You need one dropdown for each menú in your navbar.
UPDATE
Well, maybe a bit difficult at first but the concept is always the same. Check this:
a span {
// Any span inside a link will be hidden by default
display: none;
}
a:hover span {
// but when you are hover the link, the span will be visible
display: block;
}
<a>Always visible <span>Visible only on hover</span></a>
The CSS it's applied to the span but the "hover" of the link it's who change the display of the span.
Here your code fixed. Besides Victor clarification there are a few more things you could solve about the code. I paste it here if you want to copy it.
* {
margin: 0;
padding: 0;
border: 0;
}
.navbar ul li {
display: inline-flex;
position: relative;
margin-left: 8rem;
list-style: none;
color: white;
padding: .5rem;
border-radius: 1rem;
}
.navbar {
background: rgb(0, 120, 0);
padding: 1.25rem;
font-size: larger;
text-decoration: none;
}
.navbar:link {
text-decoration: none;
}
a {
text-decoration: none;
color: white;
font-family: sans-serif;
}
.navbar ul li:hover {
background: rgba(0, 0, 0, 0.7);
}
.drop-1 {
display: none;
background-color: darkgreen;
position: absolute;
bottom: 0;
left: 0;
transform: translateY(100%);
z-index: 1;
}
.drop-1 a {
color: lightgreen;
}
.drop-1 ul li {
border-bottom: 1px solid black;
padding-bottom: .5rem;
padding-top: .5rem;
padding-left: 1rem;
padding-right: 1rem;
display: block;
}
.drop-1 ul li:last-child {
border: none;
}
.drop-1 ul li:first-child {
border-top: 1px solid black;
}
.navbar ul li:hover .drop-1 {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="navbar">
<ul>
<li>
Test1
<div class="drop-1">
<ul>
<li>dropdown1</li>
<li>dropdown2</li>
<li>dropdown3</li>
<li>dropdown4</li>
<li>dropdown5</li>
</ul>
</div>
</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
</body>
</html>
so I am pretty new to development and come across a problem, I think I am missing somthing but I can't tell. So I am building a nav bar and then a drop down menu. I believe that the li is in the ul so that why it is not coming out of it. So how could I fix this. If you know any website that would be good let me know thank you
Code:
https://codepen.io/Giannilmgc/pen/JjrgZdr?editors=1111
Output:
https://codepen.io/Giannilmgc/full/JjrgZdr
To see what wrong keep your cursor over the to do tab and scroll down
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#300&display=swap");
/* Here is the body style where we change the background */
body {
background: linear-gradient(135deg, #36454f 0%, #ffdd3c 100%);
margin: 5px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: white;
border-radius: 50px;
}
li {
float: left;
width: 16.667%;
transition-duration: 1s;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition-duration: 1s;
}
li:hover {
background-color: black;
}
li a:hover {
background-color: #36454f;
color: white;
}
#homepageLink {
background-color: #cccccc;
}
.dropdown {
position: relative;
display: inline-block;
}
ul li ul {
display: none;
position: absolute;
background-color: #cccccc;
width: 20%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 10;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #36454f;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
<head>
<title> My Site </title>
<link rel="stylesheet" href="CSS/Homepage-Css.css" />
</head>
<body>
<body>
<div>
<ul>
<li>HomePage</li>
<li>Journal</li>
<li>Calander </li>
<li class="dropdown">To do
<ul class="dropdown-content">
<a herf="#">Latin</a>
<a herf="#">Scince</a>
<a herf="#">Ela</a>
</ul>
</li>
<li>Service</li>
<li>Contact</li>
</ul>
</div>
<div class="time">
<span id="display_ct"></span>
</body>
<!-- Adding Script to the bottom ... Very Imporantent -->
<script src="Javascript/Homepage-Java.js"></script>
Thank you
In the dropdown class you have set the position in relative. Change it to absolute and your drop down menu will come out.
.dropdown {
position: absolute;
display: inline-block;
}
you put display none on the dropdown and try to show it when its hover on li.
but when the mouse go out from li the display:none on dropdown is return.
try to make it with after pseudo element and change the code from .dropdown { position: relative; display: inline-block; }
to:li:after.dropdown { position: relative; display: inline-block; }
it will work but not an ideal, improve it with css
If you want to create a dropdown menu with pure CSS there is this example from w3schools
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
I am a developer in training and I was trying to get this code to show a drop down menu when hovering over the list items "Music" and "Podcasts". But I can't seem to get it to work, what am I doing wrong?
I found some people doing the same thing, but my list never shows, which is logical of course because of the display: none; but I would like it to show after hovering over Music or Podcasts. Sorry, but I am still learning if it is messy/bad.
body {
background-image: url(../images/top.png), url(../images/achtergrond.png);
background-size: cover ;
font-family: 'Neucha', cursive;
background-repeat: no-repeat;
}
img {
width: 1000px;
height: 400px;
}
.navbar{
margin: auto;
width: 50%;
padding: 10px;
}
.list{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
list-style: none;
font-size: 35px;
}
li:hover .sublist-music a {
display: block;
color: black;
}
li{
background-color: white;
border-radius: 30%;
}
li:hover{
background-color: #A1CCB6;
}
.sublist-music{
display: none;
}
.sublist-podcasts{
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/test.css">
<title>banana split</title>
<link href="https://fonts.googleapis.com/css2?family=Neucha&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="list">
<li> <a>Home</a></li>
<li> <a>Music</a></li>
<div class="sublist-music">
Shows
Live
</div>
<li> <a>Podcasts</a></li>
<div class="sublist-podcasts">
<li>Plants</li>
<li>Food</li>
<li>Youtubers</li>
<li>Mindfull</li>
</div>
<li> <a>Live</a></li>
<li> <a>About us</a></li>
<li> <a>Contact</a></li>
</div>
</div>
</body>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Music
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Shows
Live
</div>
</div>
Live
About us
</div>
Reference link : https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
body {
font-family: 'Neucha', cursive;
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
list-style: none;
margin: 0;
padding-left: 0;
}
li {
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
border-radius: 30%;
background-color: white;
}
li a {
color: #000;
}
li:hover,
li:focus-within {
background-color: #A1CCB6;
cursor: pointer;
}
li:focus-within a {
outline: none;
}
ul li ul {
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
visibility: visible;
opacity: 1;
display: block
}
ul li ul li {
clear: both;
width: 100%;
}
<nav role="navigation">
<ul>
<li>Home</li>
<li>Music
<ul class="dropdown">
<li>Shows</li>
<li>Live</li>
</ul>
</li>
<li>Podcast
<ul class="dropdown">
<li>Plants</li>
<li>Food</li>
<li>Youtubers</li>
<li>Mindful</li>
</ul>
</li>
<li>Live</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
This is my first time asking of Stack Overflow so I'm sorry if the formatting isn't perfect. Anyways, I'm working on a website which uses Bootstrap 3. It has an image that is centered in the middle of the page vertically and horizontally. It also has a background image. I am trying to put a header under the image in the center but the header goes to the top of the page. There is a fixed nav-bar on the bottom of the page.
Here's the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>
App
</title>
<style>
html {
background-image: url("gradiant.png");
}
.logo {
position: absolute;
top: 40%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -216.5px;
margin-left: -236.25px;
}
.nav-pills li a {
color: white;
font-size: 250%;
}
.nav-pills li a {
background-color: transparent;
color: #ffffff;
transition: all .5s;
border: 2px solid transparent;
}
.nav-pills li a:hover{
background-color: transparent;
color: #ffffff;
border-color: #ffffff;
}
.dropdown{
background-color: transparent;
color: #ffffff;
border-color: #ffffff;
}
.nav-pills > li > .dropdown-menu {
background-color: transparent;
border-color: #ffffff;
}
.dropdown-toggle {
background-color: transparent !important;
}
.dropdown-toggle:active, .open .dropdown-toggle {
background-color: transparent !important;
color: white !important;
border-color: #ffffff !important;
}
.nav-pills {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.nav-pills > li {
display: inline-block;
float:none;
}
h1 {
position: absolute;
color: #ffffff;
}
</style>
</head>
<body>
<img alt="App" src="app.png" width=472.5 height=433 class="logo" align="middle" >
<h1>App</h1>
<ul class="nav nav-pills navbar-fixed-bottom">
<li>Home</li>
<li class="dropdown">
Apps <span class="caret"></span>
<ul class="dropdown-menu">
<li>App</li>
</ul>
</li>
<ul class="dropdown-menu">
</ul>
</li>
<li>Contact</li>
</ul>
</body>
</html>
This is not a Bootstrap-specific answer, but what you can do is create a container for the logo and apply the CSS, you're currently applying to the image, to the container. Then just put the heading below the image in the container:
html {
background-image: url("gradiant.png");
}
.logo-container {
position: absolute;
top: 40%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -216.5px;
margin-left: -236.25px;
}
.logo-container img {
width:100%;
}
.nav-pills li a {
color: white;
font-size: 250%;
}
.nav-pills li a {
background-color: transparent;
color: #ffffff;
transition: all .5s;
border: 2px solid transparent;
}
.nav-pills li a:hover {
background-color: transparent;
color: #ffffff;
border-color: #ffffff;
}
.dropdown {
background-color: transparent;
color: #ffffff;
border-color: #ffffff;
}
.nav-pills > li > .dropdown-menu {
background-color: transparent;
border-color: #ffffff;
}
.dropdown-toggle {
background-color: transparent !important;
}
.dropdown-toggle:active,
.open .dropdown-toggle {
background-color: transparent !important;
color: white !important;
border-color: #ffffff !important;
}
.nav-pills {
float: none;
margin: 0 auto;
display: block;
text-align: center;
}
.nav-pills > li {
display: inline-block;
float: none;
}
h1 {
position: absolute;
color: #ffffff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="logo-container">
<img alt="App" src="http://lorempixel.com/500/500/" class="logo" align="middle" >
<h2>Title goes here</h2>
</div>
<h1>App</h1>
<ul class="nav nav-pills navbar-fixed-bottom">
<li>Home</li>
<li class="dropdown">
Apps <span class="caret"></span>
<ul class="dropdown-menu">
<li>App</li>
</ul>
</li>
<li>
<ul class="dropdown-menu">
</ul>
</li>
<li>Contact</li>
</ul>
I have created a simple navigation that seem to work ok. There is one thing that is really bugging me though. On the last dropdown item i would like some space after the border but cant quite work out how to get it. I have tried putting some bottom padding on the dropdown li but it doesnt seem to work.
Really appreciate any advice to where i am going wrong.
https://jsfiddle.net/rufusbear/hv8gwwg9/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fennes Clay</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<script src="https://use.fontawesome.com/9c815a24d9.js"></script>
<style>
.nav-wrap {
max-width: 700px;
margin: 0 auto;
background-color: #718373;
height: 80px;
text-transform: uppercase;
}
.dropdown {
display: none;
padding: 0;
margin: 0;
position: absolute;
top: 100%;
left: 0;
}
.dropdown li a {
width: 110px;
height: 40px;
line-height: 40px;
margin: 0 auto;
padding: 5px 10px;
}
.nav-list {
margin: 0;
padding: 0;
}
.nav-list li {
position: relative;
list-style: none;
float: left;
width: 150px;
line-height: 80px;
text-align: center;
background-color: #718373;
}
.nav-list li a {
text-decoration: none;
color: white;
display: block;
}
.nav-list li:hover>.dropdown {
display: block;
}
.dropdown li a:hover {
border: 2px solid white;
}
</style>
</head>
<body>
<nav>
<div class="nav-wrap">
<ul class="nav-list">
<li>about
<ul class="dropdown">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</li>
<li>about</li>
<li>about</li>
<li>about</li>
</ul>
</div>
</nav>
</body>
</html>
Is this what you're after?
.dropdown li:last-child a {
margin-bottom: 10px;
}
You can add
background-color: #718373;
padding-bottom: 20px;
to .dropdown element.
To prevent links from shaiking on hover replace
.dropdown li a:hover {
border: 2px solid white;
}
with
.dropdown li a:hover {
outline: 2px solid white;
outline-offset: -2px;
}
.nav-wrap {
max-width: 700px;
margin: 0 auto;
background-color: #718373;
height: 80px;
text-transform: uppercase;
}
.dropdown {
display: none;
padding: 0;
margin: 0;
position: absolute;
top: 100%;
left: 0;
background-color: #718373;
padding-bottom: 20px;
}
.dropdown li a {
width: 110px;
height: 40px;
line-height: 40px;
margin: 0 auto;
padding: 5px 10px;
}
.nav-list {
margin: 0;
padding: 0;
}
.nav-list li {
position: relative;
list-style: none;
float: left;
width: 150px;
line-height: 80px;
text-align: center;
background-color: #718373;
}
.nav-list li a {
text-decoration: none;
color: white;
display: block;
}
.nav-list li:hover>.dropdown {
display: block;
}
.dropdown li a:hover {
outline: 2px solid white;
outline-offset: -2px;
}
<nav>
<div class="nav-wrap">
<ul class="nav-list">
<li>about
<ul class="dropdown">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</li>
<li>about</li>
<li>about</li>
</ul>
</div>
</nav>
Add this rule:
.nav-list li ul li:last-child {
padding-bottom: 15px;
}
It adds padding-bottom only to the last li of each nested ul inside the .nav-list (Adjust the px amount as you need it)
Here it is in a fiddle: https://jsfiddle.net/8w67f9y7/2/
check with this one
https://jsfiddle.net/rufusbear/hv8gwwg9/
margin-top: 30px;