I'm trying to create a drop-down menu on mouseover using css.
But it seems to be incorrect.
I wanted to display the class .drop on mouseover on .menu.
Can someone help me to correct?
HTML-file:
<div id="navi">
<span class="menu"></span>
<nav class="drop">
<li>Home</li>
<li>Time</li>
<li>Contact</li>
</nav>
</div>
CSS-file:
.menu{
display:block;
width:80px;
height:80px;
background-image:url(../images/menu.svg);
background-size:cover;
background-position:center;
}
.menu:hover{
display:block;
width:80px;
height:80px;
background-image:url(../images/menu2.svg);
background-size:cover;
background-position:center;
}
.drop{
position:absolute;
background:#000;
margin:0;
padding:10px;
font-family: 'Exo 2', sans-serif;
color:#FFF;
visibility:hidden;
}
.menu:hover .drop{
position:absolute;
background:#000;
margin:0;
padding:10px;
font-family: 'Exo 2', sans-serif;
color:#FFF;
visibility:visible;
}
Try this
<div id="navi">
<span class="menu">dffdf</span>
<nav class="drop">
<li>Home</li>
<li>Time</li>
<li>Contact</li>
</nav>
</div>
.menu{
display:block;
width:80px;
height:80px;
background-image:url(../images/menu.svg);
background-size:cover;
background-position:center;
}
.menu:hover{
display:block;
width:80px;
height:80px;
background-image:url(../images/menu2.svg);
background-size:cover;
background-position:center;
}
.drop{
position:absolute;
background:#000;
margin:0;
padding:10px;
font-family: 'Exo 2', sans-serif;
color:#FFF;
visibility:hidden;
}
.menu:hover+.drop,.drop:hover{
/*_________^_________^___________*/
position:absolute;
background:#000;
margin:0;
padding:10px;
font-family: 'Exo 2', sans-serif;
color:#FFF;
visibility:visible;
}
FIDDLE
Related
html
<footer>
<div class="Footer_Container">
<div class="Footer_Rows">
<div class="span3" id="sspan1">
<h5>CONTACT</h5>
<ul>
<li>chris#pagemotion.com</li>
<li>(03) 013 3134114</li>
</ul>
</div><!--end of span-->
<div class="span3" id="sspan2">
<h5>FOLLOW</h5>
<ul>
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div><!--end of span-->
<div class="span3" id="sspan3">
<h5>VISIT</h5>
<ul>
<li>6700 N New York Ave Suite 233 Portland, OR 97203</li>
</ul>
</div><!--end of span-->
<div class="span3" id="sspan4">
<img src="Image/mylogo.png" class="mylogo">
<!-- <img src="Image/rdio-icon.png" class="sg"> -->
</div><!--end of span-->
</div><!--end of FooterRows-->
</div><!--end of FooterContainer-->
css
footer{
width:100%;
height:100%;
min-height:150px;
padding:30px 0 80px;
color:#fff;
font-size:14px;
line-height:1.6;
background:#222;
position:relative;
}
.Footer_Container{
max-width:1080px;
width:86%;
min-height:150px;
padding-right:10px;
padding-left:10px;
margin:0px auto;
/*box-sizing:border-box;*/
display:block;
background-color:red;
}
.Footer_Rows{
margin-right:-10px;
margin-left:-10px;
padding:25px;
overflow:auto;
/*margin:0px auto;*/
}
.span3{
width:16%;
position:relative;
padding-right:30px;
padding-left:30px;
min-height:1px;
float:left;
font-size:14px;
color:#fff;
font-family:"colfax-web";
background-color:blue;
}
.span3 h5{
margin:0 0 10px;
font-size:16px;
font-style:normal;
}
.span3 ul{
margin:0;
padding:0;
list-style:none;
}
.span3 ul li{
display:list-item;
/*text-align:-webkit-match-parent;*/
box-sizing:border-box;
}
.span3 ul li a{
font-size:14px;
font-family:"colfax-web";
color:#fff;
text-decoration:none;
-webkit-trasition:all .2s ease-in-out;
transition:all .s2 ease-in-out;
}
#sspan1{
margin-left:10px;
}
#sspan4{
margin-left:10px;
}
.mylogo{
width:150px;
height:100px;
}
please copy and paste i cant put link here , i want to make this responsive , which will be 2 box on top , 2 box on bottom . but i have no idea how to make it can any one show me how ?
so is like this:
A B
C D
thank ~
Are you looking for something like this?
http://jsfiddle.net/62uzV/
.span3{
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
footer {
width:100%;
height:100%;
min-height:150px;
padding:30px 0 80px;
color:#fff;
font-size:14px;
line-height:1.6;
background:#222;
position:relative;
}
.Footer_Container {
max-width:1080px;
width:86%;
min-height:150px;
padding-right:10px;
padding-left:10px;
margin:0px auto;
/*box-sizing:border-box;*/
display:block;
background-color:red;
}
.Footer_Rows {
margin-right:-10px;
margin-left:-10px;
padding:25px;
overflow:auto;
/*margin:0px auto;*/
}
.span3 {
width:50%;
padding-right:30px;
padding-left:30px;
min-height:1px;
float:left;
font-size:14px;
color:#fff;
font-family:"colfax-web";
background-color:blue;
}
.span3 h5 {
margin:0 0 10px;
font-size:16px;
font-style:normal;
}
.span3 ul {
margin:0;
padding:0;
list-style:none;
}
.span3 ul li {
display:list-item;
/*text-align:-webkit-match-parent;*/
box-sizing:border-box;
}
.span3 ul li a {
font-size:14px;
font-family:"colfax-web";
color:#fff;
text-decoration:none;
-webkit-trasition:all .2s ease-in-out;
transition:all .s2 ease-in-out;
}
.mylogo {
width:150px;
height:100px;
}
I am building a navigation bar. This is what the HTML looks like
<div class="navhead">TEXT</div>
<div class="navcontainer">
<div class="button">TEXT</div>
<div class="button">TEXT</div>
<div class="button">TEXT</div>
<div class="button">TEXT</div>
<div class="button">TEXT</div>
</div>
And this is what the CSS looks like.
body {
margin:0px;
padding:0px;
font-family:"futura";
margin-top:75px;
height:100%;
width:100%;
}
.navcontainer {
width:100%;
position:fixed;
background-color:#FFF;
height:60px;
top:24px;
border:solid;
color:#000;
border-top:none;
border-bottom:solid;
border-left:none;
border-right:none;
margin:0px;
padding:0px;
}
.button {
width:20%;
height:60px;
float:left;
background-color:#FFF;
color:#000;
text-align:center;
vertical-align:central;
line-height:60px;
transition:background-color 1.5s ease;
margin:0px;
padding:0px;
}
.button:hover {
width:20%;
height:60px;
float:left;
background-color:#000;
color:#FFF;
text-align:center;
vertical-align:central;
line-height:60px;
margin:0px;
padding:0px;
}
.navhead {
width:100%;
color:#FFF;
background-color:#000;
position:fixed;
top:0px;
height:24px;
text-align:center;
font-size:9px;
line-height:24px;
}
The problem I am having is that the last button to the right isn't flush with the browser window. I don't really know what I'm doing wrong. I added everything I thought I needed to the "body" class, but still there's space... I mean, there's no space on top of it, just to the right of the last button.
jsfiddle here
This is a better way to structure your HTML and a more reliable way to create that menu: http://codepen.io/pageaffairs/pen/xaGuq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
margin:0px;
padding:0px;
font-family:"futura";
margin-top:75px;
height:100%;
width:100%;
}
.navcontainer {
width:100%;
position:fixed;
background-color:#FFF;
top:24px;
border:solid;
color:#000;
border-top:none;
border-bottom:solid;
border-left:none;
border-right:none;
margin:0px;
padding:0px;
list-style: none;
display: table;
table-layout: fixed;
}
.navcontainer li {display: table-cell;}
.navcontainer li a {line-height: 60px;
background-color:#FFF;
color:#000;
text-align:center;
transition:background-color 1.5s ease;
display: block;
text-decoration: none;
}
.navcontainer li a:hover {
background-color:#000;
color:#FFF;
}
.navhead {
width:100%;
color:#FFF;
background-color:#000;
position:fixed;
top:0px;
height:24px;
text-align:center;
font-size:9px;
line-height:24px;
}
</style>
</head>
<body>
<div class="navhead">TEXT</div>
<ul class="navcontainer">
<li>
TEXT
</li>
<li>
TEXT
</li>
<li>
TEXT
</li>
<li>
TEXT
</li>
<li>
TEXT
</li>
</ul>
</body>
</html>
I have to div's that will not go next to each other. The menu on the left keeps going below and I can not bring it up. I have tried using "top:-..." but it will not work! Please help!
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Design At Ease - Home</title>
</head>
<body>
<div id="header">
<div id="logo"><a class="logoclass" href="index.html">DesignAtEase.com</a></div>
<ul id="headerlinks">
<li>Home</li>
<li>Coding</li>
<li>Graphics</li>
<li>Database</li>
<li>Support</li>
<li>More</li>
</ul>
</div>
<ul id="quicklinks">
<li>Quick Start</li>
<li>Tag Helper</li>
<li>HTML</li>
<li>CSS</li>
<li>Photoshop</li>
</ul>
<div id="wrapper">
<div id="midwrap"></div>
<a class="Resources">Resources</a>
<ul id="sidelinksleft">
<li>Quick Start</li>
<li>Tag Helper</li>
<li>News</li>
<li>Learn</li>
<li>Useful Sites</li>
</ul>
</div>
</body>
</html>
CSS:
html, body {height: 100%;}
* { height: 100%; }
body{
position:relative;
background:#fffffc;
margin: auto auto;
height:100%;
}
#header{
background:#e5e5e5;
height:35px;
width:100%;
border-bottom: 1px #c9c9c9 solid;
}
#headerlinks{
position:relative;
display:inline;
float:right;
margin-right:5%;
bottom:44px;
}
#headerlinks li{
display:inline;
padding-left:25px;
}
#headerlinks li a{
color:#777777;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}
#headerlinks li a:hover{
color:#a3a3a3;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}
#headerlinks li a:active{
color:#00B2EE;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}
#logo{
position:relative;
color:black;
margin-left:5%;
top:5px;
}
.logoclass{
color:#212121;
display:inline;
font-size:24px;
font-family: sans-serif;
text-decoration:none;
}
#quicklinks{
width:90%;
margin-left:auto;
margin-right:auto;;
height:25px;
background:#e5e5e5;
border-bottom: 1px #c9c9c9 solid;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
top:-66px;
position:relative;
clear: right;
}
#quicklinks li{
position:relative;
top:2px;
display:inline;
padding-right:20px;
}
#quicklinks li a{
color:#777777;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#quicklinks li a:hover{
color:#a3a3a3;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#quicklinks li a:active{
color:#00B2EE;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#wrapper{
position:relative;
top:-82px;
margin-right:4%;
margin-left:4%;
width:92%;
height:100%;
background:#fafafa;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
overflow:hidden;
}
#sidelinksleft{
margin-left:auto;
margin-right:auto;;
height:25px;
position:relative;
clear: right;
float:left;
margin-left:-25px;
top:15px;
}
#sidelinksleft li{
position:relative;
padding-top:3px;
list-style-type: none;
}
#sidelinksleft li a{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#82CFFD;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;
}
#sidelinksleft li a:hover{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#B0E2FF;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;
}
#sidelinksleft li a:active{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#82CFFD;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;
}
.Resources{
color:#000000;;
font-size:16px;
font-family: sans-serif;
position:relative;
margin-left:-156px;
}
#midwrap{
width:70%;
height:90%;
border-left: 1px solid black;
border-right: 1px solid black;
margin-left:300px;
background:black;
top:10px;
position:relative;
overflow: hidden;
}
And I have no more detail, but it is saying I need more so I am typing this random paragraph to make it so I can post my question.
Your left-margin (300px) and width of div(70%) is too much for your left nav to stay in place.
div by default is a block element and here in your case it occupies the whole space of the container, So float your div too as you float your left nav and remove clear from left nav to have it sit with the float as that appears before the div. and give clear:right on div.
So modified styles:
#midwrap {
width:70%;
height:90%;
border-left: 1px solid black;
border-right: 1px solid black;
margin-left:100px; /*Reducing this to 100px*/
background:black;
top:10px;
position:relative;
overflow: hidden;
float:right; /*float right*/
clear: right; /*add this here*/
}
#sidelinksleft {
margin-left:auto;
margin-right:auto;
float:left;
height:25px;
position:relative;
/*removed clear from here*/
float:left;
margin-left:-25px;
top:15px;
}
Demo
See the following HTML code:
<body>
<div id="header">
<div id="logo"><a class="logoclass" href="index.html">DesignAtEase.com</a></div>
<ul id="headerlinks">
<li>Home</li>
<li>Coding</li>
<li>Graphics</li>
<li>Database</li>
<li>Support</li>
<li>More</li>
</ul>
</div>
<ul id="quicklinks">
<li>Quick Start</li>
<li>Tag Helper</li>
<li>HTML</li>
<li>CSS</li>
<li>Photoshop</li>
</ul>
<div id="wrapper">
<div style="float:left;">
<a class="Resources">Resources</a>
<ul id="sidelinksleft">
<li>Quick Start</li>
<li>Tag Helper</li>
<li>News</li>
<li>Learn</li>
<li>Useful Sites</li>
</ul>
</div>
<div id="midwrap"></div>
<div style="clear: both;"></div>
</body>
I created a div holding the menu and used the float: left property.
I have a code here for a nav bar. When I hover over the links, a small arrow which is a png image should display below it in the center. The below code works fine in Firefox and Chrome but in IE, the arrow goes slightly below the div so only a part of it is seen. What's the issue?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
</head>
<body>
<div id="wrapper">
<div id="logo-wrapper">
<img src="logo.png" id="logo">
</div>
<div id="menu-wrapper">
<ul>
<li><a id="home" href="#" >Home</a></li>
<li><a href="#" >Work</a></li>
<li><a href="#" >Us</a></li>
<li><a href="#" >Contact</a></li>
</ul>
</div>
</div>
below is the CSS:
body,html{
border:0px;
padding:0px;
margin:0px;
}
#wrapper{
width:954px;
height:59px;
padding-top:0px;
padding-right:20px;
padding-bottom:0px;
padding-left:15px;
margin:0 auto;
border-style:none;
outline:none;
background-color:black;
position:relative;
}
#logo{
padding:0px;
margin:none;
outline:none;
height:59px;
}
#logo-wrapper{
width:223px;
float:left;
padding:0px;
margin:none;
}
#menu-wrapper{
padding:0px;
margin:none;
position:absolute;
bottom:6%;
right:30px;
}
ul{
width:200px;
position:relative;
left:0;
bottom:-5px;
list-style-type:none;
padding:0px;
margin:none;
}
li{
margin:0px;
padding:0px;
display:inline;
width:20%;
text-align:center;
}
#home{
margin:0px;
padding:none;
background: url('arrow.png') center 100% no-repeat;
}
#menu-wrapper a{
height:31px;
padding-bottom:16px;
text-decoration:none;
font-family:"arial";
font-weight:bold;
font-size:12px;
color:white;
margin-right:13px;
margin-bottom:0px;
border:none;
}
#menu-wrapper a:hover{
padding:none;
margin:0px;
outline:none;
border:none;
background: url('arrow.png') center 100% no-repeat;
}
#menu-wrapper a:active{
outline:none;
margin:0px;
border:none;
}
#menu-wrapper a:focus{
outline:none;
margin:0px;
border:none;
}
You could try to add a z-index to the arrow image.
Like this:
#logo{
padding:0px;
margin:none;
outline:none;
height:59px;
z-index: 9999;
}
Edit. z-index on all images inside #logo-wrapper
#menu-wrapper img{
z-index: 9999;
}
I am trying to vertically align the <a>'s inside my navigation divs, and it is for some reason not working. I've already checked that there are no other styles overriding my code, and several combinations of positioning.
<div id="logodiv">
<figure>
<img id="logo" src="/images/Capture2.jpg" alt="logo" />
</figure>
<nav id="flexbox">
<div class="menudiv"><a class="menua" href="gallery.html">Gallery</a></div>
<div class="menudiv"><a class="menua" href="events.html">Events</a></div>
<div class="menudiv"><a class="menua" href="default.html">Home</a></div>
<div class="menudiv"><a class="menua" href="membership.html">Info</a></div>
<div class="menudiv"><a class="menua" href="contactus.html">Contact</a></div>
</nav>
</div>
CSS
#logodiv {
width:100%;
height:100px;
position:relative;
display:block;
}
#flexbox{
background-color:#f5b00e;
float:right;
width:65%;
min-width:400px;
height:30px;
padding:0;
margin:0;
white-space:nowrap;
margin-bottom:0px;
position:absolute;
right:0px;
bottom:0px;
display:inline;
}
.menudiv{
width:20%;
height:100%;
line-height:100%;
display:inline;
float:left;
margin:0 auto;
padding:0;
vertical-align:middle;
position:relative;
}
.menua{
line-height:100%;
height:100%;
font-family: font, Arial, sans-serif;
font-size:15pt;
text-decoration:none;
text-shadow:none;
margin-top:10px;
vertical-align:bottom;
}
any help would be appreciated.
Check it http://jsfiddle.net/mKbLW/1/
Changed around some of your values. Had some unneeded css rules.
#logodiv {
width:100%;
height:100px;
position:relative;
display:block;
}
#flexbox{
background-color:#f5b00e;
float:right;
width:65%;
min-width:400px;
height:30px;
padding:0;
margin:0;
white-space:nowrap;
margin-bottom:0px;
position:absolute;
right:0px;
bottom:0px;
display:inline;
}
.menudiv{
width:20%;
height:100%;
float:left;
padding:0;
position:relative;
}
.menua {
height:100%;
line-height:30px;
display:inline;
font-family: font, Arial, sans-serif;
font-size:15pt;
text-decoration:none;
text-shadow:none;
margin-top:10px;
}