I am working on a menu bar for a web site and the dropdown menu's work fine, the only problem is they will only display when my mouse is right at the edge of where they come out. Can anyone help, would be much appreciated. The part that you have to hover over is the very bottom of the red areas, and on dropdown 1 another submenu at the bottom to the right.
Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="shortcut icon" href="#"/>
</head>
<body>
<div id="banner">
<p id="title">Code Works</p>
</div>
<center>
<div style="background-color: #FFFF00" id="display">=</div>
</center>
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Setting Up +
<ul>
<li>Programs</li>
<li>Files</li>
</ul>
</li>
</ul>
</li>
<li>Templates +
<ul>
<li>Web Page</li>
<li>Clocks</li>
<li>Calendars</li>
<li>Maps</li>
<li>Transitions</li>
<li>Video</li>
<li>Audio</li>
<li>Search</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
**CSS**
html {
height: 100%;
}
body {
background: linear-gradient(#C0C0C0, #E0E0E0);
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
#banner
{
width: 1376px;
margin-left: -10px;
margin-right: -10px;
margin-top: -32px;
padding-top: 0px;
background-color: #3366CC;
background-size: 100%;
height: 80px;
border-bottom: 4px inset #254A93;
background: linear-gradient(#3366CC, #2952A3);
}
#title
{
padding-top: 0.7em;
color: #FFFF00;
text-align: center;
font-size: 32px;
}
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: block;
}
nav ul
{
opacity: 0;
margin-top: -1px;
margin-left: -10px;
background: linear-gradient(#FFFF66, #FFFF00);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after
{
content: ""; clear: both; display: block;
}
nav ul li
{
float: left;
}
nav ul li:hover
{
border-bottom: 4px solid #FF0000;
background: linear-gradient (#FFFF66, #FFFF00);
border-top: 2px solid #FFFF66;
}
nav ul li:hover a
{
color: #3366CC;
}
nav ul li a
{
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul
{
width: 200px;
background: #FFFF00; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li
{
border: 2px outset #FFFF00;
background: linear-gradient(#FFFF66, #FFFF00);
float: none;
position: relative;
}
nav ul ul li a
{
padding: 15px 40px;
color: #757575;
}
nav ul ul li a:hover
{
border-top: #E0E0E0;
border-bottom: #E0E0E0;
background: linear-gradient(#FFFF00, #FFFF66);
}
nav ul ul ul
{
position: absolute; left: 100%; top:0;
}
p:hover ul
{
display: none;
}
nav ul:hover
{
opacity: 0.7;
}
nav ul:hover nav ul li
{
opacity: 0.7;
}
#display
{
opacity: 0.7;
height: 30px;
background: linear-gradient(#FFFF00, #FFFF66);
}
#display a
{
size: 32px;
text-decoration: none;
}
nav ul ul li:hover
{
border-top: 1px solid #E0E0E0;
border-bottom: 1px solid #E0E0E0;
}
I think there are some redundant CSS in your code, but to make it work, you just need to add the line opacity:0.7 to this CSS:
nav ul li:hover > ul {
display:block;
opacity:0.7;
}
Here is the working fiddle
Related
How can I decrease the size of a <nav> tag in CSS? I cannot seem to figure it out. I have provided all of the code from my project below. My code did have PHP, but I have removed it due to it being unnecessary. Here is a JSFiddle, if you wish to preview the code there.
HTML and CSS:
#top-menu {
top: 0;
position: fixed;
}
nav {
position: relative;
/*float: left;*/
width: 100%;
background: #1E1E1E;
/* display: table; */
margin: 0;
text-align: center;
height: 25px;
border: none;
border-width: 0;
margin: 0;
padding: 10px 10px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
border: none;
border-width: 0;
}
nav ul {
background: #1E1E1E;
color: white;
padding: 10px 10px;
border-radius: 0;
list-style: none;
position: relative;
display: inline-table;
border-width: 0;
border: none;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
border: none;
border-width: 0;
}
nav ul li:hover {
background: #1E1E1E;
background-color: orange;
color: white;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
height: 25px;
padding: 10px 10px;
color: #757575;
text-decoration: none;
border: none;
border-width: 0;
}
nav ul ul {
background: #1E1E1E;
color: white;
border-radius: 0px;
padding: 10px 10px;
position: absolute;
top: 50px;
border-width: 0;
margin-bottom: 0;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 10px 10px;
color: #fff;
height: auto;
}
nav ul ul li a:hover {
background: #4b545f;
background-color: orange;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
nav li#english a {
background: url(images/english.jpg) no-repeat;
background-position: center center;
}
nav li#english a:hover {
background: url(images/english.jpg) no-repeat;
background-position: center center;
background-color: orange;
}
nav li#english a.current {
background: url(images/english.jpg) no-repeat;
background-position: center center;
cursor: default;
}
/*--------------------------------------------*/
#menu {
background-color: #1E1E1E;
text-align: center;
padding-bottom: 0px;
}
body {
margin: 0px;
}
.clearfloat {
clear: both;
margin: 0;
padding: 0;
}
/*--------------------------------------------*/
#bottom {
float: left;
width: 100%;
background: #1E1E1E;
/*display: table; */
margin: 0;
text-align: center;
min-height: 25px;
height: 25px;
border-width: 0px;
margin-top: 0px;
padding-top: 0px;
bottom: 0px;
position: fixed;
}
#bottom ul ul {
display: none;
}
#bottom ul li:hover > ul {
display: block;
}
#bottom ul {
background: #1E1E1E;
color: white;
padding: 0 0;
border-radius: 0;
list-style: none;
position: relative;
display: inline-table;
}
#bottom ul:after {
content: "";
clear: both;
display: block;
}
#bottom ul li {
float: left;
}
#bottom ul li:hover:nth-child(1) {
background: #1E1E1E;
color: #757575;
text-decoration: none;
}
#bottom ul li:hover:nth-child(2) {
background: #1E1E1E;
color: #757575;
text-decoration: none;
}
#bottom ul li:hover {
background: #1E1E1E;
color: white;
text-decoration: underline;
}
#bottom ul li:hover a {
color: #fff;
}
#bottom ul li a {
display: block;
padding: 25px 40px;
color: #757575;
text-decoration: none;
}
#bottom ul ul {
background: #1E1E1E;
color: white;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
width: auto;
}
#bottom ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#bottom ul ul li a {
padding: 15px 40px;
color: #fff;
}
#bottom ul ul li a:hover {
background: #4b545f;
}
#bottom ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
/*--------------------------------------------*/
.bottommenuitem {
vertical-align: middle;
padding: 25px 40px;
color: #757575;
}
<!DOCTYPE html5>
<html>
<head>
<title>Firma A/S</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="cssMenu.css">
</head>
<body>
<nav id="top-menu">
<p id="menu" style="margin-bottom: -25">
<a href="Index.html">
<img src="Tilbage.jpg" alt="Tilbage" width="243" height="243" />
</a>
<img src="Top_10.jpg" alt="" width="739" height="243" />
</p>
<nav id="top">
<ul>
<li>Velkommen
</li>
<li>Firma A/S
<ul>
<li>Koncern oversigt
<ul>
<li>Ejendomsselskaber
</li>
<li>Investeringsselskaber
</li>
<li>Øvrige selskaber
</li>
<li>Lukkede eller solgte selskaber
</li>
</ul>
</li>
<li>Jubilæum
</li>
<li>Årsrapport
</li>
<li>Galleri
</li>
<li>Kontaktoplysninger
</li>
</ul>
</li>
<li>Privat
</li>
<li>Køb og salg
</li>
<li><a id="english" href="index.php">In English</a>
</li>
</ul>
<!-- PHP was here -->
</nav>
</nav>
<div style="margin-top: 410; margin-bottom: 115">
<!-- More PHP was here -->
</div>
<nav id="bottom">
<ul>
<li class="bottommenuitem">Firma A/S</li>
<li class="bottommenuitem">phone No</li>
<li>xxx#xxx.xx
</li>
</ul>
</nav>
</body>
</html>
Any help is appreciated, thank you.
Please try this:
nav ul {
background: #1e1e1e none repeat scroll 0 0;
border: medium none;
border-radius: 0;
color: white;
display: inline-table;
list-style: outside none none;
margin: 0;
padding: 10px;
position: relative;
}
nav {
float: left;
width: 100%;
background: #1E1E1E;
display: table;
margin: 0;
text-align: center;
height: 25px;
border: none;
border-width: 0;
margin: 0;
padding: 10px 10px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
border: none;
border-width: 0;
}
nav ul {
background: #1E1E1E;
color: white;
padding: 10px 10px;
border-radius: 0;
list-style: none;
position: relative;
display: inline-table;
border-width: 0;
border: none;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
border: none;
border-width: 0;
}
nav ul li:hover {
background: #1E1E1E;
background-color: orange;
color: white;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
height: 25px;
padding: 10px 10px;
color: #757575;
text-decoration: none;
border: none;
border-width: 0;
}
nav ul ul {
background: #1E1E1E;
color: white;
border-radius: 0px;
padding: 10px 10px;
position: absolute;
top: 50px;
border-width: 0;
margin-bottom: 0;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 10px 10px;
color: #fff;
height: auto;
}
nav ul ul li a:hover {
background: #4b545f;
background-color: orange;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
nav li#english a {
background: url(images/english.jpg) no-repeat;
background-position: center center;
}
nav li#english a:hover {
background: url(images/english.jpg) no-repeat;
background-position: center center;
background-color: orange;
}
nav li#english a.current {
background: url(images/english.jpg) no-repeat;
background-position: center center;
cursor: default;
}
<nav id="top-menu">
<p id="menu" style="margin-bottom: -25">
<a href="Index.html">
<img src="Tilbage.jpg" alt="Tilbage" width="243" height="243" />
</a>
<img src="Top_10.jpg" alt="" width="739" height="243" />
</p>
<nav id="top">
<ul>
<li>Velkommen
</li>
<li>Firma A/S
<ul>
<li>Koncern oversigt
<ul>
<li>Ejendomsselskaber
</li>
<li>Investeringsselskaber
</li>
<li>Øvrige selskaber
</li>
<li>Lukkede eller solgte selskaber
</li>
</ul>
</li>
<li>Jubilæum
</li>
<li>Årsrapport
</li>
<li>Galleri
</li>
<li>Kontaktoplysninger
</li>
</ul>
</li>
<li>Privat
</li>
<li>Køb og salg
</li>
<li><a id="english" href="index.php">In English</a>
</li>
</ul>
</nav>
</nav>
If you are talking about the fixed nav id=top-menu, just add a height to the CSS for the id selector. It works for me. If you have problems with it being overridden, make sure that it is placed lower in the CSS file or add !important
after the rule.
#top-menu {
height: 6px;
}
#top-menu {
height: 6px !important;
}
I am new in CSS and developing a dropdown menu. But when I add drop down list into main list it floats left. But I want float towards bottom Like thisCan anyone please help me that how to make list which drops Down
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body
{
margin: 0;}
#Header
{
position: fixed;
border: 1px solid black;
width: 100%;
height: 150px;
margin: 0%;
}
#logo
{
position: absolute;
border: 1px solid black;
width: 20%;
height: 150px;
margin: 0%;
}
#nav
{
position: absolute;
border: 1px solid black;
width: 79.5%;
height: 50px;
top: 65%;
margin-left: 20.2%;
background: transparent;
}
#nav ul
{
margin: 0;
padding: 0;
}
#nav ul li
{
list-style: none;
position:relative;
float: left;
margin:5px;
}
#nav ul li a{
text-decoration: none;
display: block;
padding: 10px 20px;
color: black;
font-size: 120%;
}
a:hover {
background: gray;
color:white;
height: 30px;
}
#subList
{
margin: 0;
padding: 0;
}
#subList li
{
list-style: none;
position:absolute;
margin:5px;
}
/* #nav ul li ul
{
display: block;
margin: 0px;
padding: 0px;
}
#nav ul li ul li
{
list-style: none;
position:relative;
float: bottom;
}
#nav ul li ul li a
{
position:absolute;
dispay:block;
color: black;
font-size: 120%;
}
/* #nav ul li:hover>ul
{
display: block;
}
*/
</style>
</head>
<body>
<div id="Header">
<div id="logo"></div>
<div id="nav">
<ul>
<li>Home</li>
<li>News
<ul id="subList">
<li>news1</li>
<li>news2</li>
<li>news3</li>
<li>news4</li>
</ul>
</li>
<li>About us</li>
<li>Sign in</li>
</ul>
</div>
</div>
</body>
</html>
You need to define specificity for direct child of nav. In your case this is setting all the ul li to float left.
try this.
#nav > ul > li
{
list-style: none;
position:relative;
float: left;
margin:5px;
}
Hope this help you!
This should get you started.
#nav {
border: 1px solid black;
width: 79.5%;
height: 50px;
top: 65%;
margin-left: 20.2%;
background: transparent;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav ul li {
list-style: none;
position: relative;
float: left;
margin: 5px;
}
#nav ul li a {
text-decoration: none;
display: block;
padding: 10px 20px;
color: black;
font-size: 120%;
}
a:hover {
background: gray;
color: white;
}
#subList {
margin: 0;
padding: 0;
position: absolute;
display: none;
background: #fff;
border: 1px solid #000;
}
#subList li {
list-style: none;
margin: 5px;
}
#nav ul li:hover > #subList {
display: block;
left: 0;
}
<div id="nav">
<ul>
<li>Home
</li>
<li>News
<ul id="subList">
<li>news1
</li>
<li>news2
</li>
<li>news3
</li>
<li>news4
</li>
</ul>
</li>
<li>About us
</li>
<li>Sign in
</li>
</ul>
</div>
I have a vertical Nav menu in html and I'm trying to make a submeu, but it's not going well. When I go to click the submeu it disappears. Any help would be appreciated
nav ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
}
nav,
ul {
margin-top: 4px;
}
nav ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
nav ul li:hover {
background-color: #E88B2E;
}
nav.idk {
color: yellow;
}
a:link {
color: green;
}
a:visited {
color: green;
}
a:hover {
color: lightgreen;
}
ul li ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
display: none;
}
ul li ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
a:link {
text-decoration: none;
}
nav ul li:hover ul {
/* When list item is hovered, display UL nested within. */
display: block;
}
nav ul ul {
/* Remove element from document flow */
position: absolute;
/* Position relative to its parent <li> */
left: 210px;
top: 0;
border-top: 1px solid #e9e9e9;
display: none;
}
nav ul ul li {
width: 200px;
background: #f1f1f1;
border: 1px solid #e9e9e9;
border-top: 0;
}
nav ul ul li a {
color: #a8a8a8;
font-size: 12px;
text-transform: none;
}
nav ul ul li a:hover {
color: #929292;
}
<div class="wrapper">
<div class="navigation">
<nav>
<ul>
<li>About
</li>
<li>News
</li>
<li>The Controversy
<ul>
<li>About the Hounds
</li>
<li>What to Wear
</li>
<li>Who are these People
</li>
</ul>
</li>
<li>Contact
</li>
<li>References
</li>
<li>Webmaster
</li>
<li>Site Map
</li>
<li>FAQ
</li>
</ul>
</nav>
</div>
You have to change left value from 210px to 200 or even better use margin-left to count value relative to parent.
nav ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
}
nav,
ul {
margin-top: 4px;
}
nav ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
nav ul li:hover {
background-color: #E88B2E;
}
nav.idk {
color: yellow;
}
a:link {
color: green;
}
a:visited {
color: green;
}
a:hover {
color: lightgreen;
}
ul li ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
display: none;
}
ul li ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
a:link {
text-decoration: none;
}
nav ul li:hover ul {
/* When list item is hovered, display UL nested within. */
display: block;
}
nav ul ul {
/* Remove element from document flow */
position: absolute;
/* Position relative to its parent <li> */
margin-left: 200px;
top: 0;
border-top: 1px solid #e9e9e9;
display: none;
}
nav ul ul li {
width: 200px;
background: #f1f1f1;
border: 1px solid #e9e9e9;
border-top: 0;
}
nav ul ul li a {
color: #a8a8a8;
font-size: 12px;
text-transform: none;
}
nav ul ul li a:hover {
color: #929292;
}
<div class="wrapper">
<div class="navigation">
<nav>
<ul>
<li>About
</li>
<li>News
</li>
<li>The Controversy
<ul>
<li>About the Hounds
</li>
<li>What to Wear
</li>
<li>Who are these People
</li>
</ul>
</li>
<li>Contact
</li>
<li>References
</li>
<li>Webmaster
</li>
<li>Site Map
</li>
<li>FAQ
</li>
</ul>
</nav>
</div>
I have noticed my nav bar is transparent and I would like it to not be. I have no previous opacity/transparency set that would cause it to be inheriting the property. I would like to make my nav bar non transparent.
Here is the CSS:
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
}
nav ul li:hover a {
opacity: 1;
color: white;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
}
Here is the corresponding HTML:
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</li>
<li>Starter Kits</li>
<li>Rebuildables
<ul>
<li>Genesis</li>
<li>Dripper</li>
<li>Silica/Cotton</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical</li>
<li>Variable Voltage</li>
</ul>
</li>
<li>Accessories</li>
</ul>
</nav>
<p id="welcome_paragraph">
Welcome, blah blah (this text shows through the nav bar)<br />
</p>
HTML
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?
</li>
<li>About Us
</li>
<li>Contact
</li>
</ul>
</li>
<li>Starter Kits
</li>
<li>Rebuildables
<ul>
<li>Genesis
</li>
<li>Dripper
</li>
<li>Silica/Cotton
</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical
</li>
<li>Variable Voltage
</li>
</ul>
</li>
<li>Accessories
</li>
</ul>
</nav>
<p id="welcome_paragraph">Welcome, blah blah (this text shows through the nav bar)
<br />
</p>
CSS
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
color:white;
}
body
{
background-color:blue;
}
Updated CSS of yours
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
Updated Fiddle
Have you tried;
nav {
background: white;
}
Elements are transparent unless you set a background on them or its inherited.
EDIT: If this doesn't help set up a fiddle for us jsfiddle.net.
In your css
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
background is white.
If you change background to other colour may be your problem will go off. Hope it will help
Cheers !!
i've a menu and i would want to use border on left but here is the desired look how i wanted, i am able to add border but it will take full height of the li element and also i do not want that border to appear on sub menus
example : aunipark.in
here is my code :
html
<div class="menudiv">
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul>
<li>School</li>
<li>Vision and Mission </li>
<li>Principal’s desk
<li>Management
</ul> </li>
<li>Admission
<ul>
<li>Overview</li>
<li>Download application form</li>
</ul> </li>
<li>Gallery</li>
<li>School Calander</li>
<li>News & Events</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
</div>
css
.menudiv
{
width:980px;
}
.menu {
font-family: 'Open Sans', sans-serif;
font-size:14px;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #111312;
margin: 0;
list-style: none;
position: relative;
padding: 0;
border:3px solid #111312;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
border-bottom: 3px solid transparent;
}
.menu ul li:hover {
background: #111312;
border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 15px;
border-right: 3px solid #fff;
color: #fff;
text-decoration: none;
}
.menu ul ul {
background: #111312;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#000;
display: block;
}
.menu ul ul li a:hover {
background: #111312;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul ul li a:hover {
background: #95CEF1;
color: #000;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top:0;
}
.head
{
width:500px;
height:200px;
background:#789;
}
.foot
{
width:500px;
height:200px;
background:#123;
}
and also the fiddle : jsfiddle.net/p7Nsf/9/
try this....
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
#list { background-color: aqua; }
.horizontal { display: inline; border-left: 2px solid; padding-left: 0.3em; }
.first { border-left: none; padding-left: 0; }
</style>
</head>
<body>
<div id="list">
<div>
<ul>
<li class="first">Home</li>
<li class="horizontal">About
<ul>
<li class="first">School</li>
<li class="horizontal">Vision and Mission </li>
<li class="horizontal">Principal’s desk
<li class="horizontal">Management
</ul> </li>
<li class="horizontal">Admission
<ul>
<li class="first">Overview</li>
<li class="horizontal">Download application form</li>
</ul> </li>
<li class="horizontal">Gallery</li>
<li class="horizontal">School Calander</li>
<li class="horizontal">News & Events</li>
<li class="horizontal">Career</li>
<li class="horizontal">Contact</li>
</ul>
</div>
</div>
</body>
</html>
Add the padding-top and bottom not to the anchor, but to the li. And give the anchor a border-right:
.menu > ul > li > a {
border-right: 2px solid white;
display: block;
padding-left: 25px;
padding-right: 25px;
}
.menu > ul > li:last-child > a {
border-right: 0;
}
Check here.
Like this
demo
css
.menudiv {
width: 788px;
margin:0 auto;
}
.menu {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
.menu ul ul {
display: none;
margin:4px 0 0 0;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #111312;
margin: 0;
list-style: none;
position: relative;
padding: 0;
border: 3px solid #111312;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius:13px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
border-bottom: 3px solid transparent;
border-right: 3px solid #fff;
}
.menu ul li:last-child{
border:none;
}
}
.menu ul li:hover {
background: #111312;
border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 15px;
color: #fff;
text-decoration: none;
}
.menu ul ul {
background: #111312;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
position: relative;
border-right:none;
}
.menu ul ul li a {
padding: 10px;
color: #000;
display: block;
}
.menu ul ul li a:hover {
background: #111312;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
text-decoration: none;
}
.menu ul ul ul li a:hover {
background: #95CEF1;
color: #000;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
.head {
width: 500px;
height: 200px;
background: #789;
}
.foot {
width: 500px;
height: 200px;
background: #123;
}
The border will always be as tall as the element, but you can draw a line and apply it to all the elements with
background:url(line.png) bottom right no-repeat;
This might be helpfull, I usually handle border lines in navigation with the help of "line-height" property, it allows to control the height borders from left or right sides. In other words you can change the height of a left/right border by changeing "line-height" property.
HTML
<div class="wrapper">
<div class="container">
<ul class="nav">
<li>My Wishlist</li>
<li>My Account</li>
<li>My Cart</li>
<li>Login</li>
</ul>
</div>
</div>
CSS
.wrapper{
background: #f1f1f1;
width: 100%;
border-top: 5px solid #d1b792;
border-bottom: 5px solid #d1b792;
padding-bottom: 1px;
}
.nav li{
display: inline-block;
margin-left: -4px;
}
.nav li a{
display: block;
font-size: 18px;
padding: 0px 12px 3px 12px;
margin: 5px 0;
color: #666694;
line-height: 12px;
border-right: 2px solid #4679BD;
text-decoration: none;
}
.nav li a:hover{
color: darkblue;
}
.nav li:last-child a{
border-right: none;
}
Here is the Fiddle: http://jsfiddle.net/johannesMt/Lt143z8x/