I have made a css dropdown menu out of only css and html. My problem is when I hover over the nav bar- my page content moves to the right. Then when I hover over the dropdown menu, the page content moves back to the left. I have not found anything that can help me so far. I have attached the relevant code below.
Please help me, and thank you
* {
padding: 0;
margin: 0;
}
nav {
background-color: #cccccc;
width: 100%;
height: 80px;
}
ul {
float: left;
}
ul li {
position: relative;
list-style: none;
float: left;
line-height: 80px;
font-size: 20px;
color: #c92d39;
}
ul li a{
display: block;
text-decoration: none;
color: #c92d39;
padding: 0 30px;
}
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
position: absolute;
background-color: #e5e5e5;
border-radius: 0 0 3px 3px;
}
ul li ul li a:hover {
background-color: #b2b2b2;
color: #c92d39;
border-bottom: none;
}
ul li ul li {
font-size: 15px;
width: 100%;
text-align: center;
}
h1 {
color: #c92d39;
padding: 30px;
}
h2 {
color: #c92d39;
padding: 5px 30px 10px 30px;
}
p {
padding: 0px 30px;
}
a {
text-decoration: none;
}
#logo {
background-color: #cccccc;
padding: 0 51px 0 75px;
font-size: 30px;
font-weight: bold;
}
.page-body {
background-color: #e5e5e5;
}
.wrapper {
margin: 0 300px 0 300px;
padding-left: 0px;
height: 100%;
background-color: white;
}
.footer {
background-color: #cccccc;
width: 100%;
height: 80px;
}
.empty_box {
height: 1000px;
width: 100%;
}
#contacts {
margin: 0px 0px 0px 60px;
padding: 0 20px;
border-top: 1px solid #cccccc;
}
#contacts:hover {
border-top: 1px solid #c92d39;
}
#copyright {
font-size: 10px;
float: right;
padding: 0px 30px 0 770px;
}
#copyright:hover {
background-color: #cccccc;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Basecode</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<ul>
<li id="logo">Cultural Asia</li>
</ul>
<ul>
<li>Home</li>
<li>
Attractions
<ul>
<li>attraction1</li>
<li>attraction2</li>
<li>attraction3</li>
</ul>
</li>
<li>
Packages
<ul>
<li>package1</li>
<li>package2</li>
<li>package3</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
<div class="page-body">
<div class="wrapper">
<p>hi</p>
<div class="empty_box"></div>
</div>
</div>
<div class="footer">
<ul>
<li>Contact Details</li>
<li id="copyright">Copyright Lachlan Dunn</li>
</ul>
</div>
</body>
</html>
You need to clear your floats.
.page-body {
…
clear: left;
}
Demo
* {
padding: 0;
margin: 0;
}
nav {
background-color: #cccccc;
width: 100%;
height: 80px;
}
ul {
float: left;
}
ul li {
position: relative;
list-style: none;
float: left;
line-height: 80px;
font-size: 20px;
color: #c92d39;
}
ul li a {
display: block;
text-decoration: none;
color: #c92d39;
padding: 0 30px;
}
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
position: absolute;
background-color: #e5e5e5;
border-radius: 0 0 3px 3px;
}
ul li ul li a:hover {
background-color: #b2b2b2;
color: #c92d39;
border-bottom: none;
}
ul li ul li {
font-size: 15px;
width: 100%;
text-align: center;
}
h1 {
color: #c92d39;
padding: 30px;
}
h2 {
color: #c92d39;
padding: 5px 30px 10px 30px;
}
p {
padding: 0px 30px;
}
a {
text-decoration: none;
}
#logo {
background-color: #cccccc;
padding: 0 51px 0 75px;
font-size: 30px;
font-weight: bold;
}
.page-body {
background-color: #e5e5e5;
clear: left;
}
.wrapper {
margin: 0 300px 0 300px;
padding-left: 0px;
height: 100%;
background-color: white;
}
.footer {
background-color: #cccccc;
width: 100%;
height: 80px;
}
.empty_box {
height: 1000px;
width: 100%;
}
#contacts {
margin: 0px 0px 0px 60px;
padding: 0 20px;
border-top: 1px solid #cccccc;
}
#contacts:hover {
border-top: 1px solid #c92d39;
}
#copyright {
font-size: 10px;
float: right;
padding: 0px 30px 0 770px;
}
#copyright:hover {
background-color: #cccccc;
}
<nav>
<ul>
<li id="logo">Cultural Asia</li>
</ul>
<ul>
<li>Home</li>
<li>
Attractions
<ul>
<li>attraction1</li>
<li>attraction2</li>
<li>attraction3</li>
</ul>
</li>
<li>
Packages
<ul>
<li>package1</li>
<li>package2</li>
<li>package3</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
<div class="page-body">
<div class="wrapper">
<p>hi</p>
<div class="empty_box"></div>
</div>
</div>
<div class="footer">
<ul>
<li>Contact Details</li>
<li id="copyright">Copyright Lachlan Dunn</li>
</ul>
</div>
The problem is that you add a bottom-border to element which pushes paragraph out of its position. do
ul li a:hover {
color: black;
}
instead of
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
or if you really want that border check out css box-sizing property documentation
Related
I created a navigation bar. It contains li elements and some of the li elements contains drop down menu. On hovering the specific li element the drop down menu will become visible. The problem is that the drop down menu does not appear under its parent li element. Instead all of them appear in the same position (under the logo) away from their parent elements. What am i missing?
#navigation {
height: 50px;
width: 95%;
margin: auto;
box-shadow: 0px 0 1px 1px #ddd;
padding: 10px;
background-color: #fff;
}
#navigation #nav {
list-style: none;
margin: 0;
padding: 0;
}
#navigation #nav li.nav-block,
#navigation #nav li#logo-container {
display: inline;
margin-left: 10px;
padding: 20px 0px;
width: 50px;
text-align: center;
height: 40px;
line-height: 50px;
font-family: sans-serif;
margin: 2px 0px;
}
#navigation #nav li a.nav-button,
#navigation #nav li a#logo {
text-decoration: none;
color: #333;
padding: 15px 40px;
}
#navigation #nav li.nav-block:hover {
background-color: skyblue;
}
#navigation #nav li.nav-block:hover a.nav-button {
color: #fff;
}
a.category {
cursor: default;
}
#logo-container {
margin-right: 10px;
}
#logo {
font-family: sans-serif;
font-weight: bold;
color: #333;
}
#logo-span {
color: skyblue;
}
.nav-dropdown-menu {
display: none;
z-index: 11;
position: absolute;
width: 200px;
min-height: 50px;
}
.nav-dropdown-menu>ul {
display: block;
}
.nav-dropdown-menu>ul>.dropdown-li {
display: block !important;
background-color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 1px 1px #ddd;
width: 100%;
}
#navigation #nav li.nav-block:hover>.nav-dropdown-menu {
display: block;
}
.nav-dropdown-menu>ul>.dropdown-li a {
text-decoration: none;
padding: 10px 50px;
color: #333;
}
.nav-dropdown-menu>ul>.dropdown-li:hover {
background-color: #333;
}
.nav-dropdown-menu>ul>.dropdown-li:hover a {
color: #fff;
}
<div id="navigation">
<ul id="nav">
<li id="logo-container"><a id="logo">My <span id="logo-span">Logo</span></a></li>
<li class='nav-block'><a class='nav-button category'>Handy</a>
<div class='nav-dropdown-menu'>
<ul>
<li class='dropdown-li'><a href='home.php?brand_id=1&cat_id=2'>Dell</a></li>
<li class='dropdown-li'><a href='home.php?brand_id=4&cat_id=2'>Samsung</a></li>
</ul>
</div>
<li class='nav-block'><a class='nav-button category'>Tablet</a>
<div class='nav-dropdown-menu'>
<ul>
<li class='dropdown-li'><a href='home.php?brand_id=2&cat_id=9'>Sony</a></li>
</ul>
</div>
<li class="nav-block"><a class="nav-button" href="registration.php">Sign Up</a></li>
<li class="nav-block"><a class="nav-button" href="main_login.php">Login</a></li>
</ul>
</div>
Have a look into this. Give position;relative to your li and set left and right of your nav-dropdown-menu
#navigation {
height: 50px;
width: 95%;
margin: auto;
box-shadow: 0px 0 1px 1px #ddd;
padding: 10px;
background-color: #fff;
}
#navigation #nav {
list-style: none;
margin: 0;
padding: 0;
}
#navigation #nav li.nav-block,
#navigation #nav li#logo-container {
display: inline;
margin-left: 10px;
padding: 20px 0px;
width: 50px;
text-align: center;
height: 40px;
line-height: 50px;
font-family: sans-serif;
margin: 2px 0px;
}
#navigation #nav li a.nav-button,
#navigation #nav li a#logo {
text-decoration: none;
color: #333;
padding: 15px 40px;
}
#navigation #nav li.nav-block:hover {
background-color: skyblue;
}
#navigation #nav li.nav-block:hover a.nav-button {
color: #fff;
}
a.category {
cursor: default;
}
#logo-container {
margin-right: 10px;
}
#logo {
font-family: sans-serif;
font-weight: bold;
color: #333;
}
#logo-span {
color: skyblue;
}
.nav-block {
position: relative;
}
.nav-dropdown-menu {
display: none;
z-index: 11;
position: absolute;
left: -39px;
right: 0;
width: 200px;
min-height: 50px;
}
.nav-dropdown-menu>ul {
display: block;
}
.nav-dropdown-menu>ul>.dropdown-li {
display: block !important;
background-color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 1px 1px #ddd;
width: 100%;
}
#navigation #nav li.nav-block:hover>.nav-dropdown-menu {
display: block;
}
.nav-dropdown-menu>ul>.dropdown-li a {
text-decoration: none;
padding: 10px 50px;
color: #333;
}
.nav-dropdown-menu>ul>.dropdown-li:hover {
background-color: #333;
}
.nav-dropdown-menu>ul>.dropdown-li:hover a {
color: #fff;
}
<div id="navigation">
<ul id="nav">
<li id="logo-container"><a id="logo">My <span id="logo-span">Logo</span></a></li>
<li class='nav-block'><a class='nav-button category'>Handy</a>
<div class='nav-dropdown-menu'>
<ul>
<li class='dropdown-li'><a href='home.php?brand_id=1&cat_id=2'>Dell</a></li>
<li class='dropdown-li'><a href='home.php?brand_id=4&cat_id=2'>Samsung</a></li>
</ul>
</div>
<li class='nav-block'><a class='nav-button category'>Tablet</a>
<div class='nav-dropdown-menu'>
<ul>
<li class='dropdown-li'><a href='home.php?brand_id=2&cat_id=9'>Sony</a></li>
</ul>
</div>
<li class="nav-block"><a class="nav-button" href="registration.php">Sign Up</a></li>
<li class="nav-block"><a class="nav-button" href="main_login.php">Login</a></li>
</ul>
</div>
So I'm trying to understand why when I specify the width for my .thenav class it is not expanding to the entire width of the page.
I UNDERSTAND that it is taking the characteristics of the .container class, but I don't understand why and what is the solution seeing that i specified the width? PLEASE HELP!
Here is my picture of what's happening (I attached an image of what's happening because the jsfiddle makes the div appear at 100% and it's not):
http://imgur.com/a/zsBqC
Here is my jsfiddle:
https://jsfiddle.net/CheckLife/yox7Ln1b/3/
Here's the code for reference:
HTML:
<div class="header">
<div class="container">
<h1 id="box" onload="changed()"><image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
<div class="thenav" onload="changed()">
<ul>
<li><a href="http://www.nba.com"/>Home</a></li>
<li onclick="changeP()">About</li>
<li>Players
<ul>
<li onmouseover="slow()"></li>
<li><a href="#kobesec"/>Kobe</a></li>
<li><a href="#"/>Kevin Durant</a></li>
<li><a href="#"/>The Goat</a></li>
</ul>
</li>
<li onclick="slow()">News</li>
</ul>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}
header, nav, section, aside, footer, article {
display: block;
}
body {
background-image: url(backwood.png);
width: 100%;
margin: auto;
}
.container {
margin: 0px auto;
background-size: cover;
width: 1300px;
height: 100%;
}
.header {
background:linear-gradient(to right, #5092f4, #f29641);
margin-top: 0px;
width: 100%;
}
.header h1{
text-align: center;
width: 100%;
padding-bottom: 15px;
font-family: Arial, Helvetica, sans-serif;
color: #f4ca1f;
}
.tmacw {
display:inline;
position: relative;
padding: 0px;
top: 5px;
}
.nba {
margin-right: 10px;
}
.thenav {
background-color: #7886a3;
width: 100%;
height: 85px;
position: relative;
z-index: 1;
}
/* Style for the Nav Bar */
.thenav ul {
padding: 0;
margin: 0;
}
.thenav ul li {
float: left;
width: 90px;
text-align: center;
border-right: 1px groove #141e38;
position: relative;
}
.thenav ul li a {
display: block;
color: white;
font-weight: bold;
padding: 33px 10px;
}
.thenav ul li a:hover {
background-color: #47e586;
transition: all 0.90s;
}
/*Dropdown Nav */
.thenav li ul li{
background-color: #7886a3;
border: 2px groove grey;
border-radius: 4px;
position: relative;
}
.thenav li ul li a {
padding: 8px;
text-align:left;
}
.thenav li ul li:nth-child(1) a:hover {
background-color: #F47575;
}
.thenav li ul li:nth-child(2) a:hover {
background-color: #f7d759 ;
}
.thenav li ul li a:hover{
background-color: red;
}
.thenav ul li ul {
display: none;
}
.thenav li:hover ul{
position:absolute;
}
.thenav li:hover ul{
display: block;
}
/* End of Dropdown */
.userlogin {
font-size: 12px;
top:2px;
color: white;
}
input[type=text], input[type=password] {
font-weight: bold;
margin: 0;
font-size: 8px;
height: 10px;
padding: 3px 5px 3px 5px;
color: 162354;
}
/* Stats Button */
.stat input[type=button] {
background-color: #6cd171;
color: blue;
border-radius: 6px;
font-weight: bold;
border: none;
float: left;
margin-top: 20px;
margin-left: 20px;
padding: 2px 2px;
font-family: Verdana, Geneva, sans-serif;
}
.log[type=button] {
background-color: white;
color: #008cff;
border-radius: 4px;
font-weight: bold;
border: none;
padding: 1px 2px 2px 2px;
position: relative;
left: 5px;
top: 3px;
}
A child div that does not have absolute positioning and has a width of 100% (unnecessary if it's display is the default of block) will be set to it's containers width. Your div.container has a width setting of 1300px and it is the parent element of div.thenav, therefore div.thenav's width will also be 1300px.
You can either remove width on the container:
.container {
margin: 0px auto;
background-size: cover;
/*width: 1300px; remove this */
height: 100%;
}
or:
Move div.thenav outside of div.container as in this code:
(https://jsfiddle.net/nod19rze/)
<div class="header">
<h1 id="box" onload="changed()"><image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
<div class="thenav" onload="changed()">
<!-- contents of thenav here -->
</div>
<div class="container">
</div>
</div>
Either the container should be the first wrapper and then comes the header, which could solve the issue. I am not sure if this is what u need. Please check this fiddle:
https://jsfiddle.net/estgLn1q/1/
<div class="container">
<div class="header">
</div>
</div>
Or if you want to maintain the same html structure, then remove width:1300px from '.container' which will cause the container to take the same width as of its parent.
I would just move #box and .thenav out of .container and start that class after those elements.
* {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}
header,
nav,
section,
aside,
footer,
article {
display: block;
}
body {
background-image: url(backwood.png);
width: 100%;
margin: auto;
}
.container {
margin: 0px auto;
background-size: cover;
width: 1300px;
height: 100%;
}
.header {
background: linear-gradient(to right, #5092f4, #f29641);
margin-top: 0px;
width: 100%;
}
.header h1 {
text-align: center;
width: 100%;
padding-bottom: 15px;
font-family: Arial, Helvetica, sans-serif;
color: #f4ca1f;
}
.tmacw {
display: inline;
position: relative;
padding: 0px;
top: 5px;
}
.nba {
margin-right: 10px;
}
.thenav {
background-color: #7886a3;
width: 100%;
height: 85px;
position: relative;
z-index: 1;
}
/* Style for the Nav Bar */
.thenav ul {
padding: 0;
margin: 0;
}
.thenav ul li {
float: left;
width: 90px;
text-align: center;
border-right: 1px groove #141e38;
position: relative;
}
.thenav ul li a {
display: block;
color: white;
font-weight: bold;
padding: 33px 10px;
}
.thenav ul li a:hover {
background-color: #47e586;
transition: all 0.90s;
}
/*Dropdown Nav */
.thenav li ul li {
background-color: #7886a3;
border: 2px groove grey;
border-radius: 4px;
position: relative;
}
.thenav li ul li a {
padding: 8px;
text-align: left;
}
.thenav li ul li:nth-child(1) a:hover {
background-color: #F47575;
}
.thenav li ul li:nth-child(2) a:hover {
background-color: #f7d759;
}
.thenav li ul li a:hover {
background-color: red;
}
.thenav ul li ul {
display: none;
}
.thenav li:hover ul {
position: absolute;
}
.thenav li:hover ul {
display: block;
}
/* End of Dropdown */
.userlogin {
font-size: 12px;
top: 2px;
color: white;
}
input[type=text],
input[type=password] {
font-weight: bold;
margin: 0;
font-size: 8px;
height: 10px;
padding: 3px 5px 3px 5px;
color: 162354;
}
/* Stats Button */
.stat input[type=button] {
background-color: #6cd171;
color: blue;
border-radius: 6px;
font-weight: bold;
border: none;
float: left;
margin-top: 20px;
margin-left: 20px;
padding: 2px 2px;
font-family: Verdana, Geneva, sans-serif;
}
.log[type=button] {
background-color: white;
color: #008cff;
border-radius: 4px;
font-weight: bold;
border: none;
padding: 1px 2px 2px 2px;
position: relative;
left: 5px;
top: 3px;
<div class="header">
<h1 id="box" onload="changed()"><image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
<div class="thenav" onload="changed()">
<ul>
<li><a href="http://www.nba.com" />Home</a>
</li>
<li onclick="changeP()">About</li>
<li>Players
<ul>
<li onmouseover="slow()">
</li>
<li><a href="#kobesec" />Kobe</a>
</li>
<li><a href="#" />Kevin Durant</a>
</li>
<li><a href="#" />The Goat</a>
</li>
</ul>
</li>
<li onclick="slow()">News</li>
</ul>
</div>
<div class="container">
</div>
</div>
How to change the background-color
as you can see in above image? I want to change color after last li and in ul. I do not want to add a new li, just set the overall background-color for ul, and change the background color as mentioned in the image.
* {
margin: 0;
padding: 0;
}
body {
font: 76% Verdana;
line-height: 1.4em;
}
a {
text-decoration: none;
font-weight: bold;
color: #467aa7;
}
a:hover {
color: #80B0DA;
text-decoration: none;
}
/* Header */
.header {
height: 110px;
width: 758px;
color: white;
margin: 0 1px;
background-color: #4279A5;
}
.header h1 {
font-size: 2.4em;
font-weight:normal;
padding: 35px 0 0 20px;
}
.header h2 {
font-size: 1.4em;
font-weight:normal;
margin: 10px 0 0 40px;
}
/* Navigation */
.nav {
width: 758px;
height: 2.2em;
line-height: 2.06em;
margin: 0 1px;
background-color: #4279A5;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-top: 1px solid white;
}
.nav li {
float: left;
border-right: 1px solid white;
list-style-type: none;
}
.nav li a {
text-decoration: none;
color: white;
font-size: x-small;
padding: 5px 10px 10px 5px;
}
.nav .selected, .nav li:hover {
background-color: #80B0DA;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="kk.css">
</head>
<body>
<div class="header">
<h1>Hello World</h1>
<h2>Slogan!</h2>
</div>
<div class="nav">
<ul>
<li class="selected">FIRST PAGE</li>
<li>SECOND</li>
<li>THIRD</li>
<li>FORTH</li>
<li>FIFTH</li>
<li>AND THE LAST ONE</li>
</ul>
</div>
</body>
</html>
Add a background-color to your .nav ul style (red, for example):
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-top: 1px solid white;
background-color: red;
}
And add this just before your .nav .selected, .nav li:hover style:
.nav li:not(.selected) {
background-color: #4279A5;
}
EXAMPLE:
* {
margin: 0;
padding: 0;
}
body {
font: 76% Verdana;
line-height: 1.4em;
}
a {
text-decoration: none;
font-weight: bold;
color: #467aa7;
}
a:hover {
color: #80B0DA;
text-decoration: none;
}
/* Header */
.header {
height: 110px;
width: 758px;
color: white;
margin: 0 1px;
background-color: #4279A5;
}
.header h1 {
font-size: 2.4em;
font-weight:normal;
padding: 35px 0 0 20px;
}
.header h2 {
font-size: 1.4em;
font-weight:normal;
margin: 10px 0 0 40px;
}
/* Navigation */
.nav {
width: 758px;
height: 2.2em;
line-height: 2.06em;
margin: 0 1px;
background-color: #4279A5;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-top: 1px solid white;
background-color: red;
}
.nav li {
float: left;
border-right: 1px solid white;
list-style-type: none;
}
.nav li a {
text-decoration: none;
color: white;
font-size: x-small;
padding: 5px 10px 10px 5px;
}
.nav li:not(.selected) {
background-color: #4279A5;
}
.nav .selected, .nav li:hover {
background-color: #80B0DA;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="kk.css">
</head>
<body>
<div class="header">
<h1>Hello World</h1>
<h2>Slogan!</h2>
</div>
<div class="nav">
<ul>
<li class="selected">FIRST PAGE</li>
<li>SECOND</li>
<li>THIRD</li>
<li>FORTH</li>
<li>FIFTH</li>
<li>AND THE LAST ONE</li>
</ul>
</div>
</body>
</html>
I understand you want to do something like this:
li:last-child{
background-color: #80B0DA;
}
It is not the best answer but you can solve the problem from here:
* {
margin: 0;
padding: 0;
}
body {
font: 76% Verdana;
line-height: 1.4em;
}
a {
text-decoration: none;
font-weight: bold;
color: #467aa7;
}
a:hover {
color: #80B0DA;
text-decoration: none;
}
/* Header */
.header {
height: 110px;
width: 758px;
color: white;
margin: 0 1px;
background-color: #4279A5;
}
.header h1 {
font-size: 2.4em;
font-weight:normal;
padding: 35px 0 0 20px;
}
.header h2 {
font-size: 1.4em;
font-weight:normal;
margin: 10px 0 0 40px;
}
/* Navigation */
.nav {
width: 758px;
height: 2.2em;
line-height: 2.06em;
margin: 0 1px;
background-color: #4279A5;
}
.nav ul {
width: 758px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-top: 1px solid white;
}
li:last-child {
width: 332px;
height: calc(100%-20px);
background-color: #80B0DA;
}
.nav li {
float: left;
border-right: 1px solid white;
list-style-type: none;
}
.nav li a {
text-decoration: none;
color: white;
font-size: x-small;
padding: 5px 10px 10px 5px;
}
.nav .selected, .nav li:hover {
background-color: #80B0DA;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="kk.css">
</head>
<body>
<div class="header">
<h1>Hello World</h1>
<h2>Slogan!</h2>
</div>
<div class="nav">
<ul>
<li class="selected">FIRST PAGE</li>
<li>SECOND</li>
<li>THIRD</li>
<li>FORTH</li>
<li>FIFTH</li>
<li>AND THE LAST ONE</li>
<li><a></a></li>
</ul>
</div>
</body>
</html>
My problem is that I want to have spacing between the navigation links. I have searched over the internet but all I get are reducing the space.
To be specific, I want to have spacing in between each navigation link that are bordered with a black border.
These are my codes for the navigation bar. I would really appreciate some help. thank you.
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
border: 5px solid #000;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 5px solid #000;
}
li:last-child {
border-bottom: none;
}
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Here it is:
<style>
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
border: 5px solid #000;
background-color: #fff;
}
li {
text-align: center;
margin-bottom:10px;
}
li:last-child {
margin-bottom:0;
}
li a:hover {
background-color: #555;
color: white;
}
</style>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Demo: https://jsfiddle.net/4fLbx4xa/
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<style>
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
}
li{
width:100%;
display: block;
margin-top:10px; //this is the height you want
border: 5px solid #000;
color: #000;
background:#000;
padding:10px 0;
}
li a {
text-align: center;
padding: 8px 16px;
text-decoration: none;
color:#fff;
}
li:first-child {
margin-top:0;
}
li:hover {
background-color: #555;
color: white;
}
</style>
You need to use margin to add the white space, but the borders needed a little tweaking, see comments below
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
/*border: 5px solid #000; moved to LI element*/
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
margin-bottom:10px; /*add some margin to create the white space*/
border: 5px solid #000; /*add the border to each LI element rather than UL*/
}
li {
text-align: center;
/*border-bottom: 5px solid #000; remove this bottom border as handled in LI css*/
}
Not sure what you want to achieve but i understood a line between the links, this might help you also if you want it below the links..
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 400px;
background-color: #fff;
border: 5px solid #000;}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;}
li {
text-align: center;
float: left;
border-right:solid 1px black;
}
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
I want my dropdown menu with position: absolute to move the content in div#main 136px down. It didnt work using nav ul li:hover #main {margin-top: 136px;}. I want to solve the problem via html/css if possible! Site:
body {
margin: 0;
padding: 0;
background-color: #327ead;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
color: #c4c4c4;
}
a {
text-decoration: none;
color: #c4c4c4;
}
b {
letter-spacing: 2px;
}
div#head {
width: 100%;
background-color: #3c3c3c;
height: 53px;
}
nav {
background-color: #3c3c3c;
width: 930px;
margin: 0 auto;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: left;
position: relative;
}
nav ul li {
display: inline-block;
}
nav ul li:hover {
border-bottom: 4px solid #327ead;
}
nav ul li:hover > ul {
display: block;
}
nav ul li a:hover {
color: #327ead;
}
nav ul ul li:hover {
border-bottom: none;
}
nav ul li a {
display: block;
padding: 10px 15px;
font-size: 25px;
}
nav ul ul {
display: none;
position: absolute;
background-color: #3c3c3c;
width: 400px;
height: 136px;
text-align: left;
}
nav ul ul li {
display: block;
font-size: 16px;
padding: 4px 0 4px 10px;
}
nav ul ul li a {
font-size: 16px;
padding: 0;
}
ul.news1 {
margin: 4px 0 0 0;
}
ul.news2 {
margin: 4px 0 0 400px;
}
ul.news3 {
margin: 4px 0 0 800px;
width: 130px;
}
div#main {
width: 930px;
margin-left: auto;
margin-right: auto;
color: #c4c4c4;
text-align: justify;
}
div#mostrecentnews {
background-color: #3c3c3c;
margin: 10px 0 10px 0;
padding: 4px 8px;
}
<div id="head">
<nav>
<ul>
<li>News
<ul class="news1">
<li><b>Today's News</b></li>
<li>content...</li>
<li>content...</li>
<li>content...</li>
<li>Browse More...</li>
</ul>
<ul class="news2">
<li><b>Top Weekly News</b></li>
<li>content...</li>
<li>content...</li>
<li>content...</li>
<li>Browse More...</li>
</ul>
<ul class="news3">
<li><b>History</b></li>
<li>May</li>
<li>April</li>
<li>March</li>
<li>Browse More...</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="main">
<img src="data/RL-Takumi.jpg">
<div id="mostrecentnews">
<b>Welcome to RocketLeague-Data.com!</b><br>
content...content...content...content...content...content...content...content...content...content...content...
</div>
</div>
REFINED:
Used JQuery:
var down = false;
$('#btn').hover(function () {
if (down == true) {
$('#main').css("margin-top", "0");
down = false;
} else {
$('#main').css("margin-top", "136px");
down = true;
}
});
FIDDLE