Webpage Screenshot:
/* All */
html {
font-family: 'Work Sans', sans-serif;
margin: 0 auto;
background-image: url("Assets/Background_Image.jpg");
color: white;
}
/*Navbar */
.navbar {
background-color: #f0f0f0;
width: 100%;
float: top;
margin: 0 auto;
border: 2px solid gray;
border-radius: 3px;
}
.nav_align {
list-style-type: none;
display: inline;
}
.nav_logo {
background-color: #f0f0f0;
border: 2px solid #f0f0f0;
border-radius: 5px;
margin: 0;
padding: 0;
}
.nav_title {
color: gray;
background-color: aqua;
padding: 3px;
}
.Main_Logo {
width: 150px;
height: 150px;
}
.nav_sm {
}
.sm_list {
}
.sm_item img {
width: 30px;
height: 30px;
float: top;
border-radius: 5px;
}
.nav_search {
}
.nav_btns {
}
.nav_list {
}
.nav_btn {
text-decoration: none;
padding: 5px;
background-color:#DCDCDC;
color: white;
border-radius: 5px;
list-style-type: none;
display: inline-block;
}
.nav_btn:hover {
background-color: #1E40FF;
color: white;
padding: 7px;
}
.navbar a:hover {
color: white;
}
/*Navbar End */
<?php
require_once "Includes/db-Connect.php";
//session data will be here
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" type="text/css" href="Stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<title>Game Informer - Home</title>
<nav class="navbar">
<ul class="nav_align">
<li class="nav_align">
<div class="nav_logo">
<img src="Assets/Main_Logo.png" alt="Main_Logo" class="Main_Logo">
</div>
</li>
<li class="nav_align">
<div class="nav_title">
<h1>Game Informant</h1>
</div>
</li>
<li class="nav_align">
<div class="nav_sm">
<ul class="sm_list">
<li class="sm_item"><a href="https://www.youtube.com/?gl=GB&hl=en-GB">
<img src="Assets/YT_Logo.png" alt="youtube"></a></li>
<li class="sm_item"><a href="https://www.facebook.com/">
<img src="Assets/FB_Logo.png" alt="facebook"></a></li>
<li class="sm_item"><a href="https://twitter.com/Twitter">
<img src="Assets/TW_Logo.png" alt="twitter"></a></li>
</ul>
</div>
</li>
<li class="nav_align">
<form class="nav_search">
<input type="search" name="search" placeholder="Non-Function">
<input type="Submit" value="Submit">
</form>
</li>
<li class="nav_align">
<div class="nav_btns">
<ul class="nav_align">
<li class="nav_btn">Home</li>
<li class="nav_btn">Questions</li>
<li class="nav_btn">Account</li>
<li class="nav_btn">Contact</li>
</ul>
</div>
</li>
</ul>
</nav>
</head>
<hr>
<body>
<br>
<br>
<br>
<br>
<?php
require_once "Includes/db-Connect.php";
?>
<div class="sign_con">
<button class="sign_button">Sign In</button>
<button class="sign_button">Sign Up</button>
</div>
</body>
</html>
I am a computer science student and I need some help I can't get all my navigation items inline. I'm a huge beginner at this as it seems like a 2 minute fix but I am clueless as I've tried for about an hour now.
Add below css..
.sm_list {
list-style:none;
}
.sm_list > li {
display: inline;
}
/* All */
html {
font-family: 'Work Sans', sans-serif;
margin: 0 auto;
background-image: url("Assets/Background_Image.jpg");
color: white;
}
/*Navbar */
.navbar {
background-color: #f0f0f0;
width: 100%;
float: top;
margin: 0 auto;
border: 2px solid gray;
border-radius: 3px;
}
.nav_align {
list-style-type: none;
display: inline;
}
.nav_logo {
background-color: #f0f0f0;
border: 2px solid #f0f0f0;
border-radius: 5px;
margin: 0;
padding: 0;
}
.nav_title {
color: gray;
background-color: aqua;
padding: 3px;
}
.Main_Logo {
width: 150px;
height: 150px;
}
.nav_sm {
}
.sm_list {
list-style:none;
}
.sm_list > li {
display: inline;
}
.sm_item img {
width: 30px;
height: 30px;
float: top;
border-radius: 5px;
}
.nav_search {
}
.nav_btns {
}
.nav_list {
}
.nav_btn {
text-decoration: none;
padding: 5px;
background-color:#DCDCDC;
color: white;
border-radius: 5px;
list-style-type: none;
display: inline-block;
}
.nav_btn:hover {
background-color: #1E40FF;
color: white;
padding: 7px;
}
.navbar a:hover {
color: white;
}
/*Navbar End */
<?php
require_once "Includes/db-Connect.php";
//session data will be here
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" type="text/css" href="Stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<title>Game Informer - Home</title>
<nav class="navbar">
<ul class="nav_align">
<li class="nav_align">
<div class="nav_logo">
<img src="Assets/Main_Logo.png" alt="Main_Logo" class="Main_Logo">
</div>
</li>
<li class="nav_align">
<div class="nav_title">
<h1>Game Informant</h1>
</div>
</li>
<li class="nav_align">
<div class="nav_sm">
<ul class="sm_list">
<li class="sm_item"><a href="https://www.youtube.com/?gl=GB&hl=en-GB">
<img src="Assets/YT_Logo.png" alt="youtube"></a></li>
<li class="sm_item"><a href="https://www.facebook.com/">
<img src="Assets/FB_Logo.png" alt="facebook"></a></li>
<li class="sm_item"><a href="https://twitter.com/Twitter">
<img src="Assets/TW_Logo.png" alt="twitter"></a></li>
</ul>
</div>
</li>
<li class="nav_align">
<form class="nav_search">
<input type="search" name="search" placeholder="Non-Function">
<input type="Submit" value="Submit">
</form>
</li>
<li class="nav_align">
<div class="nav_btns">
<ul class="nav_align">
<li class="nav_btn">Home</li>
<li class="nav_btn">Questions</li>
<li class="nav_btn">Account</li>
<li class="nav_btn">Contact</li>
</ul>
</div>
</li>
</ul>
</nav>
</head>
<hr>
<body>
<br>
<br>
<br>
<br>
<?php
require_once "Includes/db-Connect.php";
?>
<div class="sign_con">
<button class="sign_button">Sign In</button>
<button class="sign_button">Sign Up</button>
</div>
</body>
</html>
use these two changes
.nav_align {
list-style-type: none;
display:flex;
flex-direction: column;
}
use flexbox.
.nav_btn {
text-decoration: none;
padding: 5px;
background-color:#DCDCDC;
color: white;
border-radius: 5px;
list-style-type: none;
width:160px;
margin-top:20px;
text-align:center;
}
.nav_align {
list-style-type: none;
display: inline-block;
}
Related
it works fine with all browsers except chrome, while real-preview using Dreamweaver seems fine with all of them, but when uploading it to the server the problem shows up in chrome only. tried to change the inline/block tag. the display: none/block tag everything and still can not solve it. is it a CSS related thing or javascript or what? the dropdown menu works fine on every browser except Chrome
html, body {
margin: 0px;
padding: 0px;
width: 100%;
}
ul > li{
list-style-type: none;
display: inline-block;
}
.grid-container {
display:grid;
}
a {
display: block;
}
#upper-bar {
background-color: #00A2CB;
color: white;
font-weight: bold;
font-family: sans-serif;
padding-left: 50px;
padding-right: 50px;
}
div[id="upper-bar"] a {
color: white;
padding: 5px;
}
#lower-bar {
font-weight: bold;
font-family: sans-serif;
padding-left: 70px;
padding-right: 70px;
}
div[id="lower-bar"] a {
color: black;
padding: 5px;
}
.align-left {
float:left;
}
.align-right {
float: right;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #00A2CB;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #008FB3;}
.dropdown:hover .dropdown-content {
display: block;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Test page</title>
</head>
<body>
<header class="grid-container">
<div id="upper-bar">
<div class="align-left">
<ul>
<li>|</li>
<li><a href="#" >ABOUT US</a></li>
<li>|</li>
<li><a href="#" >OUR SERVICES</a></li>
<li>|</li>
<li class="dropdown">
HELP
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</div>
<div id="lower-bar">
<div class="align-left">
<ul>
<li></li>
<li><a href="#" >Home</a></li>
<li><a href="#" >Individuals</a></li>
<li><a href="#" >doctors</a></li>
<li><a href="#" >Companies</a></li>
</ul>
</div>
<div class="align-right">
<ul>
<li><a href="#" >Login</a></li>
<li><a href="#" >Signup</a></li>
</ul>
</div>
</div>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
I am learning html and css for front-end web development. While writing code for drop-down box in navigation-menu, i am not getting the desired output. In the navigation menu drop down is opening at the left corner but the navigation link is somewhere else. Please help.
HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="wpback"></div>
<div id="wallpaper" ></div>
<div id="name"> <!
========================Name of Company================= >
<header>
<h1 class="prince">PRINCE Institute</h1>
<input type="button" value="Log In" style="float:right"></input>
<input type="button" value="Sign Up" style="float:right">
</input>
</header>
What do you want to know?<br><input type="text"></input>
<input type="button" value="Search"></input>
</div>
<div id="menu"> <!
========================Navigation Menu================= >
<ul>
<li>Home</li>
<li>About
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul></li>
<li>Courses
<ul>
<li>Java</li>
<li>Python</li>
<li>Data Base Management System</li>
<li>Machine Learning</li>
<li>Blockchain</li>
</ul></li>
<li>Settings
<ul>
<li>Your Profile</li>
<li>Your Cart</li>
<li>Mode</li>
</ul></li>
</ul>
</div>
<div> <!
========================Content=========================== >
<ul >Courses Offered:
<li>Java</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Block Chain</li>
<li>Data Base Management System</li></ul>
</div>
</body>
</html>
CSS code:
body {
font-family: lucida console;
font-size: 14px;
color: white;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
#name {
position: relative;
top: 0;
left: 0;
}
.prince {
color: white;
text-align: center;
padding: 5px;
background-color: rgba(65, 15, 0, 0.5);
}
#wpback {
background-color: black;
position: absolute;
width: 100%;
height: 100%;
}
#wallpaper {
background-image: url('tech.jpg');
opacity: 0.1;
position: absolute;
width: 100%;
height: 100%;
}
#menu {
margin-top: 10px;
background-color: rgba(65, 15, 0, 1);
height: 50px;
position: relative;
}
#menu ul {
padding: 0;
margin: 0;
}
#menu ul li {
list-style: none;
display: inline;
}
#menu ul li a {
margin: 10px;
padding: 16px;
text-decoration: none;
color: white;
line-height: 50px;
}
#menu ul li a:hover {
background-color: gray;
color: black;
transition: ease-in-out 0.2s;
}
#menu ul li ul li {
display: none;
}
#menu ul li:hover ul li {
background-color: silver;
display: block;
width: 220px;
}
#menu ul li:hover ul li a {
margin: 10px;
padding: 15px;
text-decoration: none;
line-height: 50px;
color: black;
}
#menu ul li ul li a:hover {
background-color: gray;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="wpback"></div>
<div id="wallpaper"></div>
<div id="name">
<!
========================Name of Company================= >
<header>
<h1 class="prince">PRINCE Institute</h1>
<input type="button" value="Log In" style="float:right"></input>
<input type="button" value="Sign Up" style="float:right">
</input>
</header>
What do you want to know?<br><input type="text"></input>
<input type="button" value="Search"></input>
</div>
<div id="menu">
<!
========================Navigation Menu================= >
<ul>
<li>Home</li>
<li>About
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
</li>
<li>Courses
<ul>
<li>Java</li>
<li>Python</li>
<li>Data Base Management System</li>
<li>Machine Learning</li>
<li>Blockchain</li>
</ul>
</li>
<li>Settings
<ul>
<li>Your Profile</li>
<li>Your Cart</li>
<li>Mode</li>
</ul>
</li>
</ul>
</div>
<div>
<!
========================Content=========================== >
<ul>Courses Offered:
<li>Java</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Block Chain</li>
<li>Data Base Management System</li>
</ul>
</div>
</body>
</html>
When i am putting no options in the navigation menu then the options Home, About, Couses & Settings are in line but when i am adding options in the menu in dropdown the individual options come downward.
Aligned Dropdown Content
Determine whether the dropdown content should go from left to right or
right to left with the left and right properties.
CSS code
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
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;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
And HTML code is
<div class="dropdown" style="float:left;">
<button class="dropbtn">Left</button>
<div class="dropdown-content" style="left:0;">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">Right</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
How to remove extra margin from the div tag.
I have already added margin and padding to 0px. Does positioning also matters in margin? Even if I want to give margin in this div, so in which unit should I give like in vw or percentage? Please help to resolve this issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.2.1.min.js"></script>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#menubar {
margin: 0;
}
#menubar ol li {
color: white;
float: left;
list-style: none;
padding: 0.5em 0.3em;
background-color: #007ac2;
padding-top: 1em;
padding-right: 45px;
}
</style>
</head>
<body>
<div id="menubar">
<ol>
<li id="abouthover">ABOUT US
<div class="arrow-up">
</div>
</li>
<li id="innovationhover">INNOVATION
<div class="arrow-up2"></div>
</li>
<li id="capabilitieshover">CAPABILITIES
<div class="arrow-up3"></div>
</li>
<li id="careerhover">CAREER
<div class="arrow-up4">
</div>
</li>
<li id="investorhover">INVESTOR RELATIONS
<div class="arrow-up5"></div>
</li>
</ol>
</div>
</body>
</html>
This is happening because of browser defaults. Add the following to your stylesheet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.2.1.min.js"></script>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#menubar {
margin: 0;
}
#menubar a{
text-decoration:none;
color: white;
}
#menubar ol {
margin:0;
padding:0;
}
#menubar ol li {
color: white;
float: left;
list-style: none;
padding: 0.5em 0.3em;
background-color: #007ac2;
padding-top: 1em;
padding-right: 45px;
}
</style>
</head>
<body>
<div id="menubar">
<ol>
<li id="abouthover">ABOUT US
<div class="arrow-up">
</div>
</li>
<li id="innovationhover">INNOVATION
<div class="arrow-up2"></div>
</li>
<li id="capabilitieshover">CAPABILITIES
<div class="arrow-up3"></div>
</li>
<li id="careerhover">CAREER
<div class="arrow-up4">
</div>
</li>
<li id="investorhover">INVESTOR RELATIONS
<div class="arrow-up5"></div>
</li>
</ol>
</div>
</body>
</html>
You have to specify the margin and padding of the HTML doc, and * (everything). See snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.2.1.min.js"></script>
<style type="text/css">
/* FROM HERE */
*,
html {
padding: 0;
margin: 0;
}
/* TO HERE */
body {
padding: 0;
margin: 0;
}
#menubar {
margin: 0;
}
#menubar ol li {
color: white;
float: left;
list-style: none;
padding: 0.5em 0.3em;
background-color: #007ac2;
padding-top: 1em;
padding-right: 45px;
}
</style>
</head>
<body>
<div id="menubar">
<ol>
<li id="abouthover">ABOUT US
<div class="arrow-up">
</div>
</li>
<li id="innovationhover">INNOVATION
<div class="arrow-up2"></div>
</li>
<li id="capabilitieshover">CAPABILITIES
<div class="arrow-up3"></div>
</li>
<li id="careerhover">CAREER
<div class="arrow-up4">
</div>
</li>
<li id="investorhover">INVESTOR RELATIONS
<div class="arrow-up5"></div>
</li>
</ol>
</div>
</body>
</html>
Hope this helps!
Try This:
ol {
margin: 0;
padding: 0;
}
body {
padding: 0;
margin: 0;
}
#menubar {
margin: 0;
}
#menubar ol li {
color: white;
float: left;
list-style: none;
padding: 0.5em 0.3em;
background-color: #007ac2;
padding-top: 1em;
padding-right: 45px;
}
ol {
margin: 0;
padding: 0;
}
<div id="menubar">
<ol>
<li id="abouthover">ABOUT US
<div class="arrow-up">
</div>
</li>
<li id="innovationhover">INNOVATION
<div class="arrow-up2"></div>
</li>
<li id="capabilitieshover">CAPABILITIES
<div class="arrow-up3"></div>
</li>
<li id="careerhover">CAREER
<div class="arrow-up4">
</div>
</li>
<li id="investorhover">INVESTOR RELATIONS
<div class="arrow-up5"></div>
</li>
</ol>
</div>
How to keep space between these three items on top?
I have tried few ways but when I try them they skip to next line. I have added the code I'm trying. And how to keep the size of width at 1000px?
<!doctype html>
<html>
<body>
<title>AquaSL</title>
<link rel="icon" type="image/png" href="image/asl2.png"
<head>
<style>
p {
display: inline-block;
float: left;
}
ul {
list-style-type: none;
width:33%;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #339cff;
display: inline-block;
float: left;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 17px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #345cff;
}
.active {
background-color: #ff9333;
}
</style>
<meta charset="utf-8">
<p><b><font color="white" size="+3">M Y W E B</font></b></p>
<body>
<ul>
<li><a class="active" href="#home">HOME</a></li>
<li>NEWS</li>
<li>Page 2</li>
<li>page3</li>
<li>page4</li>
<li>ABOUT US</li>
</ul>
<img src="image/facebook-icon.png" width="54" height="55">
</body>
<body background="image/background2.jpg"
<br>
<h5 style="position: fixed; bottom: 0; width:100%;text-align: center">
<font color="yellow"><strong> Copyright © MY WEB 2016 All Rights Reserved.
</strong></font></h5>
<img src="/image/strip.jpg" style="width:100%;">
</body>
</html>
Where I want to make spaces is shown below:
You just need to add margin to the middle item ()
<!doctype html>
<html>
<body>
<title>AquaSL</title>
<link rel="icon" type="image/png" href="image/asl2.png"
<head>
<style>
p {
display: inline-block;
float: left;
}
ul {
list-style-type: none;
width:33%;
margin: 0 10px;
padding: 0;
overflow: hidden;
background-color: #339cff;
display: inline-block;
float: left;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 17px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #345cff;
}
.active {
background-color: #ff9333;
}
</style>
<meta charset="utf-8">
<p><b><font color="white" size="+3">M Y W E B</font></b></p>
<body>
<ul>
<li><a class="active" href="#home">HOME</a></li>
<li>NEWS</li>
<li>Page 2</li>
<li>page3</li>
<li>page4</li>
<li>ABOUT US</li>
</ul>
<img src="image/facebook-icon.png" width="54" height="55">
</body>
<body background="image/background2.jpg"
<br>
<h5 style="position: fixed; bottom: 0; width:100%;text-align: center">
<font color="yellow"><strong> Copyright © MY WEB 2016 All Rights Reserved.
</strong></font></h5>
<img src="/image/strip.jpg" style="width:100%;">
</body>
</html>
i want to add drop-down list for every menu but its showing only for "Products". Firstly i made drop-down list only for "Products" menu.But for others menu its not working.
Html code is:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cctvcart store</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="header_wrap">
<div class="header_top_wrap">
<div class="header_top">
</div>
</div>
<!--end of header top wrap -->
<div class="header_bottom_wrap">
<div class="header_bottom">
<ul class="bottom_menu">
<li class="dropdown"><li>Company
<ul class="submenu">
<li>About us
</li>
<li>New Realeses
</li>
<li>Contact us
</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="submenu">
<li>DVR & Kits
</li>
<li>Seurity Cameras
</li>
<li>Spy Camreas</li>
<li>Wireless & IP Cameras</li>
<li>Accessories</li>
<li>Mini Video</li>
</ul>
</li>
<li>Services
</li>
<li class="dropdown"><li>Support
<ul class="submenu">
<li>Support Home
</li>
<li>Warranty
</li>
<li>Feedback
</li>
<li>Contact Tech Support
</li>
</li>
<li class="dropdown"> <li>Multimedia
<ul class="submenu">
<li>Video
</li>
<li>Podcasts
</li>
</li>
</ul>
</div>
</div>
<!--end of bottom wrap -->
</div>
<!--end of header wrap -->
<div class="main_wrap">
<div class="main">
</div>
<!--end of main -->
</div>
<!--end of main wrap -->
<div class="footer_wrap">
<footer></footer>
</div>
<!--end of footer wrap -->
</body>
</html>
style.css:
* {
margin: 0px;
padding: 0px;
}
.header_wrap {
width: 100%;
height: 160px;
background: red;
position: relative;
}
.main_wrap {
width: 100%;
height: 1475px;
background: green;
}
.footer_wrap {
width: 100%;
height: 325px;
background: aqua;
}
.main {
width: 1000px;
height: 100%;
background: blue;
margin: auto;
}
footer {
width: 1000px;
height: 100%;
background: aqua;
margin: auto;
}
.header_top_wrap {
width: 100%;
height: 23px;
background: #ccc;
}
.header_bottom_wrap {
width: 100%;
height: 40px;
background: #06F;
position: absolute;
bottom: 0px;
left: 0px;
}
.header_top {
width: 1000px;
height: 100%;
background: purple;
margin: auto;
}
.header_bottom {
width: 1000px;
height: 100%;
background: black;
margin: auto;
}
.bottom_menu > li {
display: inline-block;
}
.bottom_menu a
{
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
color: #fff;
}
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 40px;
line-height: 35px;
text-align: center;
}
.bottom_menu > li:hover >a
{
background:#fff;
color:#151716;
}
.submenu a:active, .submenu a:visited{
display: block;
color: #fff;
text-decoration: none;
z-index: 21;
}
.submenu {
position: absolute;
display: none;
width:160px;
height:250px;
background:white;
list-style:none;
}
.dropdown:hover > .submenu{
display: block;
}
.submenu>li>a
{
display:block;
width:100%;
height:42px;
background:black;
text-decoration:none;
line-height:58px;
padding-left:50px;
border:1px dashed white;
}
The issue is here:
<li class="dropdown"><li>Company
You have two <li>s. Please remove one. Also you forgot to include this after the </ul>:
</li>
</ul>
</li>
</ul>
Here's a working snippet:
* {
margin: 0px;
padding: 0px;
}
.header_wrap {
width: 100%;
height: 160px;
background: red;
position: relative;
}
.main_wrap {
width: 100%;
height: 1475px;
background: green;
}
.footer_wrap {
width: 100%;
height: 325px;
background: aqua;
}
.main {
width: 1000px;
height: 100%;
background: blue;
margin: auto;
}
footer {
width: 1000px;
height: 100%;
background: aqua;
margin: auto;
}
.header_top_wrap {
width: 100%;
height: 23px;
background: #ccc;
}
.header_bottom_wrap {
width: 100%;
height: 40px;
background: #06F;
position: absolute;
bottom: 0px;
left: 0px;
}
.header_top {
width: 1000px;
height: 100%;
background: purple;
margin: auto;
}
.header_bottom {
width: 1000px;
height: 100%;
background: black;
margin: auto;
}
.bottom_menu > li {
display: inline-block;
}
.bottom_menu a
{
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
color: #fff;
}
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 40px;
line-height: 35px;
text-align: center;
}
.bottom_menu > li:hover >a
{
background:#fff;
color:#151716;
}
.submenu a:active, .submenu a:visited{
display: block;
color: #fff;
text-decoration: none;
z-index: 21;
}
.submenu {
position: absolute;
display: none;
width:160px;
background:white;
list-style:none;
}
.dropdown:hover > .submenu{
display: block;
}
.submenu>li>a
{
display:block;
width:100%;
height:42px;
background:black;
text-decoration:none;
line-height:58px;
padding-left:50px;
border:1px dashed white;
}
<div class="header_wrap">
<div class="header_top_wrap">
<div class="header_top">
</div>
</div>
<!--end of header top wrap -->
<div class="header_bottom_wrap">
<div class="header_bottom">
<ul class="bottom_menu">
<li class="dropdown">Company
<ul class="submenu">
<li>About us</li>
<li>New Realeses</li>
<li>Contact us</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="submenu">
<li>DVR & Kits</li>
<li>Seurity Cameras</li>
<li>Spy Camreas</li>
<li>Wireless & IP Cameras</li>
<li>Accessories</li>
<li>Mini Video</li>
</ul>
</li>
<li>Services</li>
<li class="dropdown">
Support
<ul class="submenu">
<li>Support Home</li>
<li>Warranty</li>
<li class="dropdown">
Multimedia
<ul class="submenu">
<li>Video</li>
<li>Podcasts</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!--end of bottom wrap -->
</div>
<!--end of header wrap -->
<div class="main_wrap">
<div class="main">
</div>
<!--end of main -->
</div>
<!--end of main wrap -->
<div class="footer_wrap">
<footer></footer>
</div>
<!--end of footer wrap -->
Just take down the <li>, because you did it twice.
here is a working Jsfiddle https://jsfiddle.net/v7dLps8b/