I need to draw a small vertical line that should be appear after every navbar li.
Buut the issue is whenever I try to draw something, navbar gets messed up and the navbar goes into second lines. I cant really draw a vertical line either.here's the code
html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Double Double</title>
<link rel="shortcut icon" href="favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700%7CRoboto+Slab:400,100' rel='stylesheet' type='text/css' />
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/double.css" rel="stylesheet">
</head>
<body>
<nav class="navbar" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div style="margin: auto;display: table;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<hr class="vertical"/>
<li>Deals</li>
<li>Pickup Deals</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div>
</nav>
</body>
</html>
css
/*navbar properties */
.navbar .brand {
max-height: 40px;
overflow: visible;
padding-top: 0;
padding-bottom: 0;
}
.navbar a.navbar-brand {
padding: 9px 15px 8px;
}
.navbar{
font-family: young;
clear: both;
}
.navbar a{
color: #515254;
}
.navbar-nav{
font-size: 20px;
padding-top: 20px;
}
#bs-example-navbar-collapse-1{
float: left;
}
.nav > li > a:hover, .nav > li > a:focus{
color: #007f3d;
background: none;
}
.navbar-toggle .icon-bar {
background-color: black;
}
.navbar-toggle {
border: 1px solid #000;
}
.verticalLine {
border-left: thick solid #ff0000;
}
hr.vertical
{
color: black;
width: 0px;
height: 100%; /* or height in PX */
}
/*navbar properties */
JSFIDDLE
Use border-right for each menu li instead of using hr.
.navbar-nav>li{
border-right: 1px solid #000;
}
and remove the last element border.
.navbar-nav>li:last-child{
border: none;
}
You may not add <hr> element. just write this:
.nav > li:not(:last-child) {
border-right: 1px solid red;
box-sizing: border-box;
}
box-sizing: border-box; is for width of li wouldn't exceed its original width
May be this is what you want..
.navbar-default {
background: #005986;
}
.navbar {
border: 0;
border-radius: 0;
}
ul.nav {
list-style: none;
border-right: 1px solid #84B6D0;
}
ul.nav li {
padding: 20px 0;
display: inline-block;
}
ul.nav li a {
padding: 20px 10px;
color: #fff;
position: relative;
}
ul.nav li a:after {
position: absolute;
content: "";
width: 2px;
height: 60%;
right: 0;
background: red;
top: 50%;
transform: translate(0, -50%);
}
ul.nav li:first-child a:before {
position: absolute;
content: "";
width: 2px;
height: 60%;
left: 0;
background: white;
top: 50%;
transform: translate(0, -50%);
}
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: blue;
}
.navbar-default .navbar-nav>li>a:hover {
background: #022E44;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
</ul>
</div>
</nav>
Box-shadow does not create new elements. Try adding:
#media (min-width: 768px)
.navbar-nav > li {
...
box-shadow: inset -1px 0 0 0 black; // high element or..
box-shadow: 16px 0 0 -15px black; // .. closer to text height
}
.navbar-nav > li:last-of-type {
...
box-shadow: none;
}
You should take a look at this css selector ~.
http://www.w3schools.com/cssref/css_selectors.asp
ul li {
display: inline-block;
padding: 0 10px;
}
ul li ~ li {
border-left: 1px solid #333;
}
<ul>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
</ul>
You can add the following lines in your css file. the problem will be solved.
ul.navbar-nav li{
float: left;
list-style: none;
padding: 0px 6px;
border-right: 1px solid #000;
}
ul.navbar-nav li a{
text-decoration: none;
}
ul.navbar-nav li:last-child{
border-right: none;
}
or instead of using border-right: 1px solid #000; in li you can use an image here as a background.
here is my codepen link: http://codepen.io/rounak/pen/dOgLBx
ul li {
display: inline-block;
padding: 0 10px;
}
ul li ~ li {
border-bottom: 1px solid #333;
}
<ul>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
</ul>
Related
I want to remove the extra border after the "what's new" and the "meal ideas", I tried selecting the first child in the <ul> instead of the <li> and it didn't even work.
html {
background-color: white ;
}
body {
background-color: white ;
margin: 0 auto;
width: 960px;
font-family: arial,helvetica,sans-serif;
}
a {
text-decoration: none;
color: #373535 ;
}
header {
background-color: #ede6e6;
height:150px;
padding-top: 20px;
}
ul {
padding: 0 ;
}
li{
display: inline;
padding: 10px;
font-size: 16px;
}
header li :first-child {
border-right: 1px solid #373535;
padding-right: 10px;
}
<!DOCTYPE html>
<html lang= "en" >
<head>
<title> My Recipe </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/html5shiv.js"></script>
<!-- yolo this is my first project -->
</head>
<body>
<header>
<div class="Left">
<ul>
<li> Popular recipes </li>
<li>Whats New </li>
</ul>
</div>
<div class="Right">
<ul>
<li> Categories </li>
<li>Meal Ideas </li>
</ul>
</div>
<div id="logo">
<img src="images/chefs-hat.png"/>
<p>My recipes</p>
</div>
</header>
</body>
</html>
Use this:
.Left ul li:last-child a,.Right ul li:last-child a {
border: none;
}
html {
background-color: white ;
}
body {
background-color: white ;
margin: 0 auto;
width: 960px;
font-family: arial,helvetica,sans-serif;
}
a {
text-decoration: none;
color: #373535 ;
}
header {
background-color: #ede6e6;
height:150px;
padding-top: 20px;
}
ul {
padding: 0 ;
}
li{
display: inline;
padding: 10px;
font-size: 16px;
}
header li :first-child {
border-right: 1px solid #373535;
padding-right: 10px;
}
.Left ul li:last-child a,.Right ul li:last-child a {
border: none;
}
<!DOCTYPE <!DOCTYPE html>
<html lang= "en" >
<head>
<title> My Recipe </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/html5shiv.js"></script>
<!-- yolo this is my first project -->
</head>
<body>
<header>
<div class="Left">
<ul>
<li> Popular recipes </li>
<li>Whats New </li>
</ul>
</div>
<div class="Right">
<ul>
<li> Categories </li>
<li>Meal Ideas </li>
</ul>
</div>
<div id="logo">
<img src="images/chefs-hat.png"/>
<p>My recipes</p>
</div>
</header>
</body>
</html>
Here you go:
CSS:
body {
background-color: white ;
margin: 0 auto;
width: 960px;
font-family: arial,helvetica,sans-serif;
}
a {
text-decoration: none;
color: #373535 ;
}
header {
background-color: #ede6e6;
height:150px;
padding-top: 20px;
}
ul {
padding: 0 ;
}
li{
display: inline;
padding: 5px;
margin: 5px;
font-size: 16px;
}
ul li:first-child {
border-right: 1px solid #373535;
padding-right: 10px;
width: 9%;
}
I used <div id="mws-nav-collapse"> for responsiveness; it worked.
Now I don't need responsiveness, so when I delete this div, I didn't view my nav-bar items in mobile view. How do I make my nav-bar items visible in the mobile view without using responsiveness.
Here is my code:
<div id="mws-navigation">
<ul id="link">
<li data-related="c" class="" id="c1"><i class="icon-calendar"></i>AAA</li>
<li data-related="e" class="" id="e1"><i class="icon-tag"></i>BBB</li>
<li data-related="f" class="" id="f1"><i class="icon-hdd"></i>CCC</li>
</ul>
</div>
the div which i removed
<div id="mws-nav-collapse">
<span></span>
<span></span>
<span></span>
</div>
It is available in bootstrap docs
What changes
Note the lack of the <meta name="viewport" content="width=device-width, initial-scale=1">, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are basically good to go.
Regarding navbars
As a heads up, the navbar component is rather tricky here in that the styles for displaying it are rather specific and detailed. Overrides to ensure desktop styles display are not as performant or sleek as one would like. Just be aware there may be potential gotchas as you build on top of this example when using the navbar.
Browsers, scrolling, and fixed elements
Non-responsive layouts highlight a key drawback to fixed elements. Any fixed component, such as a fixed navbar, will not be scrollable when the viewport becomes narrower than the page content. In other words, given the non-responsive container width of 970px and a viewport of 800px, you'll potentially hide 170px of content.
There is no way around this as it's default browser behavior. The only solution is a responsive layout or using a non-fixed element.
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Non-responsive Template for Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="non-responsive.css" rel="stylesheet">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
The text
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
non-responsive.css
body {
padding-top: 70px;
padding-bottom: 30px;
}
body,
.navbar-fixed-top,
.navbar-fixed-bottom {
min-width: 970px;
}
.lead {
font-size: 16px;
}
.page-header {
margin-bottom: 30px;
}
.page-header .lead {
margin-bottom: 10px;
}
.container {
width: 970px;
max-width: none !important;
}
.col-xs-4 {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
.container .navbar-header,
.container .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
.navbar-header {
float: left;
}
.navbar-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-toggle {
display: none;
}
.navbar-collapse {
border-top: 0;
}
.navbar-brand {
margin-left: -15px;
}
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding: 15px;
}
.navbar-nav.navbar-right {
float: right;
}
.navbar .navbar-nav .open .dropdown-menu {
position: absolute;
float: left;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-width: 0 1px 1px;
border-radius: 0 0 4px 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #333;
}
.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar .navbar-nav .open .dropdown-menu > .active > a,
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #fff !important;
background-color: #428bca !important;
}
.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #999 !important;
background-color: transparent !important;
}
.navbar-form {
float: left;
width: auto;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-form .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
.navbar-form .form-control-static {
display: inline-block;
}
.navbar-form .input-group {
display: inline-table;
vertical-align: middle;
}
.navbar-form .input-group .input-group-addon,
.navbar-form .input-group .input-group-btn,
.navbar-form .input-group .form-control {
width: auto;
}
.navbar-form .input-group > .form-control {
width: 100%;
}
.navbar-form .control-label {
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .radio,
.navbar-form .checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .radio label,
.navbar-form .checkbox label {
padding-left: 0;
}
.navbar-form .radio input[type="radio"],
.navbar-form .checkbox input[type="checkbox"] {
position: relative;
margin-left: 0;
}
.navbar-form .has-feedback .form-control-feedback {
top: 0;
}
You can find this in examples
I have a footer menu I am creating for WordPress. I have my main navigation links then at the end I want a collapsing/expanding link for social icons. I have created both separately but do not know how to make them display on one line. Any help is appreciated.
Main Navigation:
<!DOCTYPE html>
<html>
<head>
<style>
#footernav {
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight:bold;
text-align: center;
}
#footernav li {
margin-right: 20px;
display: inline;
}
</style>
</head>
<body>
<div id="footernav">
<li>Customer Care</li>
<li>Privacy Policy</li>
<li>Terms</li>
<li>Newsletter</li>
<li>Contact</li>
</div>
</body>
</html>
Expanding/Collapsing Social Link:
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
/*SOCIAL*/
.list {
display:none;
height:auto;
margin:0;
float: center;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display:inline;
}
.hide:hover, .show:hover {
color: #eee;
font-weight: bold;
opacity: 1;
margin-bottom: 25px;
}
.list p {
height:auto;
margin:0;
.hover:hover {
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0px 0px 5px #000
}
/*END SOCIAL*/
</style>
<div class='social'>
Follow Us (+)
Follow Us (-)
<div class="list">
<p>
<a href="http://www.facebook.com" target= "_blank" ><img src="http://museiam.ca/wp-content/uploads/Facebook.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Facebook1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Facebook.png'" ></a>
<a href="http://www.twitter.com" target= "_blank1" ><img src="http://museiam.ca/wp-content/uploads/Twitter.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Twitter1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Twitter.png'" ></a>
<a href="http://www.instagram.com" target= "_blank2" ><img src="http://museiam.ca/wp-content/uploads/Instagram.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Instagram1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Instagram.png'" ></a>
</p>
</div>
</div>
</body>
</html>
FIDDLE: http://jsfiddle.net/7j0nb4az/
First of all, you're missing the <ul> tag wrapped around your <li>'s inside the jsFiddle. Secondly, once you wrap the <li>'s with a <ul> tag, adding this CSS to your stylesheet will solve the issue:
#footernav ul {
padding: 0px;
display: inline-block;
}
Here's a working demo:
/*MAIN NAVIGATION*/
#footernav {
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#footernav li {
margin-right: 20px;
display: inline;
}
#footernav li a {
text-decoration: none;
}
#footernav ul {
padding: 0px;
display: inline-block;
vertical-align: top;
}
a#show {
vertical-align: top;
}
#footernav li:nth-child(5) {
margin-right: 0px;
}
a.hide {
margin-left: 15px;
}
/*END MAIN NAVIGATION*/
/*SOCIAL*/
.list {
display: none;
height: auto;
margin: 0;
float: center;
}
.show {
display: none;
}
.hide:target + .show {
display: block;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display: inline;
}
.hide:hover,
.show:hover {
color: #eee;
font-weight: bold;
opacity: 1;
margin-bottom: 25px;
}
.list p {
height: auto;
margin: 0;
.hover: hover {
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0px 0px 5px #000
}
<!DOCTYPE html>
<body>
<div id="footernav" class="footernav">
<ul>
<li>Customer Care
</li>
<li>Privacy Policy
</li>
<li>Terms
</li>
<li>Newsletter
</li>
<li>Contact
</li>
<ul>
<div class='social'> Follow Us (+)
Follow Us (-)
<div class="list" <a href="http://www.facebook.com" target="_blank">
<img src="http://museiam.ca/wp-content/uploads/Facebook.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Facebook1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Facebook.png'">
</a>
<a href="http://www.twitter.com" target="_blank1">
<img src="http://museiam.ca/wp-content/uploads/Twitter.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Twitter1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Twitter.png'">
</a>
<a href="http://www.instagram.com" target="_blank2">
<img src="http://museiam.ca/wp-content/uploads/Instagram.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Instagram1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Instagram.png'">
</a>
</div>
I'm working on this page but am having trouble figuring a few things out. First question is how do I keep the navigation links from moving on a hover? Second is how do I get the navigation links closer together? I've been trying to figure this out and seem to be missing something. Thanks!!
header{
height: 80px;
color: #ffffff;
border: 3px solid #000000;
background-color: white;
background-repeat: no-repeat
}
header img {
float: left;
width: auto;
height: 230%;
}
nav ul{
list-style: none;
}
nav li {
display: inline;
padding: 5px;
}
nav a{
margin-left: 150px;
}
nav li a{
color: #92d050;
text-decoration: none;
padding: 5px;
}
nav a:hover {
font-weight: bold;
color: black;
}
nav a.current{
color: black;
}
#about{
float: left;
padding-top: 75px;
padding-left: .25em;
width: 300px;
}
the HTML5 sheet is this:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Hair by Sasha </title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="main_print.css" media="print">
</head>
<body>
<header>Hair by Sasha
<img src="images/logo.jpg" alt="Hair by Sasha">
<nav>
<ul>
<li>Home</li>
<li><a href="services.html" >Services</a></li>
<li><a href="about.html" >About Us</a></li>
<li><a href="contact.html" >Contact Us</a></li>
</ul>
</nav>
</header>
Remove
nav a:hover {
font-weight: bold; /* this moving links remove it */
}
And to bring them closer give float to li.
I'm trying to implement a CSS dropdown menu but whenever I do so, the <h1> and <p> tags wrap around the drop down menu boxes.
Can anyone suggest a solution to this? I'm only just learning CSS now and would appreciate any input.
Thanks
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
<div id= "container">
<img src="images/title.jpg"/>
<div id="navigation">
<ul class="navbar">
<li>
Home
</li>
<li>
HTML5
<ul>
<li>
Tutorial 1
</li>
<li>
Tutorial 2
</li>
<li>
Tutorial 3
</li>
</ul>
</li>
<li>
CSS3
<ul>
<li>
Tutorial 1
</li>
<li>
Tutorial 2
</li>
<li>
Tutorial 3
</li>
</ul>
</li>
<li>
Links
</li>
<li>
Contact
</li>
</ul>
</div>
<div id="content">
<h2>Home Page</h2>
<p>This is a test paragraph. This is a test paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph.</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
and the CSS is:
#charset "utf-8";
/* CSS Document */
#container{
width:800px;
background-color:#00FF00;
border:1px solid black;
height:1000px;
z-index:-9;
margin:auto;
}
#logo{
background-color:#FF0033;
border:#000 1px;
width:800px;
height:200px;
overflow:hidden;
}
#navigation{
background-color:#FFF;
border:#000 1px;
width:800px;
height:30px;
}
#content{
background-color:#6F3;
border:#000 1px;
width:780px;
height:400px;
margin:10px;
}
#footer{
background-color:#FF0;
border:#000 1px;
width:800px;
height:100px;
}
.navbar {
/*border-right: 1px solid #54879D;*/
height: 40px;
margin: 0 0 0 0;
padding: 0;
}
.navbar li {
background-color: #366B82;
float: left;
font: bold 12px/1.2em Arial,Verdana,Helvetica;
height: auto;
list-style: none outside none;
margin: 20 0;
padding: 0;
text-align: center;
width: 160px;
}
.navbar a {
/* border-left: 1px solid #54879D;*/
border-right: 1px solid #1F5065;
color: #FFFFFF;
display: block;
padding: 10px 10px;
text-decoration: none;
}
.navbar li:hover, a:hover {
background-color: #54879D;
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
background-color: #54879D;
}
.navbar li ul li a {
border-color: #74A3B7 #1F5065 #1F5065;
border-left: 1px solid #1F5065;
border-right: 1px solid #1F5065;
border-style: solid;
border-width: 1px;
}
.navbar li ul li a:hover {
background-color: #366B82;
}
update these classes:
working DEMO
.navbar li ul li {
background-color: #54879D;
float:none; /*added*/
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
position:absolute; /*added*/
}