i'm trying to make a hover animation that has an underline line appearing when the mouse is over it.
what can i add to achieve that? i tried the pre made ones but it didn't work. it showed an line appearing but not under the navbar text but under the website itself (on the bottom of the screen).
html,
body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 100px;
}
li {
padding: 40px 16px;
display: table-cell;
text-align: center;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
font-size: 17px;
letter-spacing: 2.5px;
}
li a:hover {
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.hover-nav {
background-color: tomato;
}
#logo {
margin-left: 30px;
margin-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mob-Mob</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<img src="img/logo.png" alt="" style="width: 139px;" id="logo">
<li style="float: right;" class="hover-nav">კონტაქტი</li>
<li style="float: right;">ჩვენს შესახებ</li>
<li style="float: right;">ქეისები</li>
</ul>
</nav>
</body>
</html>
Try this code, I marked my edits on your css code.
html,
body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 100px;
}
li {
padding: 40px 16px;
display: table-cell;
text-align: center;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
font-size: 17px;
letter-spacing: 2.5px;
}
li a:hover {
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
/*Edit starts here*/
li {
position:relative;
}
li::after {
content: '';
display: block;
width: 0;
position:absolute;
left:50%;
height: 2px;
background: #0077ff;
transition: cubic-bezier(.77,0,.18,1) 1s;
}
li:hover::after {
width: 80%;
left: 10%;
}
li {
transition: cubic-bezier(.77,0,.18,1) 1s;
}
li:hover {
background-color: tomato;
}
/*Edit ends here*/
#logo {
margin-left: 30px;
margin-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mob-Mob</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<img src="img/logo.png" alt="" style="width: 139px;" id="logo">
<li style="float: right;">კონტაქტი</li>
<li style="float: right;">ჩვენს შესახებ</li>
<li style="float: right;">ქეისები</li>
</ul>
</nav>
</body>
</html>
You should apply the transition to the element, not its hover state. With transition you are telling telling the element how to behave if anything changes. In this case all styles (that are susceptible to a transition) for a period of 0.3 seconds with an ease-in-out speed curve.
Then use the :hover selector to indicate what changes need to be made. So in this case change the background color and add an underline to the text.
Also avoid using inline styles when possible.
html, body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 100px;
}
li {
text-align: center;
float: right;
}
li a {
display: block;
color: white;
padding: 40px 16px;
text-decoration: none;
font-size: 17px;
letter-spacing: 2.5px;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
li a:hover {
background-color: tomato;
text-decoration: underline;
}
<nav>
<ul>
<li>კონტაქტი</li>
<li>ჩვენს შესახებ</li>
<li>ქეისები</li>
</ul>
</nav>
If you intended to apply an underline to the bottom of the box instead of the text you can use border-bottom and makes sure to use box-sizing: border box so your element will remain the same size when the border gets added.
html, body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 100px;
}
li {
text-align: center;
float: right;
}
li a {
display: block;
color: white;
padding: 40px 16px;
text-decoration: none;
font-size: 17px;
letter-spacing: 2.5px;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
box-sizing: border-box;
height: 100px;
}
li a:hover {
background-color: tomato;
border-bottom: 1px solid white;
}
<nav>
<ul>
<li>კონტაქტი</li>
<li>ჩვენს შესახებ</li>
<li>ქეისები</li>
</ul>
</nav>
Add text-decoration:underline to your li:hover code like this...
li a:hover {
text-decoration:underline;
}
HTML Code Invalid you added <a> section in <ul> without <li> tag
<ul>
<img src="img/logo.png" alt="" style="width: 139px;" id="logo">
<li style="float: right;" class="hover-nav">კონტაქტი</li>
<li style="float: right;">ჩვენს შესახებ</li>
<li style="float: right;">ქეისები</li>
</ul>
changes to
<ul>
<li><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></li>
<li style="float: right;" class="hover-nav">კონტაქტი</li>
<li style="float: right;">ჩვენს შესახებ</li>
<li style="float: right;">ქეისები</li>
</ul>
Edit in CSS:
ul {
width:100%;
display: flex;
align-items: center;
}
li {
width:100%; // remove padding and add to `li a`.
}
li a{
border-bottom:4px solid transparent;
height: 100px !important;
display: flex;
align-items: center;
justify-content: center;
}
li a:hover { // instead of .hover-nav
background-color: tomato;
border-bottom:4px solid #fff;
}
// remove #logo margin
Working Demo
html,
body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
background-color: #333;
height: 100px;
display: flex;
align-items: center;
}
li {
width:100%;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
font-size: 17px;
letter-spacing: 1.5px;
border-bottom:4px solid transparent;
height: 100px !important;
display: flex;
align-items: center;
justify-content: center;
}
li a:hover {
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
li a:hover {
background-color: tomato;
border-bottom:4px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mob-Mob</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><img src="https://dummyimage.com/100x100/52d41e/fff&text=Logo" alt="" style="width:100%;" id="logo"></li>
<li class="hover-nav">კონტაქტი</li>
<li>ჩვენს შესახებ</li>
<li>ქეისები</li>
</ul>
</nav>
</body>
</html>
Related
I am trying to create a smooth animation of my nav-bar in CSS here's my HTML Code-
<body>
<nav class="navbar">
<ul class="nav-list another">
<li><n>Engine</n></li>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
<li><button type="button" id="mysearch">More</button></li>
</ul>
</nav>
<hr>
</body>
</html>
Here's my CSS Code-
*{
margin: 0;
padding: 0;
}
html{
background-color: white;
background-image: url("img/ManHattanImage.webp");
}
li{
align-items: left;
width: 100px;
height: 100%;
display: inline-block;
margin-right: 170px;
font-size: 20px;
/* background-color: black; */
color: black;
font-size: 20px;
}
hr{
color: black;
margin-top: 30px;
}
n{
/* background-color: black; */
color: white;
font-size: 40px;
font-style: bold;
font-family: "Lucida Console", "Courier New", monospace;
margin-left: 20px;
margin-top: 30px;
}
a {
text-decoration: none;
color: white;
}
a:visited { text-decoration: none; }
a:hover {
text-decoration: none;
/* background-color: black; */
}
a:focus { text-decoration: none; }
a:hover, a:active { text-decoration: none; }
nav:hover{
height:300px;
}
I want a clean Animation like of a good dropdown menu navbar and with clear overlaps, Also I may add some more elements inside the navbar (With Further Updates)?
This is how to make a dropdown menu but I'm not sure how to do an animation. I hope this is what you meant by the dropdown menu.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #ac0d0d;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: rgb(18, 19, 85);
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #ac0d0d;}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown menu</button>
<div class="dropdown-content">
first
second
third
</div>
</div>
</body>
</html>
Animation Drop down menu on hover
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
nav {
width: 100%;
height: 80px;
background: #222;
}
ul {
text-align: center;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height: 80px;
padding: 0 20px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
</style>
<body>
<nav>
<ul>
<li class="drop">
You
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan</li>
<li>Account Settings</li>
<li>Switch Account</li>
<li>Sign Out</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</body>
</html>
I would like to know the way in which i can set this navbar just at the bottom of the page. I've been trying everything but it does not seems to be set at the bottom. I've tried with bottom, margin-bottom, i also dont know if there is a configuration i already set in my css that does not let these commands mentioned before to work.
HTML
<!doctype html>
{%load staticfiles%}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home</title>
<link rel="stylesheet" href="{%static 'index/css/index.css'%}">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/glacial-indifference" type="text/css"/>
<script src="https://kit.fontawesome.com/b525a42bf1.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="logo"><h2>MediTracker</h2></div>
<nav>
<div class="menu">
<ul class="clear">
<li><i class="fa fa-home"></i><span class="link-text">Home</span></li>
<li><i class="fa fa-question-circle"></i><span class="link-text">About</span></li>
<li><i class="fa fa-money-bill-alt"></i><span class="link-text">Pricing</span></li>
<li><i class="fa fa-tools"></i><span class="link-text">Services</span></li>
<li><i class="fa fa-phone"></i><span class="link-text">Contact Us</span></li>
</ul>
</div>
</nav>
</body>
</html>
CSS
body{
background-color: #333;
background-size: cover;
background-position: center;
font-family: 'GlacialIndifferenceRegular';
overflow: hidden;
font-weight: 600;
height: 85vh;
}
a{
text-decoration: none;
}
.clear:after{
content: "";
display: block;
clear:both;
}
nav .menu{
text-align: center;
margin-bottom:0px;
width: 100%;
}
nav .menu ul{
list-style: none;
display: inline-block;
}
nav .menu ul li{
float: left;
width: 150px;
height: 150px;
background-color: white;
transition: background-color 0.2s linear 0s;
}
nav .menu ul li a{
display: table;
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
nav .menu a i{
display: block;
vertical-align: middle;
color: #333;
font-size: 23px;
transform: all 0.2s linear 0s;
padding: 44px 0 10px;
}
nav .menu a i:before{
width: 41px;
display: inline-block;
height: 41px;
line-height: 37px;
transition: color 0.2s linear 0s,
font-size 0.2s linear 0s,
border-color 0.2s linear 0.2s,
height 0.2s linear 0s,
line-height 0.2s linear 0s;
}
nav .menu a .link-text{
right: 45px;
color: #333;
font-size: 14px;
text-transform: uppercase;
transition: all 0.2s linear 0s;
}
nav .menu ul li:hover{
background-color: #42d3e3;
}
nav .menu ul li:hover + li:last-child{
border-right-color: blue;
}
nav .menu ul li:hover .link-text{
opacity: 0;
}
nav .menu ul li:hover i{
color: #333;
font-size: 50px;
}
nav .menu ul li:hover i:before{
border-color: transparent;
border-radius: 500px;
line-height: 40px;
transition: color 0.2s linear 0s,
font-size 0.2s linear 0s,
border-color 0.2s linear 0.2s,
height 0.2s linear 0s,
line-height 0.2s linear 0s;
}
You can try position:fixed:
nav{
position:fixed;
bottom:0;
left:0;
width:100%;
}
You can set nav .menu as position: absolute; bottom:0;
nav .menu{
text-align: center;
margin-bottom:0px;
width: 100%;
position: absolute;
bottom:0;
}
JsFiddle https://jsfiddle.net/viethien/gxw0dacb/3/
In addition to margin-bottom: 0, try adding bottom: 0. The margin-bottom only creates no margin at the bottom of the element, but that doesn't make the element at the bottom of the user interface. The bottom: 0 property and value will make 0 space from the bottom to the element. That might've been confusing, but the code for the navbar should look like so:
nav .menu{
text-align: center;
margin-bottom: 0px;
bottom: 0;
width: 100%;
}
You can read more about the bottom property here.
I am having a ton of trouble. I am trying to create a drop down menu from 'about' and have not been able to center the menu correctly. It is always right of the menu. I believe it to have to do with the size of 'about'.
How can I fix this?
.nav-main {
position: absolute;
top: 0;
height: 65px;
width: 100%;
text-align: center;
}
.nav-main ul {
position: relative;
margin: 0 auto;
padding: 0;
list-style: none;
font-size: 22px;
line-height: 100%;
font-family: 'Futura W01 Bold', sans-serif;
text-align: center;
text-transform: uppercase;
display: inline-block;
width: 90%;
height: inherit;
}
.nav-top {
position: relative;
margin: 0;
padding: 0 66px 0 50px;
float: none;
display: inline-block;
list-style: none;
height: inherit;
background: transparent url(../images/nav-divide.png) no-repeat right center;
}
.nav-top:first-child {
padding-left: 0;
}
.nav-top:last-child {
background-image: none;
padding-right: 0;
}
.nav-top > a {
position: relative;
display: block;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top a:hover,
.nav-top.active a {
color: #454545;
border-bottom: 4px solid #00e9d9;
text-decoration: none;
}
.nav-top ul {
display: none;
position: absolute;
}
.nav-top:hover ul {
display: inline;
}
.nav-top li {
float: center;
background-color: #e9e9e9;
}
.nav-top li > a {
position: relative;
display: inline;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
<nav class="nav-main" role="navigation">
<ul>
<li class="nav-top">Welcome</li>
<li class="nav-top">About
<ul>
<li>Services</li>
<li>Clients</li>
<li>Press</li>
<li>Leadership</li>
<li>Twitter</li>
</ul>
</li>
<li class="nav-top">Contact</li>
</ul>
<span class="nav-arrow"></span>
</nav>
Andrews:
To solve you problem, you need to indicate the position of your nested list because you are setting it up as "position: absolute" without coordinates.
Add a "left value" to your UL CSS class in order to solve this issue:
.nav-top ul {
display: none;
position: absolute;
left: 0;
}
I am learning css and I have created a vertical menu, hovering the mouse over the first menu item shows the sub-menu across. But my problem is, as soon as I move the mouse to the sub-menu, it disappears. How can I make it so it stays there until I clicked one of the sub-menu items? Please help.
Already searched through a lot of examples but none similar to this. I'm new to css and I'm not sure if my approach is the correct for this menu setup requirement. Please enlighten.
#charset "utf-8";
.navLeft {
width: 25%;
margin-top: 0%;
top: auto;
display: inline;
list-style-type: none;
margin-left: 5%;
position: relative;
z-index: 0;
/* [disabled]clear: none; */
}
.navLeft ul li {
list-style-type: none;
width: 6em;
height: 2em;
/* [disabled]list-style-position: inside; */
color: #F14E23;
text-align: center;
background-color: #FFFFFF;
border: 0.5em solid #000000;
margin-bottom: -0.5em;
font-family: alfa-slab-one;
font-style: normal;
font-weight: 400;
padding-top: 2em;
top: auto;
vertical-align: middle;
padding-bottom: 2em;
-webkit-transition: all 0.1s linear 0s;
-o-transition: all 0.1s linear 0s;
transition: all 0.1s linear 0s;
position: relative;
margin-left: -0.5em;
}
.navLeft ul li:hover {
background-color: #F14E23;
color: #FFFFFF;
list-style-type: none;
position: relative;
}
.navLeft ul .about {
float: left;
-webkit-transition: all .1s linear 0s;
-o-transition: all .1s linear 0s;
transition: all .1s linear 0s;
}
.navLeft ul ul li
{
float: left;
}
.navLeft ul .projects {
clear: left;
}
.navLeft ul ul {
display: none;
}
.navLeft ul .about:hover ~ ul{
display: block;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>STORY</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<section class="mainMid">
<nav class="navLeft">
<ul>
<li class="about">ABOUT</li>
<ul>
<li class="navBeginning">BEGINNING</li>
<li class="navMnv">Mission<br>
<br>
Vision</li>
<li class="navPeople">People</li>
</ul>
<li class="projects">PROJECTS</li>
<li class="getinvolved">GET<br>
INVOLVED</li>
<li class="records">RECORDS</li>
<li class="donate">DONATE</li>
</ul>
</nav>
</section>
</body>
</html>
Refer this fiddle : http://jsfiddle.net/zt8ffu11/
html:
<section class="mainMid">
<nav class="navLeft">
<ul>
<li class="about">ABOUT
<ul>
<li class="navBeginning">BEGINNING</li>
<li class="navMnv">Mission<br>
<br>
Vision</li>
<li class="navPeople">People</li>
</ul>
</li>
<li class="projects">PROJECTS</li>
<li class="getinvolved">GET<br>
INVOLVED</li>
<li class="records">RECORDS</li>
<li class="donate">DONATE</li>
</ul>
</nav>
</section>
css:
.navLeft {
width: 25%;
margin-top: 0%;
top: auto;
display: inline;
list-style-type: none;
margin-left: 5%;
position: relative;
z-index: 0;
/* [disabled]clear: none; */
}
.navLeft ul li {
list-style-type: none;
width: 6em;
height: 2em;
/* [disabled]list-style-position: inside; */
color: #F14E23;
text-align: center;
background-color: #FFFFFF;
border: 0.5em solid #000000;
margin-bottom: -0.5em;
font-family: alfa-slab-one;
font-style: normal;
font-weight: 400;
padding-top: 2em;
top: auto;
vertical-align: middle;
padding-bottom: 2em;
-webkit-transition: all 0.1s linear 0s;
-o-transition: all 0.1s linear 0s;
transition: all 0.1s linear 0s;
position: relative;
margin-left: -0.5em;
}
.navLeft ul li:hover {
background-color: #F14E23;
color: #FFFFFF;
list-style-type: none;
position: relative;
}
.navLeft ul .about {
float: left;
-webkit-transition: all .1s linear 0s;
-o-transition: all .1s linear 0s;
transition: all .1s linear 0s;
}
.navLeft ul ul li
{
float: left;
}
.navLeft ul .projects {
clear: left;
}
.navLeft ul ul {
display: none;
}
.navLeft ul .about:hover ul{
display: block;
}
and for list structure check is question Proper way to make HTML nested list?
The issue I'm having is that when I add a margin to my hover over drop down navmenu it messes up all the content which was meant to drop down and clusters it all up nearly just above it. Although before adding a margin the navigation menu worked perfectly fine, and yes removing the margin fixes the issue but I need to add a margin.
Here is my CSS, let me know if you need the HTML also. (Note, I am doing this on Notepad++ as HTML >4<)
#navmenu a {
text-decleration: none;
display: block;
width: 124px;
height: 27px;
line-height: 25px;
background-color: ;
border: 1px solid #CCC;
border-radius: 5px;
font-family: Magneto;
font-size: 20px;
color: ffffff;
transition: ease-in all 400ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
margin: -40px;
}
#navmenucontainer {
margin: 15px;
margin-left: 10px;
width: 230px;
height: auto;
float: left;
}
Here is the Relevent HTML:
<div id="navmenucontainer">
<ul id="navmenu">
<li>
Menu
<ul>
<li>Education
</li>
<li>Hobbies
</li>
<li>Interests
</li>
</ul>
</li>
</ul>
</div>
demo - http://jsfiddle.net/victor_007/fajLeLsy/
it looks like you want to do something like this
don't give -margin for a
#navmenu a {
text-decleration: none;
display: block;
width: 124px;
height: 27px;
line-height: 25px;
background-color: ;
border: 1px solid #CCC;
border-radius: 5px;
font-family: Magneto;
font-size: 20px;
color: ffffff;
}
#navmenucontainer {
margin: 15px;
width: 230px;
height: auto;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li:hover ul {
opacity: 1;
visibility: visible;
}
ul li ul {
opacity: 0;
visibility: hidden;
transition: ease-in all 400ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
}
<div id="navmenucontainer">
<ul id="navmenu">
<li> Menu
<ul>
<li>Education
</li>
<li>Hobbies
</li>
<li>Interests
</li>
</ul>
</li>
</ul>
</div>