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>
Related
This is how page looks:
First problem, that
If you look closer at this, it's a bit transparent, we can see div main behind this ul inside ul.
Second if we zoom the browser up... this happens
I would like this text no nowrap, just 3 and 4 li element won't fit in this zoomed screen and we won't see this.
And for last
I would like main to fit the rest of the screen we got (at least the rest, until there is no content that goes in width or height more)
To look like this:
Just main to at Minimum fill rest of the free space on website, and I don't want to do it by whole body background color declaration.
Whole code:
html:
<body>
<div id="header">
<ul>
<li>Nazwa Strony</li>
<li>0 Komentarze do moderacji</li>
<li>Dodaj nowy
<ul>
<li>Post</li>
<li>Stronę</li>
<li>Media</li>
</ul>
</li>
<li>Usuń cały cache</li>
</ul>
</div>
<div class="clear"></div>
<div id="aside">
<ul>
<li>Deszbord</li>
<li>Posty</li>
<li>Strony</li>
<li>Media</li>
<li>Wygląd</li>
<li>Użytkownicy</li>
<li>Ustawienia</li>
</ul>
</div>
<div class="clear"></div>
<div id="main">
asdasdasd
</div>
</body>
#header {
position: fixed;
top: 0;
height: 20px;
width: 100%;
background-color: #23282d;
padding: 10px 0px;
z-index: 100;
}
#header a {
color: #ccc;
text-decoration: none;
}
#header ul, #header ul li ul{
list-style: none;
margin: 0px;
}
#header ul li {
float: left;
margin-right: 70px;
}
#header ul li ul {
padding: 0px;
text-align: center;
display: none;
border: 1px solid #FFF;
background-color: #EEE;
border-radius: 2px;
margin-top: 5px;
}
#header ul li ul a {
color: #000;
}
#header ul > li:hover > ul {
display: block;
}
#header ul li ul li {
float: none;
margin: 0px;
margin-top: 15px;
margin-bottom: 15px;
}
#aside {
left: 0;
position: fixed;
width: 170px;
height: 100%;
top: 40px;
background-color: #323435;
border-top: 2px dotted #333;
}
#aside ul {
list-style: none;
padding-left: 10px;
}
#aside ul li {
margin-bottom: 15px;
}
#aside ul li a {
color: #ccc;
text-decoration: none;
}
#header a:hover, #aside a:hover{
color: #2295cc;
}
#main {
background-color: #f1f1f1;
width: 100%;
height: 100%;
position: relative;
top: 40px;
left: 170px;
}
.clear {
clear: both;
}
#header {
position: fixed;
top: 0;
height: 20px;
width: 100%;
background-color: #23282d;
padding: 10px 0px;
z-index: 100;
}
#header a {
color: #ccc;
text-decoration: none;
}
#header ul, #header ul li ul{
list-style: none;
margin: 0px;
}
#header ul li {
float: left;
margin-right: 70px;
}
#header ul li ul {
padding: 0px;
text-align: center;
display: none;
border: 1px solid #FFF;
background-color: #EEE;
border-radius: 2px;
margin-top: 5px;
}
#header ul li ul a {
color: #000;
}
#header ul > li:hover > ul {
display: block;
}
#header ul li ul li {
float: none;
margin: 0px;
margin-top: 15px;
margin-bottom: 15px;
}
#aside {
left: 0;
position: fixed;
width: 170px;
height: 100%;
top: 40px;
background-color: #323435;
border-top: 2px dotted #333;
}
#aside ul {
list-style: none;
padding-left: 10px;
}
#aside ul li {
margin-bottom: 15px;
}
#aside ul li a {
color: #ccc;
text-decoration: none;
}
#header a:hover, #aside a:hover{
color: #2295cc;
}
#main {
background-color: #f1f1f1;
width: 100%;
height: 100%;
position: relative;
top: 40px;
left: 170px;
}
.clear {
clear: both;
}
<body>
<div id="header">
<ul>
<li>Nazwa Strony</li>
<li>0 Komentarze do moderacji</li>
<li>Dodaj nowy
<ul>
<li>Post</li>
<li>Stronę</li>
<li>Media</li>
</ul>
</li>
<li>Usuń cały cache</li>
</ul>
</div>
<div class="clear"></div>
<div id="aside">
<ul>
<li>Deszbord</li>
<li>Posty</li>
<li>Strony</li>
<li>Media</li>
<li>Wygląd</li>
<li>Użytkownicy</li>
<li>Ustawienia</li>
</ul>
</div>
<div class="clear"></div>
<div id="main">
asdasdasd
</div>
</body>
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 making a drop down menu using only HTML and CSS. The menu components are successfully dropping down and everything looks good except when there are two or more components to an element. Then the second one covers the first. I was able to fix this by putting "position: absolute" in "#nav ul li:hover ul" (code below), but then the first item does not clear the menu bar.
Sorry for the terrible description.
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="CSS/index.css" />
<title>Index</title>
</head>
<body background="Images/Sun.jpg">
<div class="center" id="main">
<div class="center" id="header">
<br/><p>JOSEPH T. IOSUE</p><br/>
</div>
<div class="center" id="nav">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>PROJECTS
<ul>
<li>PYTHON</li>
<li>HTML/CSS</li>
</ul>
</li>
<li><a href="#" download>RESUME</a></li>
<li>CONTACT
<ul>
<li>joe.iosue#yahoo.com</li>
<li>301-980-9525</li>
</ul>
</li>
</ul>
</div>
<div style="background-color:white;clear:both;background-color:#00CCFF">
</div>
</div>
</body>
</html>
Here is the CSS
body {
background-size: 100%;
background-repeat: no-repeat;
}
#main {
background-color: #00CCFF;
width: 70%;
}
ul {
list-style: none;
}
#header {
width: 100%;
background-color: blue;
text-align: center;
}
#header p {
font-size: 3vw;
font-weight: bold;
}
#header * {
margin: 0px 0px 0px 0px;
}
#nav {
width: 100%;
}
#nav * {
margin: 0px 0px 0px 0px;
display: block;
float: left;
font-size: 1vw;
border: 0px 0px 0px 0px;
background-color: #00CCFF;
}
#nav a {
text-decoration: none;
background-color: #00CCFF;
padding: 1vw 3vw 1vw 3vw;
}
#nav ul li {
position: relative;
}
#nav ul li a {
color: white;
font-weight: bold;
}
#nav ul li ul {
display: none;
}
#nav ul li:hover ul {
display: block;
float: none;
clear: both;
}
#nav ul li:hover ul li a {
position: absolute;
background-color: #ff0000;
}
#nav ul li:hover ul li a:hover {
background-color: #ff6666;
}
.center {
margin: auto;
}
Please check the below code. I have slightly modified your css.
body {
background-size: 100%;
background-repeat: no-repeat;
}
#main {
background-color: #00CCFF;
width: 70%;
}
ul {
list-style: none;
}
#header {
width: 100%;
background-color: blue;
text-align: center;
}
#header p {
font-size: 3vw;
font-weight: bold;
}
#header * {
margin: 0px 0px 0px 0px;
}
#nav {
width: 100%;
}
#nav * {
margin: 0px 0px 0px 0px;
display: block;
float: left;
font-size: 1vw;
border: 0px 0px 0px 0px;
background-color: #00CCFF;
}
#nav a {
text-decoration: none;
background-color: #00CCFF;
padding: 1vw 3vw 1vw 3vw;
}
#nav ul li {
position: relative;
}
#nav ul li a {
color: white;
font-weight: bold;
}
#nav ul li ul {
display: none;
position: absolute;
top:100%;
left: 0;
padding: 0;
background-color: #ff0000;
}
#nav ul li:hover ul {
display: block;
}
#nav ul li ul li{
background: none;
float: none;
display: block;
}
#nav ul li ul li a {
display: block;
float: none;
background-color: #ff0000;
}
#nav ul li ul li a:hover {
background-color: #ff6666;
}
.center {
margin: auto;
}
<div class="center" id="main">
<div class="center" id="header">
<br/><p>JOSEPH T. IOSUE</p><br/>
</div>
<div class="center" id="nav">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>PROJECTS
<ul>
<li>PYTHON</li>
<li>HTML/CSS</li>
</ul>
</li>
<li><a href="#" download>RESUME</a></li>
<li>CONTACT
<ul>
<li>joe.iosue#yahoo.com</li>
<li>301-980-9525</li>
</ul>
</li>
</ul>
</div>
<div style="background-color:white;clear:both;background-color:#00CCFF">
</div>
</div>
pls replace your entire css with this one
body {
background-size: 100%;
background-repeat: no-repeat;
}
#main {
background-color: #00CCFF;
width: 70%;
}
ul {
list-style: none;
}
#header {
width: 100%;
background-color: blue;
text-align: center;
}
#header p {
font-size: 3vw;
font-weight: bold;
}
#header * {
margin: 0px 0px 0px 0px;
}
#nav {
width: 100%;
}
#nav * {
margin: 0px 0px 0px 0px;
display: block;
float: left;
font-size: 1vw;
border: 0px 0px 0px 0px;
background-color: #00CCFF;
}
#nav a {
text-decoration: none;
background-color: #00CCFF;
padding: 1vw 3vw 1vw 3vw;
}
#nav ul li {
position: relative;
}
#nav ul li a {
color: white;
font-weight: bold;
}
#nav ul li ul {
display: none;
position: absolute;
top: 100%;
padding: 0;
margin: 0;
}
#nav ul li:hover ul {
display: block;
float: none;
clear: both;
}
#nav ul li:hover ul li a {
background-color: #ff0000;
float: none;
}
#nav ul li:hover ul li a:hover {
background-color: #ff6666;
}
.center {
margin: auto;
}
#nav ul li li {
float: none;
}
The main dropdown trigger should be #main, the dropdown #nav and #header both have the MAIN PARENT #main. Set #main 'position: relative;' and set a height let's say 50px 'height: 50px;' THEN set #nav 'position: relative; top: 100%;' and the height of #header to 50px as #main.
#main { position: relative; height: 50px; }
#header, #nav { position: absolute; }
#header { width: 100%; height: 100%; top: 0; left: 0; }
#nav { top: 100%; left: 0; min-height: 100px; } /*set it to left or right 0*/
Now the dropdown should trigger on #main:hover #nav { display: block !important; }
Now you must style your dropdown as you want
Modify the below css :
#nav * {
display: inline-block;
font-size: 1vw;
margin: auto;
}
#nav ul li ul {
display: none;
padding: 0;
position: absolute;
}
#nav ul li ul li {
display: block;
}
#nav ul li:hover ul li a {
background-color: #ff0000;
display: block;
}
Complete code:
<!DOCTYPE HTML>
<html>
<head>
<title>Index</title>
<style>
body {
background-repeat: no-repeat;
background-size: 100% auto;
}
#main {
background-color: #00ccff;
width: 70%;
}
ul {
list-style: outside none none;
}
#header {
background-color: blue;
text-align: center;
width: 100%;
}
#header p {
font-size: 3vw;
font-weight: bold;
}
#header * {
margin: 0;
}
#nav {
width: 100%;
}
#nav * {
display: inline-block;
font-size: 1vw;
margin: auto;
}
#nav a {
background-color: #00ccff;
padding: 1vw 3vw;
text-decoration: none;
}
#nav ul li {
position: relative;
}
#nav ul li a {
color: white;
font-weight: bold;
}
#nav ul li ul {
display: none;
padding: 0;
position: absolute;
}
#nav ul li ul li {
display: block;
}
#nav ul li:hover ul {
clear: both;
display: block;
float: none;
}
#nav ul li:hover ul li a {
background-color: #ff0000;
display: block;
}
#nav ul li:hover ul li a:hover {
background-color: #ff6666;
}
.center {
margin: auto;
}
</style>
</head>
<body background="Images/Sun.jpg">
<div class="center" id="main">
<div class="center" id="header">
<br/><p>JOSEPH T. IOSUE</p><br/>
</div>
<div class="center" id="nav">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>PROJECTS
<ul>
<li>PYTHON</li>
<li>HTML/CSS</li>
</ul>
</li>
<li><a href="#" download>RESUME</a></li>
<li>CONTACT
<ul>
<li>joe.iosue#yahoo.com</li>
<li>301-980-9525</li>
</ul>
</li>
</ul>
</div>
<div style="background-color:white;clear:both;background-color:#00CCFF">
</div>
</div>
</body>
</html>
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
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/