body {
margin: auto;
max-width: 98%;
overflow-y: scroll;
}
div {
border-radius: 5px;
}
span {
font-weight:bold;
}
#header {
position: absolute;
z-index: 1;
background-color: orange;
height: 70px;
width: 98%;
margin-top: -10px;
margin-bottom: 10px;
}
#name {
float:left;
margin-left: 400px;
margin-top: 10px;
padding-top: 1px;
font-size: 20px;
font-family: Verdana, sans-serif;
color: brown;
}
#contact {
position: absolute;
margin-left: 250px;
margin-top: 30px;
padding-top: -1px;
font-family: Verdana, sans-serif;
color: brown;
}
#email {
position: absolute;
margin-left: 360px;
margin-top: 45px;
padding-top: 1px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: brown;
}
a:hover {
font-weight: bold;
}
a,visited {
color: black;
}
#nav {
position: relative;
background-color: brown;
float: left;
width: 11%;
height: 820px;
margin-top: 70px;
margin-bottom: 10px;
}
#nav_wrapper {
width: 900px;
margin: 0px auto;
text-align: left;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
position: relative;
}
#nav ul li {
display: block;
}
#nav ul li:hover {
background-color: #333;
width: 219px;
}
#nav ul a,visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul a:hover {
color: #099;
text-decoration: none;
padding: auto;
}
#nav ul li:hover ul {
display: block;
width: 219px;
}
#nav ul ul {
display: none;
position: absolute;
}
#nav ul ul li {
display: block;
padding: 25.5px;
background-color: #222;
}
#nav ul ul li:hover {
color: #099;
width: 168px;
}
#nav ul ul li,visited {
color: #ccc;
}
ul .sub_navi {
display: none;
}
li:hover .sub_navi {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 220px;
top: 4px;
}
.right {
position: static;
background-color: linen;
float: right;
width: 88%;
height: 820px;
margin-top: 70px;
margin-bottom: 10px;
padding: 5px;
}
h4 {
margin-left: 5px;
margin-bottom: 15px;
font-family: Verdana, sans-serif;
text-decoration: underline;
}
.right p {
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
font-family: Garamond, serif;
color: #000000;
}
#company {
font-family: Garamond, serif;
}
#position {
font-style: italic
}
li {
list-style-type: square;
}
#footer {
height: 40px;
width: 100%;
background-color: orange;
position: relative;
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<title></title>
</head>
<body>
<div id=header>
<p id="name">Henry jones</p>
</div>
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>About Me
<ul>
<li>Board Games
<ul class="sub_navi">
<li>Cosmic Encounter</li>
<li>Agricola</li>
<li>Trajan</li>
</ul>
</li>
<li>League of Legends</li>
<li>Sports</li>
</ul>
</li>
<li>Travels
<ul>
<li>Paris</li>
<li>Turks and Caicos</li>
<li>Puerto Rico</li>
<li>Chicago</li>
</ul>
</li>
</li>
<li>Resume</li>
<li>Contact
<ul>
<li>Phone</li>
<li>Email</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="right">
<h4>Welcome</h4>
<p><img src="https://pbs.twimg.com/media/CAY3PIpXEAAkO75.png"></a>
</p>
I have created the drop down menu but I am having some trouble. Please help me with this html. The problem is when I hover my cursor next to the navi bar I, the navigation bar keeps "blinking". I would like some assistant on how to code this more efficiently. Also, where do i put display:none to make the board game sub navi disappear when highlight something else. Thank you.
Try to use width: 100%; for #nav_wrapper. This will solve the problem.
I finally fixed it!
nav ul li {display: block;}
changed to
nav ul li {Visibility: hidden;}
and
nav ul li:hover ul {display: block;width: 219px;}
changed to
nav ul li:hover > ul {Visibility: visible;width: 219px;}
Related
I am very new to programming and am working on a website as a project for a class. I am attempting to create a drop down menu, but I continually run into an issue where my links in the drop down sub-menu are not taking up the full width I would like. See the pic below.
https://i.stack.imgur.com/u6koe.png
I would like the link and thus the hovered white background to extend the full width of the sub-menu but I cannot figure out how to make it work.
Here is my HTML:
<header id="mainheader">
<nav>
<ul id="menu">
<li>About Me</li>
<li>Creativity
<ul class="submenu">
<li>Skiing</li>
<li>Island</li>
<li>Cooking</li>
</ul>
</li>
<li>Revisions</li>
</ul>
</nav>
</header>
Here is my CSS:
body {
margin-top: 0px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-left: auto;
margin-right: auto;
background-color: aquamarine;
}
#mainheader {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #818181;
text-align: center;
}
#menu {
padding: 0;
margin: 0;
}
#menu li {
display: inline-block;
list-style: none;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
#menu li a {
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px 30px;
}
#menu li a:hover {
background-color: white;
color: black;
}
#menu li ul.submenu {
height: auto;
width: 133px;
background: #818181;
position: absolute;
display: none;
padding: 0;
margin-top: 10px;
}
#menu li:hover ul.submenu {
display: block;
}
#menu li ul.submenu li {
width: 133px;
}
#menu li ul.submenu li a {
text-decoration: none;
padding: 10px 0px;
}
Any assistance is appreciated.
Add display: inline-block; and width: 100%; to your #menu li ul.submenu li a css rule.
body {
margin-top: 0px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-left: auto;
margin-right: auto;
background-color: aquamarine;
}
#mainheader {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #818181;
text-align: center;
}
#menu {
padding: 0;
margin: 0;
}
#menu li {
display: inline-block;
list-style: none;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
#menu li a {
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px 30px;
}
#menu li a:hover {
background-color: white;
color: black;
}
#menu li ul.submenu {
height: auto;
width: 133px;
background: #818181;
position: absolute;
display: none;
padding: 0;
margin-top: 10px;
}
#menu li:hover ul.submenu {
display: block;
}
#menu li ul.submenu li {
width: 133px;
}
#menu li ul.submenu li a {
text-decoration: none;
padding: 10px 0px;
display: inline-block;
width: 100%;
}
<header id="mainheader">
<nav>
<ul id="menu">
<li>About Me</li>
<li>Creativity
<ul class="submenu">
<li>Skiing</li>
<li>Island</li>
<li>Cooking</li>
</ul>
</li>
<li>Revisions</li>
</ul>
</nav>
</header>
I have horizontal menu bar, and I trying to add sub menu for one of item, but I am not able to add it, Its appending to my main menu, please someone help me to where i missing
thanks
HTML
<div id="talltabs-maroon">
<ul>
<li class="first">Home <span>Page</span></li>
<li class="active"><span>About us</span></li>
<li class="dropdown"><a class="dropbtn" href="#"> <span> Report </span></a>
<ul class="dropdown-content" style="left:0">
<li>
<a href="">
<p>Valve Report</p>
</a>
</li>
<li>
<a href="">
<p>Cylinder Report</p>
</a>
</li>
</ul>
</li>
<li class="last">Contact <span>Us</span></li>
</ul>
</div>
CSS for Main menu
#talltabs-maroon {
clear: left;
float: left;
padding: 0;
border-top: 3px solid #CD324F;
width: 100%;
overflow: hidden;
font-family: Georgia, serif;
height: 90px;
position: inherit;
}
#talltabs-maroon ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
position: relative;
left: 50%;
text-align: center;
}
#talltabs-maroon ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
#talltabs-maroon ul li a {
display: block;
float: left;
margin: 0 3px 0 0;
padding: 0px 10px 6px 10px;
background: #CD324F;
text-decoration: none;
color: #fff;
}
#talltabs-maroon ul li a p:hover {
color: aqua;
}
#talltabs-maroon ul li a:hover {
padding: 20px 10px 6px 10px;
color: black
}
#talltabs-maroon ul li.active a,
#talltabs-maroon ul li.active a:hover {
padding: 25px 10px 6px 10px;
border-width: 5px;
border-color: aqua;
color: aqua;
}
CSS for drop down menu i tried.
.dropbtn {
list-style-type: none;
color: white;
padding: 14px;
font-size: 14px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
list-style-type: none;
display: none;
position: absolute;
right: 0;
/*background-color: black;*/
background-image: url('../../Images/black-olive.jpg'); /*dropdowm popup*/
min-width: 160px;
box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.2);
z-index: 1;
padding-right: 2px;
margin-right: 2px;
}
.dropdown-content a {
color: white;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
/*background-color: gray;*/
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
/*background-color: #3e8e41;*/
}
pleas help me.
thanks
tink.
Here is my answer for same example, I changed complete css,
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
display: inline-block;
margin-right: -1px;
position: relative;
padding: 15px 20px;
background: #CD324F;
cursor: pointer;
color: black;
height: 40px;
width: auto;
text-align:center;
}
ul li a{
color:black;
}
ul li:hover {
background: #CD324F;
color: #fff;
height: 45px;
}
ul li a:hover {
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 68px;
left: 0;
width: 160px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #ce5068;
display: block;
color: #CD324F;
height: 35px;
}
ul li ul li:hover {
background: #CD324F;
height: 35px;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<div style="height: 77px; width:100%; margin-top:65px;text-align:center; border-top:solid; border-top-color:#CD324F">
<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
Result: on hover portfolio, drop down will appear
Working example on JSFiddle.
I really recommend to look at bootstrap's drop down menu. It is easy to use and most things are already done for you. good luck
Here is the link: https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
your code is bit confusing , i have created a simple demo for you how to do it.
here is my HTML code
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
}
p {
text-align: center;
}
nav {
margin: 50px 0;
background-color: #E64A19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>WordPress
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li>Web Design
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials
</ul>
</nav>
</div>
How to make a responsive make the navbar collapse into a hamburger menu bar after a certain width without bootstrap, but from scratch?
Here is the fiddlehttps://jsfiddle.net/6951Lscu/
#myNavbar{
position: fixed;
width: 100%;
background: white;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #E8E8E8;
text-decoration: none;
}
ul{
list-style: none;
}
.medium{
font-family: "Roboto", sans-serif;
font-weight: 500;
}
.right-nav{
padding: 8px 15px;
float: right;
}
div.container{
font-family: Raleway;
margin: 0 auto;
padding: 6px 3em;
text-align: center;
}
div.container a
{
color: #000;
text-decoration: none;
margin: 0px 20px;
padding: 5px 5px;
position: relative;
}
<div id="myNavbar">
<div class="container">
<ul>
<li style="float:left"><img class="navlogo" src="svg/navlogo.svg" alt=""></li>
<li class="right-nav"><span class="medium">KONTAKT</span></li>
<li class="right-nav"><span class="medium">PRIS</span></li>
<li class="right-nav"><span class="medium">GARANTIER</span></li>
<li class="right-nav"><span class="medium">OM MEG</span></li>
</ul>
</div>
</div>
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
header {
background: #181818;
height: 200px;
padding-top: 40px;
}
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
.logo {
text-decoration: none;
color: #777;
font-weight: 800;
font-size: 30px;
line-height: 40px;
}
h1 {
text-align: center;
width: 100%;
margin-top: 120px;
color: #eee;
font-weight: 800;
font-size: 40px;
}
nav > ul {
float: right;
}
nav > ul > li {
text-align: center;
line-height: 40px;
margin-left: 70px;
}
nav > ul li ul li {
width: 100%;
text-align: left;
}
nav ul li:hover {
cursor: pointer;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover > a {
color: #777;
}
nav > ul > li > a {
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-decoration: none;
}
nav > ul > li {
float: left;
}
nav a {
color: white;
}
nav > ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 2000;
}
nav > ul li ul li > a {
text-decoration: none;
}
[type="checkbox"],
label {
display: none;
}
#media screen and (max-width: 768px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
right: 20px;
top: 0px;
}
label:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}
[type="checkbox"]:checked ~ ul {
display: block;
z-index: 9999;
position: absolute;
right: 20px;
left: 20px;
}
nav a {
color: #777;
}
nav ul li {
display: block;
float: none;
width: 100%;
text-align: left;
background: #222;
text-indent: 20px;
}
nav > ul > li {
margin-left: 0px;
}
nav > ul li ul li {
display: block;
float: none;
}
nav > ul li ul {
display: block;
position: relative;
width: 100%;
z-index: 9999;
float: none;
}
h1 {
font-size: 26px;
}
}
<header>
<div class="inner">
<nav>
Logo
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li>Home</li>
<li>
Work
<ul>
<li>Web</li>
<li>Print</li>
</ul>
</li>
<li>Service</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
You should refer to Hanlin Chong's CodePen which utilizes #media queries to handle responsive behavior based on max-width of the screen.
Or start with the basic W3Schools Responsive Navbar tutorial: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
You should read about #media rule in CSS3. Here is url Click. There is no other way to do that without bootstrap. Good luck!
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>
I have a quick question, can anyone help me out with making my menu look like the the on this website:
https://forums.digitalpoint.com/threads/please-help-with-css-navigation-overhang.2102229/
I have tried several things now and just can't seem to get it...
My current code is:
HTML:
<div class="navbar">
<ul>
<li>HOME</li>
<li>TREATMENTS</li>
<li>CONTACT</li>
<li>OTHER</li>
</ul>
</div>
CSS:
/*Content for Navigation Bar*/
.navbar {
width: 760px;
padding-left: 200px;
height: 50px;
background-color: #534b49;
text-align: center;
float: left;
font-size: 20px;
padding-top: 0px;
padding-bottom: 0px;
}
.navbar ul {
}
.navbar ul li {
list-style: none;
text-align: left;
}
.navbar li {
float: left;
padding-right: 15px;
}
.navbar li a {
color: #fff;
text-decoration: none;
}
.navbar li a:hover {
color: #00a6bd;
text-decoration: none;
}
.navbar li a#active {
color: #00a6bd;
text-decoration:none;
}
Thanks in advance!
Jock
Here is the latest code :
Html
<div>
<div class="navbar">
<div class="cornerl"></div>
<ul>
<li>HOME</li>
<li>TREATMENTS</li>
<li>CONTACT</li>
<li>OTHER</li>
</ul>
<div class="cornerr"></div>
</div>
<div class="strip" style="clear:both"> </div>
</div>
css
.navbar {
position: relative;
width: 760px;
padding-left: 200px;
height: 50px;
background-color: #004080;
text-align: center;
float: left;
font-size: 16px;
padding-top: 0px;
padding-bottom: 0px;
}
.navbar ul {
}
.navbar ul li {
list-style: none;
text-align: left;
}
.navbar li {
float: left;
}
.navbar li a {
padding:12px;
padding-bottom:15px;
color: #fff;
text-decoration: none;
}
.navbar li a:hover {
color: #00a6bd;
border-radius:3px;
text-decoration: none;
background:#ff7000;
color:#534b49;
}
.navbar li a#active {
color: #00a6bd;
text-decoration:none;
}
.strip{
background-color: #ff7000;
height: 3px;
width: 948px;
margin-left: 7px;
}
.cornerl{
border-color: transparent #FF7000 transparent transparent;
left: -10px;
}
.cornerl,.cornerr{
position: absolute;
bottom: -10px;
z-index: -1;
border-style: solid;
border-width: 10px;
}
.cornerr{
float:right;
right:-10px;
border-color: transparent transparent transparent #FF7000;
}
here is the live example