Horizontal nav menu with submenus - html

I have this nav menu:
http://jsfiddle.net/laziale/T45tD/4/
I want to know how I can fix the menu that the nav menu will be expandable with submenus. I entered some sample data.
Here is the source code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link type="text/css" rel="stylesheet" href="App_Themes/Main/style.css" />
<link type="text/css" rel="stylesheet" href="App_Themes/Main/reset.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="pagetop">
<div class="head pagesize">
<div class="head_top">
<div class="topbuts">
<ul class="clear">
</ul>
</div>
<div class="user clear">
<span class="user-detail">
</span>
</div>
<div class="logo clear">
<a href="#" title="Home">
<img src="Images/logo.jpg" class="picture" />
<span class="textlogo">
</span>
</a>
</div>
</div>
<div class="menu">
<ul class="clear">
<li class="active">Client
<ul>
<li class="subNav">Client Summary</li>
</ul>
</li>
<li>Agent
<ul>
<li class="subNav">Agent Summary
<ul>
<li class="subNav">Link1y</li>
<li class="subNav">Link2</li>
</ul></li>
</ul>
</li>
<li>System Utility
<ul>
<li class="subNav">Link1
<li class="subNav">Link2
<li class="subNav">Link3
</ul>
</li>
<li>Report</li>
<li>Maintenance</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<div>
</div>
</form>
</body>
</html>
and the css:
body {
min-width:1000px;
text-align:center;
margin:0px;
font-family:Arial;
font-size:12px;
color:#666666;
background:#8D8D8D;
}
.pagetop {
width:100%;
min-width:1000px;
background-color: #333333;
border-bottom: 4px solid #007FAA;
position:relative;
z-index:100;
min-height:149px;
}
.head_top {
position:relative;
min-height:114px;
}
.topbuts {
position:absolute;
top:0px;
right:0px;
}
.topbuts ul {
float:right;
}
.topbuts li {
float:left;
margin-left:2px;
font-size:11px;
font-weight: bold;
}
.topbuts li a {
background:#007FAA;
text-decoration:none;
display:block;
color:#FFFFFF;
line-height:16px;
padding:1px 12px 2px 12px;
}
ol ul {
list-style:none;
}
.head {
padding:0px;
}
.pagesize {
width:1000px;
margin: 0px auto;
text-align:left;
}
.user {
clear:both;
float:right;
padding-top:27px;
}
.user-detail {
display: block;
float:right;
text-align:right;
}
.user-detail .name {
display: block;
line-height:normal;
text-align:left;
float:right;
font-size:18px;color:#FFFFFF;
padding:2px 0px 7px 0px;
}
.user-detail .text {
color: #bbbbbb;
clear:both;
font-size:11px;
line-height:18px;
color:#FFFFFF;
display:block;
}
.logo {
padding-top:20px;
}
.logo a {
text-decoration:none;
}
.logo .picture {
float:left;
margin-right:10px;
}
.logo .textlogo {
float:left;
}
.logo .title {
display:block;
font-family:Arial;
font-size:20px;
color:#FFFFFF;
font-weight: bold;
margin-top:5px;
letter-spacing: -0.02em;
}
.logo .text {
display:block;
font-weight: bold;
color: #BBBBBB;
position:relative;
top: -2px;
}
.menu ul {
font-size:13px;
}
.menu li {
float:left;
margin-right:3px;
padding-bottom:5px;
position:relative;
}
.menu li .active a {
background: #FFFFFF;
color: #333333;
text-shadow: 1px 1px 1px #BBBBBB;
}
.menu li a {
display:block;
line-height:16px;
padding: 7px 15px 7px 5px;
color: #FFFFFF;
text-decoration:none;
font-weight:bold;
text-shadow: 1px 1px 1px #333333;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background:url('..images/button_glas1.png') center center repeat-x #555555;
}
a {
color: #006577;
text-decoration:none;
}


You can use the superfish jQuery plugin.
Here is a demo


Either you can use javascript and hide all unwanted elements until you hover the right menu element, either you do it with CSS using something like this:
#navmenu .submenu{
display:none; /* dosen't show sub menus */
overflow:visible; /* shows overflow */
}
#navmenu li:hover > .submenu{ /* when you hover an li element change children following settings */
display:block; /* display elements */
}
HTML code example that works:
<div id="navmenu">
<ul>
<li>Réalisations
<ul class="submenu">
<li>Web</li>
<li>T-shirt</li>
<li>Autres prestations</li>
</ul>
</li>
<li> Galeries
<ul class="submenu gallery">
<li>Boston</li>
<li>Brig</li>
<li>Fleurs</li>
<li>Grèce</li>
<li>Nocturne</li>
<li>Noir&blanc</li>
<li>Paris</li>
<li>Portrait</li>
<li>Perspective</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
There are many tutorials on the web for more examples ;)

Related

html/css Dropdown list in a navbar is not appearing

I have created a position:fixed; navbar at the top of my web page and one of its items is supposed to be a drop down list named "services" which is supposed to show the dropdown on hover but its not working.
Below is the HTML page code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainpage.css">
<title>Company name</title>
</head>
<body>
<div class="navdiv">
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png">
<ul class="nav">
<li>HOME</li>
<li>ABOUT US</li>
<li >
<a class="dropdown" href="">SERVICES</a>
<div class="dropdownlist">
AUDIT & ASSURANCE
TAXATION
CORPORATE FINANCE
SERVICES
MANAGEMENT CONSULTING
RISK MANAGEMENT
SECTORS
HUMAN RESOURCES
ACCOUNTING, AUDIT & TAX
</div>
</li>
<li>PARTNERS</li>
<li>CONTACT US</li>
</ul>
</div>
<div class="divbody">
<p>This here will serve as <br>Some text ....</p>
<p>Some text ....</p>
</div>
</body>
</html>
And here is the CSS stylesheet code:
body {
background-color:white;
}
.divbody {
margin-top:12%;
height:100%;
padding:0;
}
.navdiv {
position:fixed;
top:0;
right:0;
width:100%;
background-color:white;
background-image:url("images/always_grey.png");
}
.nav {
list-style-type:none;
background-color:#5f5f5f;
margin:0;
padding:0;
position:relative;
top:0;
right:0;
width:100%;
font-family:"Segoe UI",Arial,sans-serif;
font-size:17px;
letter-spacing:1px;
overflow:hidden;
}
.nav li {
float:left;
}
.nav li a {
text-decoration:none;
color:white;
display:block;
padding:8px 16px;
}
.nav li a:hover {
background-color:black;
}
.nav .dropdownlist {
display: none;
background-color: #f9f9f9;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.nav .dropdown:hover .dropdownlist {
display: block;
}

This code does not work because dropdownlist is not a child of dropdown, they're just adjacent elements so you need to use the + sign in order to achieve what you want.
Here's a working example:
body {
background-color:white;
}
.divbody {
margin-top:12%;
height:100%;
padding:0;
}
.navdiv {
position:fixed;
top:0;
right:0;
width:100%;
background-color:white;
background-image:url("images/always_grey.png");
}
.nav {
list-style-type:none;
background-color:#5f5f5f;
margin:0;
padding:0;
position:relative;
top:0;
right:0;
width:100%;
font-family:"Segoe UI",Arial,sans-serif;
font-size:17px;
letter-spacing:1px;
overflow:hidden;
}
.nav li {
float:left;
}
.nav li a {
text-decoration:none;
color:white;
display:block;
padding:8px 16px;
}
.nav li a:hover {
background-color:black;
}
.nav .dropdownlist {
display: none;
background-color: #f9f9f9;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.nav .dropdown:hover + .dropdownlist,
.dropdownlist:hover {
display: block;
}
<div class="navdiv">
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png">
<ul class="nav">
<li>HOME</li>
<li>ABOUT US</li>
<li >
<a class="dropdown" href="">SERVICES</a>
<div class="dropdownlist">
AUDIT & ASSURANCE
TAXATION
CORPORATE FINANCE
SERVICES
MANAGEMENT CONSULTING
RISK MANAGEMENT
SECTORS
HUMAN RESOURCES
ACCOUNTING, AUDIT & TAX
</div>
</li>
<li>PARTNERS</li>
<li>CONTACT US</li>
</ul>
</div>
<div class="divbody">
<p>This here will serve as <br>Some text ....</p>
<p>Some text ....</p>
</div>
</div>

Below is the code. hope this will help you.
body {
background-color:white;
}
.navdiv {
position:fixed;
top:0;
right:0;
width:100%;
background-color:white;
background-image:url("images/always_grey.png");
}
ul.nav {
list-style-type:none;
background-color:#5f5f5f;
margin:0;
padding:0;
position:relative;
top:0;
right:0;
width:100%;
font-family:"Segoe UI",Arial,sans-serif;
font-size:17px;
letter-spacing:1px; float:left;
}
ul.nav li {
float:left;
}
ul.nav li a {
text-decoration:none;
color:white;
display:block;
padding:8px 16px;
}
ul.nav li a:hover {
background-color:black;
}
ul.nav li ul.dropdownlist {
display: none;
background-color: #ccc;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); position:absolute; right:0; top:38px;
}
ul.nav li:hover ul.dropdownlist {
display: block;
}
ul.nav li ul.dropdownlist li a {
color:#333;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainpage.css">
<title>Company name</title>
</head>
<body>
<div class="navdiv">
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png">
<ul class="nav">
<li>HOME</li>
<li>ABOUT US</li>
<li>
<a class="dropdown" href="">SERVICES</a>
<ul class="dropdownlist">
<li>AUDIT & ASSURANCE</li>
<li>TAXATION</li>
<li>CORPORATE FINANCE</li>
<li>SERVICES</li>
<li>MANAGEMENT CONSULTING</li>
<li>RISK MANAGEMENT</li>
<li>SECTORS</li>
<li>HUMAN RESOURCES</li>
<li>ACCOUNTING, AUDIT & TAX</li>
</ul>
</li>
<li>PARTNERS</li>
</ul>
</div>
<div class="divbody">
<p>This here will serve as <br>Some text ....</p>
<p>Some text ....</p>
</div>
</body>
</html>

Below change will help you only to show drop down on hover but you need to make few CSS changes in order to display the drop down properly
You need replace the following CSS
.nav .dropdown:hover .dropdownlist {
display: block;
}
With
.nav .dropdown:hover + .dropdownlist {
display: block;
}

Google homepage bottom elements not fixed when hovering buttons

my problem
I just want help on how to make the footer and 'Google in different languages' fixed when I am hovering over the buttons.
I am trying to build it on my own (without referring to google homepage code in chrome dev tools), so I am unaware of what they did so as to fix the position of those two elements.
Here's my code:
<!DOCtype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css_stylesheets/stylesheet3.css"/>
<title>Google</title>
</head>
<body>
<div>
<header class="start">
<ul>
<li>Gmail</li>
<li>Images</li>
<li class="button">Sign in</li>
</ul>
</header>
<h1>
<img src="../Images/googlelogo.png" alt="Google logo"/>
<span>India</span>
</h1>
<form>
<input type="text"/><br>
<input type="submit" value="Google Search" id="text" name="search"/>
<input type="submit" value="I'm Feeling Lucky" name="search2"/>
</form>
<p>
Google.co.in offered in: HindiBanglaMalayalamMarathi
</p>
<footer>
<nav class="left">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
</nav>
<nav class="right">
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
<li>UseGoogle.com</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
My CSS stylesheet:
*
{
padding:0px;
margin: 0px;
}
body
{
font-family:Arial,sans-serif;
}
div:first-child
{
font-size:25px;
margin:auto;
text-align:center;
padding-top:0px;
}
div header ul
{
margin-right:0px;
text-align:right;
font-size: 17px;
}
body div header.start
{
padding-top:0px;
}
h1
{
display:inline-block;
font-size:20px;
}
h1 span
{
position:relative;
right: 63px;
bottom: 5px;
color:rgb(51,187,232);
font-size:small;
font-family: "Arial", sans-serif;
}
li.button a
{
display:inline-block;
outline:none;
background-color:rgb(10,125,247);
padding:9px;
border:solid 1px;
border-radius: 4px;
font-weight: bold;
color:#F5F5F5;
}
li.button a:hover
{
text-decoration:none;
outline:grey 3px;
box-shadow: inset 0 0 0px 1px #27496d;
}
li.button a:active
{
background-color:rgb(11,95,191);
border:inset 1px #C7C7C7;
}
a
{
text-decoration: none;
word-spacing:5px;
font-size: 15px;
color:grey;
}
a:hover
{
text-decoration:underline;
}
a::after
{
content: " ";
text-decoration: none;
}
input[type="text"]
{
margin:auto;
max-width:500px;
width:40%;
padding:10px;
}
input[type="text"]:visited
{
outline:blue;
}
input[type="submit"]
{
color:#727578;
border:solid 0px;
background-color:#E3E6E8;
font-weight:bold;
padding:10px;
margin: 30px 5px;
margin-bottom:0px;
}
input[type="submit"]:hover
{
border:ridge 2px;
color:black;
background-color:#f0f0f0;
}
input[type="submit"]:active
{
outline:blue;
}
p
{
margin:0px;
padding:0px;
font-size:14px;
position:relative;
top:15px;
}
p a::after
{
content: " ";
text-decoration: none;
}
p a:link
{
color: blue;
}
ul li
{
list-style-type: none;
display:inline;
word-spacing: 10px;
}
nav.left ul li
{
padding-top:2px;
position:relative;
right:590px;
top:50px;
}
nav.right ul li
{
position:relative;
left:500px;
top:0px;
}
footer nav.right ul
{
display:block;
background-color:#e3e3e3;
padding-top:20px;
margin-bottom:0px;
}
Let me tell you that I am very new to CSS3 elements. But I am pretty much familiar with most of the CSS ones.
I repeat, I don't need a complete debugging on this (unless required that is). Please help me on that issue (the text in bold at the beginning of this topic).

Your problem is input[type="submit"]:hover changing border-width from 0px to 2px, so total height and width of buttons increasing and moving below content for 4px.
Your solution is to change
input[type="submit"] {
...
border: solid 0px;
...
}
to
input[type="submit"] {
...
border: transparent solid 2px;
...
}

how to make dropdown using html and css?

I tried to write the code of this image, but I faced some difficulties.i want to make dropdown using css as shown in the image.For more help i added orignal website link http://uos.edu.pk/
MY SAMPLE OF CODE IS HERE
<style>
select{
background-color:#183287;
color:white;
border:none;
}
div.divofmenu{
height:40px;
width:100%;
border:0px solid white;
float:left;
border-bottom:2px solid white;
background-color:#183287;
}
ul.menu
{
list-style-type:none;
margin-left:200px;
background-color:blue;
padding:0;
margin-top:0px;
border-color:black;
border-width:3px;
}
ul.menu li
{
margin-top:0px;
float:left;
}
ul.menu li a{
text-decoration:none;
display:inline-block;
margin-left:3;
color:white;
background-color:#183287;
font-size:90%;
padding:10px 10px 10px 10px;
border-left:0.5px solid black;
}
</style>
<body>
<div class="divofmenu">
<ul class="menu">
<li class="about"><a style="border:0px white"href="#">
<select class="select"><option>About us</option></select>
</a>
</li>
<li class="acad"><a href="#">
<select class="select"><option>Acadmics</option></select>
</a></li>
<li><a href="#">
<select class="select"><option>campus</option></select>
</a></li>
<li><a href="#">
<select class="select"><option>Faculties</option></select>
</a></li>
<li><a href="#">
<select class="select"><option>Directorate</option></select>
</a></li>
<li><a href="#">
<select class="select"><option>Admisions</option></select>
</a></li>
<li><a href="#">
<s

Is that like this?
.dropdown{
background-color:#183287;
position: relative;
display: inline-block;
}
.dropdown-content{
display: none;
position: absolute;
left: -200%;
background-color:#183287;
min-width: 160px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
padding: 12px 16px;
color: #fff;
text-align: left;
}
.dropdown:hover .dropdown-content{
display: block;
}
.col-1{
float: left;
}
.col-2{
float: right;
}
div.divofmenu{
height:40px;
width:100%;
border:0px solid white;
float:left;
border-bottom:2px solid white;
background-color:#183287;
}
ul.menu
{
list-style-type:none;
margin-left:200px;
background-color:blue;
padding:0;
margin-top:0px;
border-color:black;
border-width:3px;
}
ul.menu li
{
margin-top:0px;
float:left;
}
ul.menu li a{
text-decoration:none;
display:inline-block;
margin-left:3;
color:white;
background-color:#183287;
font-size:90%;
padding:10px 10px 10px 10px;
border-left:0.5px solid black;
}
<div class="divofmenu">
<ul class="menu">
<li class="about"><a style="border:0px white"href="#">
<div class="dropdown">
About Us
<div class="dropdown-content">
<div class="col-1">
Column 1
</div>
<div class="col-2">
Column 2
</div>
</div>
</div>
</a>
</li>
</ul>
</div>

How to fix the alignment of the navigation items?

I'm having an issue where I can't see to get the 'Log in' text to be aligned with the rest of the navigation bar. Using margin or padding doesn't seem to push it up at all, and I managed to get it 3 pixels out by using line-height:0 but it wasn't enough. Ideas?
This is the design that I'm trying to achieve.
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="EvositeCSS.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<script src="EvositeJS.js"> </script>
</head>
<body>
<div class="wrapper">
<div class="NavBar">
<div class="VictoriaHouse">
<img src="Images/VictoriaHouse.JPG" alt="Victoria House & Viney Court">
</div>
<div class="ActivePage">
<img src="Images/Triangle.PNG"> </img>
</div>
<div class= "LoginContainer">
<div class="DownTriangle">
<span class="glyphicon glyphicon-triangle-bottom" </span>
</div>
<h1 class="LoginTxt">Log in </h1>
</div>
<ul>
<li> <a href="Evosite.html" class="NavHome" id="Current")> Home </a> </li>
<li> News </li>
<li> Tenants </li>
<li> Heritage </li>
<li> About Us </li>
<li> Book the Meeting Room </li>
<li> Contact Us </li>
</ul>
</div> <!-- Ends NavBar <-->
</div> <!-- Ends wrapper -->
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.wrapper {
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
.VictoriaHouse {
padding-left:270px;
padding-top:20px;
padding-bottom:20px;
padding-right:140px;
float:left;
}
/* NavBar formatting */
.NavBar {
float:inline-block;
text-decoration:none;
}
ul {
float:inline-block;
padding-top:45px;
}
li {
display: inline;
}
a {
font-family: Bree Serif;
font-size:20px
}
a:link {
color:#002D62;
background-color:white;
}
a:visited {
color:#002D62;
text-decoration:none;
background-color:white;
}
a:hover {
text-decoration:none;
color: #007D68; /* Green */
}
a:active{
text-decoration:none;
color: #F68E56; /* orange */
}
.NavLink {
margin-left:20px;
text-decoration:none;
}
.NavHome {
margin-left:30px;
text-decoration:none;
}
.NavContact {
margin-left:20px;
text-decoration:none;
}
#Current {
color: #F68E56; /* orange */
}
.ActivePage {
float:left;
padding-top:25px;
padding-left:50px;
width:auto;
}
.LoginTxt {
font-family: Bree Serif;
font-size:20px;
color:#FF5A40;
padding-left:25px;
float:left;
}
.LoginContainer {
border-style:solid;
border-width:1.5px;
border-radius:5px;
border-color:#F68E56;
width:120px;
height:40px;
float:right;
margin-right:300px;
margin-top:40px;
}
.DownTriangle {
padding-left:90px;
padding-top:15px;
float:left;
position:relative;
}
.LoginTxtContainer {
margin-top:10px;
}

There are a couple of issues need to be fixed first.
1 <img> is a self-closing tag, remove </img> from <img src="Images/Triangle.PNG"> </img>, or use <img src="" />
2 It's missing a closing > here <span class="glyphicon glyphicon-triangle-bottom" </span>
3 Remove the ) from <a href="Evosite.html" class="NavHome" id="Current")>
The best way to get the login button in the right place is to adjust the structure slightly, to move it next to the navigation bar. And don't use <h1> for it, as it's not a headline.
I rewrote most of the CSS, removed all the unnecessary styles, see the details and demo below.
CodePen Demo
/* For Demo Only */
#import url("https://fonts.googleapis.com/css?family=Bree+Serif");
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
/* CSS Document */
body {
font-family: "Bree Serif";
}
.wrapper {
width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* NavBar formatting */
.NavBar {
overflow: auto;
font-size: 20px;
}
.VictoriaHouse,
.MainNavigation {
float: left;
}
.MainNavigation {
padding-top: 30px;
}
.MainNavigation ul {
margin: 0;
padding: 0 0 0 20px;
}
.MainNavigation li {
display: inline-block;
vertical-align: top;
}
.MainNavigation a {
margin: 0 10px;
text-decoration: none;
color: #000;
display: block;
position: relative;
}
.MainNavigation #Current:after,
.MainNavigation a:hover:after {
content: url("http://i.imgur.com/zN4WiYV.png");
color: #F68E56;
width: 100%;
text-align: center;
position: absolute;
top: -20px;
left: 0;
}
.MainNavigation a:hover {
color: #007D68;
}
.LoginContainer {
float: right;
margin-top: 25px;
border: 1px solid #F68E56;
border-radius: 5px;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
}
.LoginContainer .LoginTxt {
text-decoration: none;
color: #FF5A40;
}
.LoginTxt .glyphicon {
font-size: 14px;
color: #000;
}
.LoginTxt:hover .glyphicon {
color: #FF5A40;
}
<div class="wrapper">
<div class="NavBar">
<div class="VictoriaHouse">
<img src="http://i.imgur.com/eB6yyLi.jpg" alt="Victoria House & Viney Court" />
</div>
<div class="MainNavigation">
<ul>
<li> Home </li>
<li> News </li>
<li> Tenants </li>
<li> Heritage </li>
<li> About Us </li>
<li> Book the Meeting Room </li>
<li> Contact Us </li>
</ul>
</div>
<div class="LoginContainer">
<a class="LoginTxt" href="#"> Log in <span class="glyphicon glyphicon-triangle-bottom"></span> </a>
</div>
</div>
<!-- Ends NavBar <-->
</div>
<!-- Ends wrapper -->

You had a couple of problems in your HTML/CSS. I managed to simplify and fix them, check this fiddle
Also, here's the code snippets...
CSS
/* CSS Document */
.wrapper {
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
.VictoriaHouse {
padding-left:270px;
padding-top:20px;
padding-bottom:20px;
padding-right:140px;
float:left;
}
/* NavBar formatting */
.NavBar {
float:inline-block;
text-decoration:none;
}
ul {
display:inline-block;
padding-top:45px;
}
li {
display: inline;
}
a {
font-family: Bree Serif;
font-size:20px
}
a:link {
color:#002D62;
background-color:white;
}
a:visited {
color:#002D62;
text-decoration:none;
background-color:white;
}
a:hover {
text-decoration:none;
color: #007D68; /* Green */
}
a:active{
text-decoration:none;
color: #F68E56; /* orange */
}
.NavLink {
margin-left:20px;
text-decoration:none;
}
.NavHome {
margin-left:30px;
text-decoration:none;
}
.NavContact {
margin-left:20px;
text-decoration:none;
}
#Current {
color: #F68E56; /* orange */
}
.ActivePage {
float:left;
padding-top:25px;
padding-left:50px;
width:auto;
}
.LoginContainer {
border-style:solid;
border-width:1.5px;
border-radius:5px;
border-color:#F68E56;
float:right;
margin-right:300px;
margin-top:40px;
line-height: 40px;
padding-left: 20px;
}
.LoginTxt {
font-family: Bree Serif;
font-size:20px;
color:#FF5A40;
display: inline-block;
margin:0;
}
.LoginContainer .downArrow {
padding-left: 10px;
padding-right: 5px;
}
HTML
<div class="wrapper">
<div class="NavBar">
<div class="VictoriaHouse">
<img src="Images/VictoriaHouse.JPG" alt="Victoria House & Viney Court"/>
</div>
<div class="ActivePage">
<img src="Images/Triangle.PNG"/>
</div>
<div class= "LoginContainer">
<h1 class="LoginTxt">Log in</h1>
<span class="downArrow glyphicon glyphicon-triangle-bottom"></span>
</div>
<ul>
<li> <a href="Evosite.html" class="NavHome" id="Current")> Home </a> </li>
<li> News </li>
<li> Tenants </li>
<li> Heritage </li>
<li> About Us </li>
<li> Book the Meeting Room </li>
<li> Contact Us </li>
</ul>
</div> <!-- Ends NavBar <-->
</div> <!-- Ends wrapper -->

How to reduce extra white space on a web page

In this image, on left side there is half side view of website and on the right side there is extra space which I want to omit. Also look at the bottom there is a bar which I don't want.
How do I remove this extra space?
css
/* CSS Document */
body{
padding:0px;
margin:0px;
background-image: url(../images/tile.jpg);
background-repeat: repeat;
}
img{
border:0px;
}
.flt{
float:left;
}
#wh_bg{
width:1000px;
margin:auto;
}
#bg_bg{
width:1000px;
float:left;
margin-left: -40px;
margin-top: -50px;
}
/*top panel starts here*/
.logo{
float:left;
margin:89px 0px 0px -15px;
position:relative;
top: 0px;
left: 0px;
}
#menu{
width:1000px;
float:left;
height:56px;
}
.men_tp{
width:900px;
float:left;
display:inline;
padding:24px 0px 0px 70px;
}
.men_tp a{
float:left;
color:#686666;
font:bold 12px/15px tahoma;
text-decoration:none;
margin-left:25px;
}
/*top panel ends here*/
/*content panel starts here*/
#content{
width:1000px;
float:left;
}
.img_txt{
float:left;
position:relative;
margin:-10px 0px 0px 10px;
}
.img_tp{
width:865px;
float:left;
background:url(../images/img_tp.gif) no-repeat;
height:15px;
}
#con{
width:865px;
float:left;
background:url(../images/part_bg.gif) repeat-y;
}
.con1{
width:560px;
float:left;
display:inline;
padding-left:4px;
padding-top:10px;
}
.con2{
width:280px;
float:left;
padding-left:20px;
display:inline;
padding-top:10px;
}
.txt{
width:560px;
float:left;
margin-top:35px;
color:#515455;
font:12px/18px georgia;
}
.wor{
float:right;
position:relative;
margin:-30px 10px 0px 0px;
}
#part2{
width:1000px;
float:left;
}
#cen{
width:640px;
float:left;
height:237px;
background:#009BD9;
}
.cont{
float:left;
margin:10px 0px 0px 0px;
}
.con_txt{
width:211px;
color:#515455;
float:left;
font:12px/16px georgia;
margin:10px 0px 0px 20px;
}
.abt_txt{
width:550px;
float:left;
margin-top:15px;
color:#FFF;
font:12px/18px georgia;
}
#link{
width:257px;
float:left;
padding:10px 0px 0px 15px;
}
.copy{
width:700px;
float:left;
margin:10px 0px 0px 200px;
color:#D4D0D0;
font:12px/18px georgia;
}
.copy a{ color:#D4D0D0; font:12px/18px georgia; }
/*footer panel ends here*/
.contecnt1
{
width:400px;
height:480px;
margin-top: 100px;
padding-top : 60px;
font-family:Candara;
font-variant:normal;
}
.imgg
{
margin-left:40px;
margin-top:-40px;
}
.imggss
{
margin-left:40px;
margin-top: -100px;
}
.para
{
text-align:justify;
color:Black;
float:left;
width:990px;
padding-left:20px;
}
.img_wrper
{
background-image:url("images/Malaysian-Flag.png");
width :990px;
height:492px;
margin-bottom:10px;
margin-top:150px;
}
.contPers
{
margin-bottom: 10px;
margin-top: 230px;
padding-right: 10px;
margin-left:65px;
}
.contPers1
{
width: 990px;
height: 800px;
margin-bottom: 10px;
margin-top: 230px;
background-color:#E6E6FA;
padding-right: 10px;
}
.contPers2
{
width: 990px;
height: 1100;
margin-bottom: 10px;
margin-top: 210px;
background-color:#E6E6FA;
padding-right: 10px;
margin-left:70px;
}
.pers
{
font-family:Candara;
font-size:18px;
padding-left:18px;
padding-top:30px;
font-weight:normal;
}
.persjbssr
{
font-family: Candara;
font-size: 18px;
padding-left: 18px;
padding-top: 30px;
font-weight: normal;
}
.pes1
{
font-family:Candara;
font-size:20px;
padding-left:18px;
font-weight:normal;
margin-left: -70px;
}
.para1
{
padding-left:18px;
font-size:15px;
font-weight:normal;
font-family:Candara;
text-align:justify;
margin-left:-70px;
width:1000px;
}
.imggs
{
margin-left:10px;
margin-right:40px;
width:100px;
}
.imggs1
{
margin-left:20px;
width:100px;
height:120px
}
.imggs2
{
margin-left:20px;
width:150px;
}
html of index file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/MyMenu1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
<!--
function Text_Newsletter_onclick() {
}
// -->
</script>
<style type="text/css">
.style1
{
width: 100%;
}
</style>
</head>
<body>
<div id="headerrrr">
<ul>
<li>Home</li>
<li>About Us</li>
<li>+603 2201 1665</li>
</ul>
</div>
<div id="wh_bg">
<div id="bg_bg">
<div><img class="logo" src="images/logo.png" alt="" width="320" height="60" /></div>
<div class="social">
<ul>
<li>Connect US :</li>
<li><img src="images/fb.jpg" alt="facebook" /></li>
<li><a><img src="images/linkde.jpg" alt="facebook" /></a></li>
</ul>
</div>
<div id="menu">
<div id="wrap">
<ul class="navbar">
<li>HOME</li>
<li>ABOUT US
<ul id="Ul1">
<li><a id="A1" href="">abc</a></li>
<li>def</li>
<li>xyz</li>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li><a href="">ddd/li>
</ul>
</li>
<li>eee
<ul id="Ul2">
<li><a id="A2" href="">fff</a></li>
<li><a href="">ggg/a></li>
<li>hhh</li>
</ul>
</li>
<li>iii </li>
<li></li>
<li>ghj</li>
<li>
<ul id="subnavlist">
<li class="b"><a id="subcurrent" href="#"></a>
<ul class="c">
<li class="a">A</li>
</ul>
</li>
<li>Data Collection Services</li>
<li>Editing & Proof Reading</li>
</ul>
</li>
<li id="active">CONTACT US</li>
</ul>
</div>
</div>
</div>
<div align="center"><img class="imaeslidr" src="images/Slider Animation/Slider2.gif" alt="" width="1050" height="375" /></div>
<div class="blankSeparator"> </div>
<div class="indxim" style="background-image: url(''); width: 1050px; height: 800px;">
<div class="contecntA ">
<div class="indpara">
<h2 class="hindx">About US</h2>
<p class="paraindex">Read More</a></p>
<h2 class="hindx"></h2>
<p class="paraindex"></p>
<h2 class="hindx">Research</h2>
<p class="paraindex"></p>
</div>
<div class="sidebar">
<h2 class="indxparaz">HOT LINKS</h2>
<ul class="sidebar">
<li>Up Coming Events</li>
<li>Membership</li>
<li>Registration</li>
<li>Our Personnel</li>
<li>Gallery</li>
</ul>
<br /><br />
<h2 class="indxparaz2">Our Personnel</h2>
<span class="con_txtslider"> <img src="images/personeslider.gif" alt="" /> </span></div>
</div>
</div>
<div class="blankSeparator"> </div>
<div class="footer22">
<h2 class="footerhead">Newsletter</h2>
<hr /><input id="Text1" class="footertxt" type="text" /><br /> <input id="Submit1" class="footerbutton" type="submit" value="submit" />
<div>
<h2 class="footerhead1">UpComing Events</h2>
<div class="foopara2"><a class="eventss" href="Upcomngevents.html">Events Available</a></div>
</div>
<h2 class="footerhead2">Contact Us</h2>
<div class="foopara">Call now to find out how: +603 2201 1665 <br /><br /> <a class="email" href="https://secure.ipage.com/secure/login.bml" target="_blank"> <img src="images/email-login.png" alt="signin" /> </a></div>
<br /><br /><br /><hr />
<div class="ffpara">
<p class="ffpara">© Copyright 2014, </p>
</div>
<div class="ffpara2">
<p class="ffpara2">T: E:</p>
</div>
</div>
</div>
</body>
</html>

ok i notice it where is mistake in menu bar when i remove width=140% it is fine and extra space is gone but when i add width=140% it occur extra space and also menu look like this see this link
image
menu bar code
.wrap {
width: 100%; /* Spans the width of the page */
height: 40px;
margin: 0; /* Ensures there is no space between sides of the screen and the menu */
z-index: 99; /* Makes sure that your menu remains on top of other page elements */
position: relative;
background-color: #366b82;
}
.navbar {
height: 50px;
border-right: 1px solid #54879d;
margin: 0px;
padding: 0px;
position:absolute;
margin-left:40px;
}
.navbar li {
height: auto;
width: 131px; /* Each menu item is 150px wide */
float: left; /* This lines up the menu items horizontally */
text-align: center; /* All text is placed in the center of the box */
list-style: none; /* Removes the default styling (bullets) for the list */
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #366b82;
}
.navbar a {
padding: 18px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 1px solid #54879d; /* Creates a border in a slightly lighter shade of blue than the background. Combined with the right border, this creates a nice effect. */
border-right: 1px solid #1f5065; /* Creates a border in a slightly darker shade of blue than the background. Combined with the left border, this creates a nice effect. */
text-decoration: none; /* Removes the default hyperlink styling. */
color: white; /* Text color is white */
display: block;
}
.navbar li:hover, a:hover {background-color: #54879d;}
.navbar li ul {
display: none; /* Hides the drop-down menu */
height: auto;
margin: 0; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
}
.navbar li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
.navbar li ul li {background-color: #54879d;}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbar li ul li a:hover {background-color: #366b82;}
.navbar li ul li ul li {
margin-top:-50px;
margin-left:130px;
display:block;
}