How can I make it so that I can have both a horizontal and vertical navigation bar? I'm a big beginner baby at design and I'm trying to figure out what I'm doing wrong but I'm not sure how to have CSS on multiple links.
<body>
<div class="horizontallinks">
<ul>
<li> link1 </li>
<li>link 2</li>
<li>link 3</li>
<li>
<link 4</div>
<div class="verticallinks">
<ui>
<li>link a </li>
<li> link b</li>
<li> link c </li>
</div>
</ul>
</body>
css:
.horizontallinks {
position: fixed;
list-style-type: none;
margin-top: 70px;
margin-left: 300px;
padding: 0;
font-size: 18px;
overflow: hidden;
background-color: white;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.verticallinks {
position: fixed;
list-style-type: none;
padding: 0;
font-size: 18px;
margin-left: 45px;
margin-top: 165px;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.horizontallinks {
position: fixed;
list-style-type: none;
margin-top: 70px;
margin-left: 300px;
padding: 0;
font-size: 18px;
overflow: hidden;
background-color: white;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.verticallinks {
position: fixed;
list-style-type: none;
padding: 0;
font-size: 18px;
margin-left: 45px;
margin-top: 165px;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<body>
<div class="horizontallinks">
<ul>
<li>link1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
<div class="verticallinks">
<ul>
<li>link a</li>
<li>link b</li>
<li>link c</li>
</ul>
</div>
</div>
</body>
Try this
<body>
<h2 class="horizontallinks">
<ui class="make-inline">
<li>link1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</h2>
<div class="body-wrapper">
<div class="side-bar">
<ui>
<li>link a</li>
<li>link b</li>
<li>link c</li>
</ul>
</div>
<div class="body-style">
<!-- Body content -->
</div>
</div>
</body>
Would it not be better to create a horizontal menu for devices with large display and a vertical menu for devices with a smaller display?
css media classes (mdn link) can be used for this.
var close = document.getElementsByClassName("close");
var menu = document.getElementById("menu");
for (var i = 0; i < close.length; i++) {
close[i].addEventListener("click", function() {
menu.style.left = "-250px";
});
}
body {
margin: 0;
}
#menu {
display: block;
border-radius: 5px;
background-color: #496D89;
height: 50px;
}
#menu ul {
font-size: 0em;
display: block;
height: 100%;
font-size: 2rem;
margin: 0 auto;
padding: 0;
list-style: none;
}
#menu ul li {
line-height: 1.5em;
display: inline-block;
padding: 0 0.2em;
height: 100%;
}
#menu ul li:hover {
background-color: #294F6D;
border-radius: 5px;
}
#menu ul li a {
color: white;
}
#menu ul li a:visited {
color: #F9CEE7;
}
#menu .close {
display: none;
}
#media (max-width: 600px) {
#menu {
position: absolute;
display: inline-block;
width: 300px;
height: auto;
transition: left 1s;
}
#menu ul {
width: auto;
}
#menu ul li {
display: block;
}
#menu .close {
display: initial;
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 50px;
font-size: 2rem;
border-radius: 5px;
border: none;
background-color: #123652;
color: white;
cursor: pointer;
text-shadow: 2px 2px black;
}
.close:active {
background-color: #042037;
text-shadow: none;
}
}
<nav id="menu" style="left:0px;">
<ul>
<li>Home
</li>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
</li>
<li>Link5
</li>
</ul>
<button class="close">X</button>
</nav>
Related
I am trying to create a fixed navigation bar + logo.
When set to 100%, the width is larger than the width of <body>. See the screenshot
N.B. Let's ignore for a sec the problem that the navigation bar overlaps the image. I am tackling one thing at a time
This was expected since fixed elements are placed outside the flow. Hence 100% is relative to the browser and not other elements.
2 QUESTIONS:
How can I avoid this and having the same width of <body>? I have already tried to use the inherit attribute with no success
If the fixed elements are removed from the flow of the HTML, why does <nav> take into account the 8px standard margin from <body> on the left (see picture)? Shouldn't this place at the top-left corner?
CODE
nav {
position: fixed;
top: 0;
width: 100%;
background-color: white;
margin: 0 auto;
padding: 10px 0px 0px 0px;
}
#NavBar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #8FAADC;
}
.NavBarElements {
float: left;
border-right: 1px solid white;
width: 16.6%;
font-size: 12px;
}
.NavBarElements a {
display: block;
color: white;
text-align: center;
padding: 10px 35px;
text-decoration: none;
font-family: Verdana;
}
<nav>
<img id="MainLogo" src="pic/logohome.png" alt="Logo">
<ul id="NavBar">
<li class="NavBarElements">Item 1</li>
<li class="NavBarElements">Item 2</li>
<li class="NavBarElements">Item 3</li>
<li class="NavBarElements">Item 4</li>
<li class="NavBarElements">Item 5</li>
<li class="NavBarElements">Item 6</li>
</ul>
</nav>
*{
margin: 0;
padding: 0;
}
nav {
position: fixed;
top: 0;
width: 100%;
background-color: white;
margin: 0 auto;
padding: 10px 0px 0px 0px;
}
#NavBar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #8FAADC;
}
.NavBarElements {
float: left;
border-right: 1px solid white;
width: 16.6%;
font-size: 12px;
}
.NavBarElements a {
display: block;
color: white;
text-align: center;
padding: 10px 35px;
text-decoration: none;
font-family: Verdana;
}
You can use calc():
nav {
position: fixed;
top: 0;
width: 100%;
background-color: white;
margin: 0 auto;
padding: 10px 0px 0px 0px;
}
#NavBar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #8FAADC;
}
.NavBarElements {
float: left;
border-right: 1px solid white;
width: calc(16.6% - (16px / 6));
font-size: 12px;
}
.NavBarElements a {
display: block;
color: white;
text-align: center;
padding: 10px 35px;
text-decoration: none;
font-family: Verdana;
}
<nav>
<img id="MainLogo" src="pic/logohome.png" alt="Logo">
<ul id="NavBar">
<li class="NavBarElements">Item 1</li>
<li class="NavBarElements">Item 2</li>
<li class="NavBarElements">Item 3</li>
<li class="NavBarElements">Item 4</li>
<li class="NavBarElements">Item 5</li>
<li class="NavBarElements">Item 6</li>
</ul>
</nav>
I have a menu in HTML with submenus that are displayed when hovering over the main button, but I would like to know if it is possible to make the submenus appear when click on the button.
*Configurações Padrões*/ ul.menu,
.menu li,
.menu a {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
ul.menu ul {
position: absolute;
display: none;
}
ul.menu {
float: left;
font-family: Verdana, Geneva, sans-serif;
font-size: 15px;
padding: 0 5px;
margin: 0px -8px;
width: 100%;
position: fixed;
bottom: 0;
}
/* Configurações nivel 1*/
.menu li {
float: left;
width: auto;
position: relative;
}
.menu li a {
display: block;
padding: 0 20px;
line-height: 45px;
height: 45px;
float: left;
}
/* Configurações nivel 2*/
.menu li:hover>ul.submenu-1 {
display: block;
top: -145px;
left: 0;
padding: 5px;
width: 200px;
}
.menu ul.submenu-1 a {
width: 160px;
padding: 0 20px;
}
/* Configurações nivel 2*/
.menu li:hover>ul.submenu-2 {
display: block;
top: 0;
left: 135px;
padding: 5px;
width: 200px;
}
.menu ul.submenu-2 a {
width: 140px;
padding: 0 20px;
}
/* Configurações nivel 3*/
.menu li:hover>ul.submenu-3 {
display: block;
top: 0;
left: 195px;
padding: 5px;
width: 200px;
}
.menu ul.submenu-3 a {
width: 160px;
padding: 0 20px;
}
/*Configurações de cores*/
/*nivel 1*/
.menu {
background: #CCC;
}
.menu a {
color: #000;
}
.menu li:hover>a {
background: #999;
color: #fff;
}
/*nivel 2*/
.submenu-1 {
background: #999;
}
.submenu-1 a {
color: #fff;
}
.submenu-1 li:hover>a {
background: #666;
}
/*nivel 3*/
.submenu-2 {
background: #666;
}
.submenu-2 a {
color: #fff;
margin-top: -4px;
}
.submenu-2 li:hover>a {
background: #333;
}
/*nivel 3*/
.submenu-3 {
background: #333;
}
.submenu-3 a {
color: #fff;
}
.submenu-3 li:hover>a {
background: #000;
}
.menuul li:hover,
ul li.active {}
<ul class="menu">
<li>Iniciar
<ul class="submenu-1">
<li>Submenu 1
<ul class="submenu-3">
<li>Submenu 7</li>
<li>Submenu 8</li>
<li>Submenu 9</li>
</ul>
</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<ul class="submenu-2">
<li>Submenu 4</li>
<li>Submenu 5</li>
<li>Submenu 6</li>
</ul>
</li>
</ul>
</li>
</ul>
I need something like the windows98 style button of this site:
http://osrollers.tumblr.com/
Add a click event to the list element.
Toggle the desired element with a CSS class via classList.toggle().
var menuLi = document.querySelector(".menu li");
var submenu1 = document.querySelector(".submenu-1");
menuLi.addEventListener("click", function() {
submenu1.classList.toggle("toggle-submenu-1");
});
*Configurações Padrões*/ ul.menu,
.menu li,
.menu a {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
ul.menu ul {
position: absolute;
display: none;
}
ul.menu {
float: left;
font-family: Verdana, Geneva, sans-serif;
font-size: 15px;
padding: 0 5px;
margin: 0px -8px;
width: 100%;
position: fixed;
bottom: 0;
}
/* Configurações nivel 1*/
.menu li {
float: left;
width: auto;
position: relative;
}
.menu li a {
display: block;
padding: 0 20px;
line-height: 45px;
height: 45px;
float: left;
}
/* Configurações nivel 2*/
.toggle-submenu-1 {
display: block !important;
top: -145px;
left: 0;
padding: 5px;
width: 200px;
}
/*.menu li:hover>ul.submenu-1 {
display: block;
top: -145px;
left: 0;
padding: 5px;
width: 200px;
}*/
.menu ul.submenu-1 a {
width: 160px;
padding: 0 20px;
}
/* Configurações nivel 2*/
.menu li:hover>ul.submenu-2 {
display: block;
top: 0;
left: 135px;
padding: 5px;
width: 200px;
}
.menu ul.submenu-2 a {
width: 140px;
padding: 0 20px;
}
/* Configurações nivel 3*/
.menu li:hover>ul.submenu-3 {
display: block;
top: 0;
left: 195px;
padding: 5px;
width: 200px;
}
.menu ul.submenu-3 a {
width: 160px;
padding: 0 20px;
}
/*Configurações de cores*/
/*nivel 1*/
.menu {
background: #CCC;
}
.menu a {
color: #000;
}
.menu li:hover>a {
background: #999;
color: #fff;
}
/*nivel 2*/
.submenu-1 {
background: #999;
}
.submenu-1 a {
color: #fff;
}
.submenu-1 li:hover>a {
background: #666;
}
/*nivel 3*/
.submenu-2 {
background: #666;
}
.submenu-2 a {
color: #fff;
margin-top: -4px;
}
.submenu-2 li:hover>a {
background: #333;
}
/*nivel 3*/
.submenu-3 {
background: #333;
}
.submenu-3 a {
color: #fff;
}
.submenu-3 li:hover>a {
background: #000;
}
.menuul li:hover,
ul li.active {}
<ul class="menu">
<li>Iniciar
<ul class="submenu-1">
<li>Submenu 1
<ul class="submenu-3">
<li>Submenu 7</li>
<li>Submenu 8</li>
<li>Submenu 9</li>
</ul>
</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<ul class="submenu-2">
<li>Submenu 4</li>
<li>Submenu 5</li>
<li>Submenu 6</li>
</ul>
</li>
</ul>
</li>
</ul>
If you want activate the submenus on click, instead of mouse over, you have to use a small JavaScript code.
Please, see the comments in the snippet!
// collect each menu item
const links = document.querySelectorAll(".menu>li>a");
// run a loop
for (let i=0; i<links.length; i++)
{
// to bind a click event listener to each menu item
links[i].addEventListener("click", function()
{
// do stuff only if the current item has a submenu
if (this.nextSibling != null)
{
// cache the submenu of the current item
let submenu = this.nextSibling.nextSibling;
// check if the submenu is already visible
if (submenu.classList.contains("active"))
{
// if so, hide it
submenu.classList.remove("active");
}
else
{
// if not, show it
submenu.classList.add("active");
}
}
});
}
.submenu {
display: none;}
.submenu.active {
display: block;}
<ul class="menu">
<li>Main
<ul class="menu submenu">
<li>1
<ul class="menu submenu">
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
</li>
<li>2</li>
<li>3
<ul class="menu submenu">
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>
</li>
</ul>
Hi so in this my explore more button and my ul list so whenever I move my explore button line height the ul and button both move together side..and I want the explore more button downward. what should I do?? I tried using other attributes but nothing worked. I am making this website for my dad's academy.
Here is my HTML code
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="row">
<div>
<ul class="main-nav">
<li>Home</li>
<li>About</li>
<li>Study Visa
<ul>
<li>Australia</li>
<li>Canada</li>
<li>New Zealand</li>
</ul>
</li>
<li>Courses
<ul>
<li>Ielts</li>
<li>PTE</li>
<li>Spoken English</li>
</ul>
</li>
<li>Contact Us
</li>
<li> Login </li>
<li>Reviews</li>
</ul>
</div>
<div class="button">
Explore More
</div>
</div>
</header>
</header>
</body>
this is my CSS code
body {
background: url(abc.jpg) no-repeat;
background-size: none;
background-position : none;
background-size : cover;
margin-left: 20%;
}
.main-nav
{
margin: 0px;
padding: 0px;
list-style: none;
font-family: arial;
position: absolute
top : 20px;
}
.main-nav li {
float: left;
width: 145px;
height: 67px;
background-color: black;
opacity: 0.8;
line-height: 67px;
text-align: center;
font-size: 22px;
margin-left : px;
}
.main-nav li a {
text-decoration: none;
color: white;
display: block;
line-height : 100 px ;
}
.main-nav li a:hover {
background-color: orange;
}
.main-nav li ul li{
display: none;
}
.main-nav li:hover ul li {
display: block;
}.button
{
margin-top: 350px;
margin-left: 320px;
}
.btn
{
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 89px;
font-size: 13px;
text-transform: uppercase;
}
.btn-two
{
font-family: "Roboto", sans-serif;
}
.btn-two:hover
{
background-color: darkorange;
transition: all 0.5s ease-in;
}
so I want the menu above near k academy logo.. and explore more button where it is. thanks!!
I changed up your HTML structure since there were empty tags and random closing tags. CSS i basically just removed the float on the li, since that takes it out of the flow, and instead added flexbox to the ul. Hope that helps flexbox ftw. Idk how your button ended up in that location but I would use position: absolute on that top,right,bottom,left:0 margin: auto;
body {
background: url(abc.jpg) no-repeat;
background-size: none;
background-position: none;
background-size: cover;
}
.main-nav {
display: flex;
justify-content: space-between;
alig margin: 0px;
padding: 0px;
list-style: none;
font-family: arial;
}
.main-nav li {
width: 145px;
height: 67px;
background-color: black;
opacity: 0.8;
line-height: 67px;
text-align: center;
font-size: 22px;
margin-left: px;
}
.main-nav li a {
text-decoration: none;
color: white;
display: block;
line-height: 100 px;
}
.main-nav li a:hover {
background-color: orange;
}
.main-nav li ul li {
display: none;
}
.main-nav li:hover ul li {
display: block;
}
.button {
margin-top: 350px;
margin-left: 320px;
}
.btn {
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 89px;
font-size: 13px;
text-transform: uppercase;
}
.btn-two {
font-family: "Roboto", sans-serif;
}
.btn-two:hover {
background-color: darkorange;
transition: all 0.5s ease-in;
}
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<ul class="main-nav">
<li>Home</li>
<li>About</li>
<li>Study Visa
<ul>
<li>Australia</li>
<li>Canada</li>
<li>New Zealand</li>
</ul>
</li>
<li>Courses
<ul>
<li>Ielts</li>
<li>PTE</li>
<li>Spoken English</li>
</ul>
</li>
<li>Contact Us
</li>
<li> Login </li>
<li>Reviews</li>
</ul>
<div class="button">
Explore More
</div>
</header>
</body>
I hope this will help you to solve the problem.
.main-menu {
background-color: #444;
}
.main-menu nav ul {
margin: 0;
padding: 0;
}
.main-menu nav > ul > li {
display: inline-block;
position: relative;
margin: 0;
}
.main-menu nav > ul > li a {
display: block;
color: #fff;
font-size: 16px;
padding: 20px 15px;
text-decoration: none;
transition: .3s;
}
.main-menu nav > ul > li:hover > a {
color: #7AA93C;
}
.main-menu nav ul li ul {
position: absolute;
padding: 10px 0;
width: 200px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
top: 150%;
opacity: 0;
visibility: hidden;
transition: .3s;
}
.main-menu nav ul li:hover ul {
top: 100%;
opacity: 1;
visibility: visible;
}
.main-menu nav ul li ul li {
display: block;
padding: 0;
margin: 0;
}
.main-menu nav ul li ul li a {
display: block;
text-decoration: none;
padding: 6px 20px;
font-size: 14px;
color: #444;
transition: .3s;
}
.main-menu nav ul li ul li:hover a {
color: #7AA93C;
}
<div class="main-menu">
<nav>
<ul>
<li>
Home
<!-- submenu start -->
<ul class="submenu">
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
</ul>
<!-- submenu end -->
</li>
<li>About</li>
<li>
Service
<!-- submenu start -->
<ul class="submenu">
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
</ul>
<!-- submenu end -->
</li>
<li>Contact</li>
</ul>
</nav>
</div>
I'm pretty stuck right now, I'm working on a site and I have the height of the list on my navigation bar sorted but now I want to make the width bigger so when I hover on it the background colour covers a slightly bigger area instead of brushing up against the end of the text.
I've tried padding it but all that seems to do is move the text over slightly and then center the text within that area.
Image (Don't have enough reputation to embed): http://i.imgur.com/pAxT3gb.png
This is the CSS I currently have for it. I would appreciate any help with this!
html {
margin: 0;
}
body {
padding: 0;
margin: 0;
border: 0;
}
.navigation {
font-family: Arial;
font-size: 16px;
font-weight: lighter;
background-color: #555;
color: white;
width: 100%;
height: 72px;
background-image: url("images/download.png");
}
.navigation ul {
list-style-type: none;
text-decoration: none;
}
.navigation li {
height: 100%;
width: 80px;
display: inline-block;
padding-top: 25px;
float: right;
margin-right: 120px;
}
.navigation li a {
text-decoration: none;
color: white;
}
.navigation li a:hover {
height: 100%;
padding-top: 25px;
padding-bottom: 30px;
width: 80px;
background-color: #556;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="navigation">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</body>
</html>
Is this what you are looking for.
Solution
We remove the width from the parent and make the links block elements with padding
.navigation li {
display: inline-block;
float: right;
margin-right: 120px;
}
.navigation li a {
text-decoration: none;
color: white;
display: block;
padding: 26px 30px;
}
.navigation li a:hover {
background-color: #556;
}
And making the li float right will mess up the order of your links consider floating the parent ul insted.
You'll need to apply the hover state to the li instead of the a, here's my suggestion:
html {
margin: 0;
}
body {
padding: 0;
margin: 0;
border: 0;
}
.navigation {
font-family: Arial;
font-size: 16px;
font-weight: lighter;
background-color: #555;
color: white;
width: 100%;
height: 72px;
background-image: url("images/download.png");
}
.navigation ul {
list-style-type: none;
text-decoration: none;
}
.navigation li {
height: 100%;
width: 80px;
display: inline-block;
padding-top: 25px;
float: right;
padding-left: 25px;
margin-right: 95px;
}
.navigation li a {
text-decoration: none;
color: white;
}
.navigation li:hover {
height: 100%;
padding-top: 25px;
padding-bottom: 30px;
width: 80px;
background-color: #556;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="navigation">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</body>
</html>
http://jsfiddle.net/mj8Lh31x/
html {
margin: 0;
}
body {
padding: 0;
margin: 0;
border: 0;
}
.clearfix {
clear: both;
}
.navigation {
font-family: Arial;
font-size: 16px;
font-weight: lighter;
background-color: #555;
color: white;
background-image: url("images/download.png");
}
.navigation ul {
float: right;
margin: 0px;
list-style-type: none;
text-decoration: none;
}
.navigation li {
padding: 30px 0px;
display: inline-block;
}
.navigation li a {
padding: 30px 25px;
text-decoration: none;
color: white;
}
.navigation li a:hover {
background-color: #556;
}
<div class="navigation">
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
</ul>
<div class="clearfix"></div>
</div>
I have this CSS dropdown menu. I want the homepage to start on the left side of the page, not on the center. Herein is the style sheet and the div tags for the dropdown navigation bar:
ul, li, html, a
{
margin:0; padding: 0;
}
body
{
text-align: center;
margin: 0 auto;
padding: 0;
font: 65% arial, sans-serif;
}
li
{
list-style-type: none;
}
a
{
text-decoration: none;
color: #034af3;
}
ul#nav
{
width: 22.5em;
height:2.5em;
margin: 2em auto 0;
font-size: 1.5em;
}
ul#nav li
{
position: relative;
float: left;
width: 5em;
height: 2em;
line-height: 2em;
background-color: #465c71;
display: block;
padding: 4px 0px;
border-right: 1px #4e667d solid;
color: #dde4ec;
}
ul#nav li.noBorder
{
border-right: none;
}
ul#nav li:hover
{
background-color: silver;
}
ul#nav li a
{
display: block;
float: left;
width: 100%;
}
ul#nav li ul
{
display: none;
}
ul#nav li:hover ul
{
display: inline;
float: left;
width: 10em;
height: auto;
margin: 0; padding: 0.27em;
font-size: 1em;
text-align: left;
}
ul#nav li:hover ul li
{
width: 100%;
height: 2em;
background-color: Yellow;
border: none;
border-bottom: 1px solid silver;
overflow: hidden;
}
ul#nav li:hover ul li a
{
display: block;
margin: 0; padding: 0 0 0 .3em;
height: 100%;
line-height:2em;
color: #465c71;
}
ul#nav li:hover ul li a:hover
{
background-color: white;
}
<div style="background:#3a4f63;">
<ul id="nav">
<li>Home</li>
<li>Abour
<ul>
<li>About 1</li>
<li>About 2</li>
<li>About 3</li>
<li class="noBorder">About 4</li>
</ul>
</li>
<li>Blog
<ul>
<li>About 1</li>
<li>About 2</li>
<li>About 3</li>
<li class="noBorder">About 4</li>
</ul>
</li>
<li class="noBorder">Contact</li>
</ul>
</div>
Try:
body { text-align: left; }
ul#nav { margin: 2em 0 0; }