I am designing a nav bar, which needs to be closed. This is simple html and css. I am attaching the design.
This is design it should look like :-
This is my current design :-
<html>
<head>
<title>Example</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="body">
<div class="header">
<h1>Home Page</h1>
<div class="navbar">
<div>
<ul class="nav">
<li class="nav"><a class="nav" href="#">Menu link 1</a></li>
<li class="nav"><a class="nav" href="#">Menu link 2</a></li>
<li class="nav"><a class="nav" href="#">Menu link 3</a></li>
<li class="nav"><a class="nav" href="#">Menu link 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Remove from "a. nav" margin style:
margin-left: 15px;
margin-right: 2px;
here is your new navbar class
.navbar {
height: 28px;
padding-top: 7px;
margin-top: 54px;
border: 1px solid #F00;
}
and example: https://jsfiddle.net/sqhaqcoo/1/
to reduce button width change padding: 8px 50px; to padding: 8px 40px;
I would add a fixed width:750px to the .navbar and margin:0 auto, then reduce the margin-left and remove the margin-right for the a.nav like here:
body{
background-color: #dddddd;
margin: 0;
padding: 0;
}
h1{
color:#7ba1cc;
font-size: 20px;
margin: 0;
padding: 0;
}
table{margin: 0 auto;
margin-top: 20px;
width: 70%;
}
table, th, td {
border: 1px solid black;
}
.black{
border-collapse: collapse;
}
.body{
width: 800px;
height: 1000px;
margin: 0 auto;
background-color: #cccccc;
}
.header{
height:115px;
background-color: #1d8bb3;
}
.navbar{
height:25px;
padding-top:8px;
margin-top:57px;
border: 1px solid red;
width: 750px;
margin: 0 auto;
}
ul.nav, li.nav {
display:inline-block;
float: inside;
margin: 0px;
padding: 0px;
}
a.nav {
background-color: #E2DDDD;
padding: 8px 50px 8px 50px;
margin-left: 5px;
text-decoration: none;
text-align:center;
}
a:hover.nav {
background-color: #CCC8C8;
}
<html>
<head>
<title> Homework 2</title>
<meta charset= "UTF-8">
</head>
<body>
<div class="body">
<div class="header">
<h1> Home Page </h1>
<div class="navbar" >
<div>
<ul class="nav">
<li class="nav"><a class="nav" href="#">Menu link 1</a></li>
<li class="nav"><a class="nav" href="#">Menu link 2</a></li>
<li class="nav"><a class="nav" href="#">Menu link 3</a></li>
<li class="nav"><a class="nav" href="#">Menu link 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I'm new to this so apologies for any bad formatting and wrong terminology.
I'm trying to create a nav bar at the top of a page and have it the same width as my wrapper which is 1000px. I managed to get it to the center once but it didn't align with my wrapper and I cant even recreate that.
Any help at all would be appreciated, even if it doesn't directly answer my question
HTML:
<DOCTYPE html>
<head>
<link rel="stylesheet" href="navtest.css">
</head>
<html>
<body>
<header>
<div class="wrapper">
<nav class="topnav">
<ul class="topnavlist">
<li><a class="topnavlink">Menu 1</a></li>
<li><a class="topnavlink">Menu 2</a></li>
<li><a class="topnavlink">Menu 3</a></li>
<li><a class="topnavlink">Menu 4</a></li>
<li><a class="topnavlink">Menu 5</a></li>
<li><a class="topnavlink">Menu 6</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="wrapper">
<p>Main Text</p>
</div>
</main>
</body>
</html>
CSS:
.topnavlist {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.topnavlink {
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
display: block;
float: left;
}
.topnavlink:hover {
background-color: #111;
}
header {
position: fixed;
top: 0;
width: 1000px;
}
.wrapper {
margin: auto;
width: 1000px;
position: relative;
}
body {
padding-top: 50px;
}
Do you mean like this?
.topnavlist {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
display:flex;
justify-content:center;
}
.topnavlink {
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
display: block;
}
.topnavlink:hover {
background-color: #111;
}
header {
margin:0 auto;
top: 0;
width: 1000px;
}
.wrapper {
margin: 0 auto;
width: 1000px;
position:fixed;
top:0;
}
body {
padding-top: 50px;
}
html
css
<DOCTYPE html>
<head>
<link rel="stylesheet" href="navtest.css">
</head>
<html>
<body>
<header>
<div class="wrapper">
<nav class="topnav">
<ul class="topnavlist">
<li><a class="topnavlink">Menu 1</a></li>
<li><a class="topnavlink">Menu 2</a></li>
<li><a class="topnavlink">Menu 3</a></li>
<li><a class="topnavlink">Menu 4</a></li>
<li><a class="topnavlink">Menu 5</a></li>
<li><a class="topnavlink">Menu 6</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div>
<p>Main Text</p>
</div>
</main>
</body>
</html>
header {
margin:0 auto;
top: 0;
width: 1000px;
}
This part of the code was interfering with the positioning of the nav bar, removing it fixed the issue and didn't cause any other problems.
I'm making a web page for restaurant. Design says, that I need a little line between page selectors. Have already tried something, but thing worked.
It's HTML5 and CSS3.
* {
margin: 0em;
padding: 0em;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html {
background: url(https://images.unsplash.com/photo-1526234362653-3b75a0c07438?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80) black no-repeat center center fixed;
background-size: cover;
}
h1 {
color: white;
font-size: 50px;
text-transform: uppercase;
text-align: center;
font-weight: normal;
padding: 5% 0 13%;
}
ul {
list-style-type: none;
padding: 10px 20px;
background: black;
box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.95);
border-radius: 10px;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: white;
}
a:hover {
line-height: 0 !important;
transform: scale(1.5) !important;
transition: all 1s ease !important;
color: wheat;
}
.menu {
font-size: 32px;
width: 75%;
margin: auto;
max-width: 960px;
}
.left {
float: left;
text-align: right;
border-right: solid white;
padding-right: 25px;
}
.right {
float: right;
text-align: left;
border-left: solid white;
padding-left: 25px;
}
a {
list-style-position: inside;
border: 1px solid white;
}
<body>
<header>
<h1 class="home-header">Restoran</h1>
</header>
<div class="menu">
<div class="left">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Menu">Menu</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Reservation">Reservation</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Deals">Deals</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Shop">Shop</a></li>
</ul>
</div>
<div class="right">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Events">Events</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Gallery">Gallery</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Contact">Contact</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="AboutUs">About Us</a></li>
</ul>
</div>
</div>
</body>
I hope everything is not so bad :D
Really need this help!
And this is what i would like to have:
https://imgur.com/zxUhiSu/
Added lines (<hr>) between your menu selectors
<body>
<header>
<h1 class="home-header">Restoran</h1>
</header>
<div class="menu">
<div class="left">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Menu">Menu</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Reservation">Reservation</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Deals">Deals</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Shop">Shop</a></li>
</ul>
</div>
<div class="right">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Events">Events</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Gallery">Gallery</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Contact">Contact</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="AboutUs">About Us</a></li>
</ul>
</div>
</div>
For the CSS I suggest you don't use !important
A sample jsfiddle
EDIT: The answer to this problem has been somewhat solved, however fixing this problem arises another, and I wish to know how to remove the scroll wheel if I remove overflow-x: hidden; from my CSS? Thanks.
Look at the right column, at the bottom there isn't any shading, I am not sure why that is after tinkering with it.
However whenever I add more text to the section the shading is correct on the side column as so:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>int222_162d16 - Assignment 2 - Home Page</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" />
</head>
<body>
<nav class="fixed-nav-bar">
<ul class="nav">
<li class="nav"><a class="nav" href="../index.html">♠ My Zenit Account</a></li>
<li class="nav"><a class="active" href="index.html">Home</a></li>
<li class="nav"><a class="nav" href="gallery.html">Gallery</a></li>
<li class="nav"><a class="nav" href="video.html">Video</a></li>
<li class="nav"><a class="nav" href="audio.html">Audio</a></li>
<li class="nav"><a class="nav" href="table.html">Tables With CSS</a></li>
<li class="nav"><a class="nav" href="pizza/index.html">Forms</a></li>
<li class="nav"><a class="nav" href="css/sitecss.css">CSS Used</a></li>
<li class="nav"><a class="nav" href="extra/index.html">Extra</a></li>
</ul>
</nav>
<h1>Welcome To The Home Page!</h1>
<div class="s">
<aside class="r">
<p class="c"><b><u>Recommended Links</u></b></p>
<p><b>CSS</b></p>
<table>
<ol>
<li>CSS Tutorials</li>
<li>HTML Dog CSS Beginner Tutorials</li>
<li>CSS Tutorials</li>
</ol>
<p><b>JavaScript</b></p>
<ol>
<li>CSS Tutorials</li>
<li>HTML Dog CSS Beginner Tutorials</li>
<li>CSS Tutorials</li>
</ol>
</table>
</aside>
<section class="s">
<h3>HTML5 & CSS Normalize</h3>
<p>The reason why we use normalize.css is due to it providing cross-browser consistency in the styling of HTML elements.</p>
</section>
<section class="s">
<h3>TEXT</h3>
<p>
TEXTTEXTTEXT</u>
</p>
</section>
</div>
<footer class=f>
<script>
var dt=new Date(document.lastModified); // Get document last modified date
document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
</script>
</footer>
</body>
</html>
CSS:
ul.nav
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
border: 1px solid #e7e7e7;
box-shadow: 5px 2px 10px #808080;
}
li.nav
{
float: left;
}
li a.nav
{
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color on hover*/
li a:hover:not(.active)
{
background-color: #ddd;
}
li a.active
{
display: block;
color: #ffffff;
background-color: #9999ff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
section.s /*shadow on sections*/
{
background-color: #ccccff;
box-shadow: 5px 2px 10px 3px #808080;
width:65%;
}
aside.r
{
float: right;
width: 33%;
background-color: #ccccff;
box-shadow: 5px 2px 10px 3px #808080;
}
p.c
{
text-align: center;
width: 100%;
}
footer.f
{
bottom: 0;
width:100%;
background:#ccccff;
color:#000000;
border:1px solid #cccccc;
position:absolute;
text-align:center;
font-weight:bold;
display:inline-block;
margin: 0px auto;
line-height:20px;
box-shadow: 5px 2px 10px 3px #808080;
clear: both;
}
aside p { margin-top: 0 }
html, body {
max-width: 100%;
overflow-x: hidden;
}
Remove overflow-x: hidden for body,html
html, body {
max-width: 100%;
/* overflow-x: hidden;*/
}
ul.nav
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
border: 1px solid #e7e7e7;
box-shadow: 5px 2px 10px #808080;
}
li.nav
{
float: left;
}
li a.nav
{
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color on hover*/
li a:hover:not(.active)
{
background-color: #ddd;
}
li a.active
{
display: block;
color: #ffffff;
background-color: #9999ff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
section.s /*shadow on sections*/
{
background-color: #ccccff;
box-shadow: 5px 2px 10px 3px #808080;
width:65%;
}
aside.r
{
float: right;
width: 33%;
background-color: #ccccff;
box-shadow: 5px 2px 10px 3px #808080;
}
p.c
{
text-align: center;
width: 100%;
}
footer.f
{
bottom: 0;
width:100%;
background:#ccccff;
color:#000000;
border:1px solid #cccccc;
position:absolute;
text-align:center;
font-weight:bold;
display:inline-block;
margin: 0px auto;
line-height:20px;
box-shadow: 5px 2px 10px 3px #808080;
clear: both;
}
aside p { margin-top: 0 }
html, body {
max-width: 100%;
/* overflow-x: hidden;*/
}
<ul class="nav">
<li class="nav"><a class="nav" href="../index.html">♠ My Zenit Account</a></li>
<li class="nav"><a class="active" href="index.html">Home</a></li>
<li class="nav"><a class="nav" href="gallery.html">Gallery</a></li>
<li class="nav"><a class="nav" href="video.html">Video</a></li>
<li class="nav"><a class="nav" href="audio.html">Audio</a></li>
<li class="nav"><a class="nav" href="table.html">Tables With CSS</a></li>
<li class="nav"><a class="nav" href="pizza/index.html">Forms</a></li>
<li class="nav"><a class="nav" href="css/sitecss.css">CSS Used</a></li>
<li class="nav"><a class="nav" href="extra/index.html">Extra</a></li>
</ul>
</nav>
<h1>Welcome To The Home Page!</h1>
<div class="s">
<aside class="r">
<p class="c"><b><u>Recommended Links</u></b></p>
<p><b>CSS</b></p>
<table>
<ol>
<li>CSS Tutorials</li>
<li>HTML Dog CSS Beginner Tutorials</li>
<li>CSS Tutorials</li>
</ol>
<p><b>JavaScript</b></p>
<ol>
<li>CSS Tutorials</li>
<li>HTML Dog CSS Beginner Tutorials</li>
<li>CSS Tutorials</li>
</ol>
</table>
</aside>
<section class="s">
<h3>HTML5 & CSS Normalize</h3>
<p>The reason why we use normalize.css is due to it providing cross-browser consistency in the styling of HTML elements.</p>
</section>
<section class="s">
<h3>TEXT</h3>
<p>
TEXTTEXTTEXT</u>
</p>
</section>
</div>
<footer class=f>
<script>
var dt=new Date(document.lastModified); // Get document last modified date
document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
</script>
</footer>
I have a couple multi-column drop down menus as a part of my main nav. The anchor hit area around each of the links in both multi-column drop down menus is for some reason positioned above the link itself. How do I fix it so the hit area centers around the link text like a normal anchor would?
Here's the site:
http://www.zrrdigitalmedia.com/_ADU/index.html
Here's the HTML & CSS of the nav:
HTML:
<nav class="top-bar bottom-bar" data-topbar>
<section class="top-bar-section">
<ul class="right">
<li>CLIENTS</li>
<li class="divider"></li>
<li>COMPANY</li>
<li class="divider"></li>
<li>DEMO</li>
</ul>
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown not-click">
COURSES
<ul class="dropdown dropdown-wrapper mega-menu">
<li>
<div>
<div class="mega-menu-category small-4 columns">
<ul>
<li><h3>MATH</h3></li>
<li class=""></li>
<li class="mega-menu-item active">GENERAL STUDIES</li>
<li class="mega-menu-item">FINANCE & BUSINESS</li>
<li class="mega-menu-item">ENGINEERING & TECHNICAL</li>
</ul>
</div>
<div class="mega-menu-category small-4 columns">
<ul>
<li><h3>SCIENCE</h3></li>
<li class=""></li>
<li class="mega-menu-item active">PREPERATORY PHYSICS</li>
</ul>
</div>
<div class="mega-menu-category small-4 columns">
<ul>
<li><h3>MARITIME</h3></li>
<li class=""></li>
<li class="mega-menu-item active">SHIP SUPERINTENDENT (MARINE)</li>
<li class="mega-menu-item">SHIP SUPERINTENDENT (GENERAL)</li>
<li class="mega-menu-item">SHIP SUPERINTENDENT (TECHNICAL)</li>
<li class="mega-menu-item">BREAKBULK SHIPPING</li>
<li class="mega-menu-item">LNG CARGO OPERATIONS</li>
<li class="mega-menu-item">MARITIME LOGISTICS 1</li>
<li class="mega-menu-item">MARINE ENGINEERING</li>
<li class="mega-menu-item">SHIP OPERATIONS</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown not-click">
INDUSTRIES
<ul class="dropdown dropdown-wrapper-2 mega-menu-2">
<li>
<div>
<div class="mega-menu-category small-6 columns">
<ul>
<li><h3>HIGHER EDUCATION</h3></li>
<li class=""></li>
<li class="mega-menu-item">HIGHER EDUCATION OVERVIEW</li>
<li class="mega-menu-item">TEACHERS</li>
<ul>
<li class="mega-menu-sub-item">OVERVIEW</li>
<li class="mega-menu-sub-item">COURSES</li>
<li class="mega-menu-sub-item">FEATURES</li>
<li class="mega-menu-sub-item">FAQ</li>
</ul>
<li class="mega-menu-item">ADMINISTRATORS</li>
<ul>
<li class="mega-menu-sub-item">OVERVIEW</li>
<li class="mega-menu-sub-item">IMPLEMENTATION</li>
<li class="mega-menu-sub-item">FAQ</li>
</ul>
</ul>
</div>
<div class="mega-menu-category small-6 columns">
<ul>
<li><h3>MARITIME</h3></li>
<li class=""></li>
<li class="mega-menu-item">MARITIME INDUSTRY</li>
<li class="mega-menu-item">MARITIME INSTITUTIONS</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="divider"><li>
</ul>
</section>
</nav>
CSS:
.bottom-bar{
position: fixed;
bottom: 0;
width: 100%;
left: 0;
background-color: #d5b93f;
}
.mega-menu{
position: relative;
bottom: 44px;
left: -220px !important;
background-color: #d5b93f;
padding-bottom: 200px;
}
.mega-menu-2{
position: relative;
bottom: 44px;
left: -220px !important;
background-color: #d5b93f;
padding-bottom: 200px;
}
.mega-menu-item a{
height: 20px;
background: #d5b93f !important;
font-size: 12px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.mega-menu-sub-item a{
height: 20px;
background: #d5b93f !important;
font-size: 12px !important;
padding-left: 0px !important;
padding-right: 0px !important;
position: relative;
left: 25px;
}
.mega-menu-item a:hover{
height: 20px;
background-color: none !important;
font-size: 12px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.top-bar-section li a{
background: none !important;
}
.top-bar-section ul li{
background: none;
font-family: "FuturaStd-Book";
font-size: 20px;
}
.top-bar-section ul li:hover{
background-color: none;
font-family: "FuturaStd-Book";
font-size: 20px;
}
.top-bar-section ul li > a{
color: #60100f;
font-family: "FuturaStd-Book";
font-size: 16px;
}
.top-bar-section ul{
height: 270px !important;
}
.top-bar-section .dropdown li{
height: 20px;
}
.top-bar-section li.active:not(.has-form) a:not(.button){
padding-left: 0px;
padding-right: 0px;
}
.mega-menu-category{
padding-left: 30px !important;
padding-right: 30px !important;
}
h3
{
color: #fff !important;
font-family: "FuturaStd-Book";
}
#media only screen and (min-width: 641px)
{
.dropdown-wrapper
{
background-color: rgba(96, 16, 15, 0.7) !important;
width: 740px !important;
}
.dropdown-wrapper-2
{
background-color: rgba(96, 16, 15, 0.7) !important;
width: 640px !important;
height: 400px !important;
}
}
I'm using Zurb Foundation 5 as a Front-End framework. Been working on this for days & can't figure out why this is happening. All of your support is welcomed & greatly appreciated! Thank you!!
I viewed your site's source code and tried some things and found that you problem is in line 1365 of foundation.css. Just remove the display:block; and your problem disappears!
Ok! So I made this nav bar and it works perfectly in all browsers except IE7.
It is a left side nav and for some reason it collapses in IE7 but every other browser displays it fine.
Here's the html.
<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul class="navbar">
<li class="nav_head"><div class="navhd_outline">Products</div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline">View Categories</div></li>
<li class="nav_subhead"><div class="navsub_outline">Add/Remove</div></li>
</ul>
</li>
<li class="nav_head"><div class="navhd_outline">Email</div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline">New Blast</div></li>
<li class="nav_subhead"><div class="navsub_outline">View Blast</div></li>
</ul>
</li>
<li class="nav_head"><div class="navhd_outline">Reports</div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline">By Month</div></li>
<li class="nav_subhead"><div class="navsub_outline">By Type</div></li>
</ul>
</li>
<li class="nav_head"><div class="navhd_outline">Recipes</div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline">View Recipes</div></li>
<li class="nav_subhead"><div class="navsub_outline">Add/Remove</div></li>
</ul>
</li>
<li class="nav_head"><div class="navhd_outline">Television</div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline">View List</div></li>
<li class="nav_subhead"><div class="navsub_outline">Add/Remove</div></li>
</ul>
</li>
<li class="nav_head blog_head"><div class="navhd_outline">Blog</div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline">View Posts</div></li>
<li class="nav_subhead"><div class="navsub_outline">Add/Remove</div></li>
</ul>
</li>
<li class="nav_bottom"> </li>
</ul>
</body>
</html>
And here is the CSS.
.navbar {
float: left;
background-color: #4d89d1;
background-repeat: no-repeat;
background-position: 18px 0px;
top: -25px;
width: 200px;
margin-top: 20px;
margin-left: 30px;
padding-top: 25px;
padding-bottom: 30px;
}
.nav_head {
margin: 0 auto;
padding: 1px;
height: 36px;
list-style: none;
}
.nav_head a {
font-size: 15px;
color: #900606;
}
.nav_head a:hover {
color: #f5bf2b;
}
.navhd_outline {
margin: 1px;
padding-top: 8px;
padding-left: 40px;
padding-bottom: 22px;
border: 1px dashed #f5bf2b;
width: 154px;
height: 2px;
}
.nav_subhead {
padding: 1px;
background-color: #900606;
height: 36px;
list-style: none;
margin-left: 25px;
width: 155px;
text-align: right;
}
.nav_subhead a {
color: #ffffff;
text-decoration: none;
padding-right: 10px;
}
.nav_subhead a:hover {
color: #f5bf2b;
}
.navsub_outline {
margin: 1px;
padding-top: 10px;
padding-left: 20px;
padding-bottom: 20px;
border: 1px dashed #f5bf2b;
width: 131px;
height: 2px;
}
.nav_bottom {
height: 30px;
background-position: 33px 0px;
background-repeat: no-repeat;
}
You still have invalid HTML. The problem repeats through every single <li> so I'm only showing the first one...
<ul class="navbar">
<li class="nav_head">
<div class="navhd_outline">Products</div>
</li> <!-- <<< this one closes the LI item -->
<ul>
<li class="nav_subhead">
<div class="navsub_outline">View Categories</div>
</li>
<li class="nav_subhead">
<div class="navsub_outline">Add/Remove</div>
</li>
</ul>
</li> <!-- <<< this is presently an extra one outside of the LI item -->
...
<li class="nav_bottom"> </li>
</ul>
You still have an extra closing </li> tag for every single <li> item. The inner <ul> needs to be contained inside the <li></li>, where you have it outside along with another </li>. Remove </li> tags as indicated below...
<ul class="navbar">
<li class="nav_head">
<div class="navhd_outline">Products</div>
<ul> <!-- <<< the entire child UL is inside the LI where it belongs -->
<li class="nav_subhead">
<div class="navsub_outline">View Categories</div>
</li>
<li class="nav_subhead">
<div class="navsub_outline">Add/Remove</div>
</li>
</ul>
</li> <!-- <<< this one closes the LI item -->
...
<li class="nav_bottom"> </li>
</ul>
Run your page through the W3C Validator.