I have alignemet issues between caret and the vertical menu, please any help.. i tried float: , position .. nothing work with caret.
The caret should be at the top of the page.
How can I change the background of the caret like to be like lines similar to mobile application.
<style>
nav {
/* Repeating background image */
background: url(http://weebtutorials.com/wp-content/uploads/2012/11/a.png);
width:210px;
margin:20px;
}
nav ul {
/* Removes bullet points */
list-style:none;
margin:0;
padding:0;
}
nav ul li {
/* Any child positioned absolutely will be positioned relative to this */
position:relative;
}
nav a {
color:#e8e8e8;
padding:12px 0px;
/* Fill all available horizontal space */
display:block;
/* Remove underline */
text-decoration:none;
/*
New CSS3 animations:
apply transition to background property, taking 1s to change it
*/
transition:background 1s;
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
font-family:tahoma;
font-size:13px;
text-transform:uppercase;
padding-left:20px;
}
nav a:hover {
/*
RGBA background for t
background: RGBA(255,255,255,0.05);
color:#fff;
}
nav a:hover span {
background: #7d2c41;
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
nav ul li:hover ul {
display:block;
}
nav ul ul {
position:absolute;
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;
}
nav span {
width:12px;
height:12px;
background:#fff;
display:inline-block;
float:left;
margin-top:3px;
margin-right:20px;
position:relative;
transition:all 0.5s;
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
nav span:before {
content:"";
width:12px;
height:2px;
background:#3a3b3b;
position:absolute;
left:0px;
top:5px;
}
nav span:after {
content:"";
width:2px;
height:12px;
background:#3a3b3b;
position:absolute;
left:5px;
position:top;
}
.caret-right {
border-left: 20px solid transparent;
border-right:20px solid transparent;
border-top: 20px solid #fff;
margin-right: 160px;
margin-top: 0px"
position: top;
float:right;
display: inline-block;
}
</style>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<nav>
<ul>
<li class="current"><span></span> Home </li>
<li> <span></span>AI assisted backtesting
</li>
<li> <span></span>Best stocks to trade today </li>
<li> <span></span>Get free data </li>
</ul>
</nav>
<div class="btn-group cust-dropdown pull-right">
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>About us</li>
<li>Documentation
</li>
<li>Pricing</li>
<li>Contact us</li>
<li>Register</li>
</ul>
</div>
you have syntax error on margin top semicolon & quote mark and position value
this is your code
.caret-right {
border-left: 20px solid transparent;
border-right:20px solid transparent;
border-top: 20px solid #fff;
margin-right: 160px;
margin-top: 0px"
position: top;
float:right;
display: inline-block;
}
should be
.caret-right {
border-left: 20px solid transparent;
border-right:20px solid transparent;
border-top: 20px solid #fff;
margin-right: 160px;
margin-top: 0px;
position: absolute;
top: 0;
right: 0;
display: inline-block;
}
You can play with this and come up with a design that fits your site..
https://jsfiddle.net/Hastig/u00v1yer/
Hamburger positioned with absolute.
Icon within hamburger also positioned/centered with absolute.
Make sure hanmurger is within a container that has at least position:relative;
Control the 3 bars width by adjusting their margin.
.hamburglar {
position: absolute;
top: 0; right: 0;
display: flex;
align-items: center;
flex-direction: column;
width: 40px;
height: 40px;
background-color: black;
cursor: pointer;
}
.hamburglar-line {
display: flex;
flex: 1;
width: 90%;
margin: 6px 0;
background-color: hsla(0, 0%, 50%, 0.5);
}
.hamburglar-line:nth-child(2) {
margin: 0;
}
.hamburglar .fa {
position: absolute;
top: 50%; left: 50%;
transform: translateY(-50%) translateX(-50%);
font-size: 36px;
color: hsla(0, 0%, 80%, 0.7);
}
.hamburglar .hamburglar-line,
.hamburglar .fa { transition: all 0.2s linear; }
.hamburglar:hover .hamburglar-line { background-color: hsla(0, 0%, 50%, 1); }
.hamburglar:hover .fa { color: hsla(0, 0%, 80%, 1); }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="hamburglar">
<div class="hamburglar-line"></div>
<div class="hamburglar-line"></div>
<div class="hamburglar-line"></div>
<i class="fa fa-caret-down"></i>
</div>
To move the button to the top right, you can:
.cust-dropdown{
position:absolute;
top:10px;
right:10px;
}
And now to add the burger menu icon, your button would look like:
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown">
<i class="glyphicon glyphicon-menu-hamburger"></i>
</button>
Please make a working fiddle. Or you can try this,
.caret-right{
position: absolute;
right: 0;
top: 0;
}
Related
I have below CSS for a dropdown menu:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
top: 30px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
button, a {
border-bottom: 1px solid #e7e7e7;
border-radius: unset;
text-align: left;
display: inline-block;
width: 100%!important;
.icon {
margin-right: 15px;
top: 0.13em;
}
&:hover {
background-color: #e7e7e7 !important;
}
&:active {
background-color: #c7c7c7 !important;
}
}
}
.dropdown:hover .dropdown-content {
display: block;
}
And below markup:
<div class="dropdown">
<button class="material-icon-button">
<i class="icon icon-more_vert"></i>
</button>
<div class="dropdown-content" style="width: 295px;">
<button class="material-button">
<i class="icon icon-undo"></i>
<span>Button 1</span>
</button>
<button class="material-button">
<i class="icon icon-add_alert"></i>
Button 2
</button>
</div>
</div>
This works fine and shows menu on mouseover.
What I am trying to achieve is that, instead of mouseover, the dropdown is shown when the user actually clicks the button.
I have tried:
.dropdown:active .dropdown-content {
display: block;
}
But It doesn't seem to work, it show the menu on click but hides immediately.
I was wondering if this could be done without JavaScript and with pure css? if so, can someone please guide on this.
Thanks
There is a way to handle clicks with pure CSS.
It's not the best way (because that's not what CSS is made for) but it should work. Basically you'll have to use a checkbox with a label and style according to the state of the checkbox.
Here is an example: https://css-tricks.com/the-checkbox-hack/
try like below, hope it helps, comment if query
.c {
display: flex;
align-items: center;
justify-content: center;
height:100%;
width:100%;
}
.dd {
z-index:1;
position:relative;
display: inline-block;
}
.dd-a {
padding:10px;
background:white;
position:relative;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
}
.dd input:after {
content:"";
width:100%;
height:2px;
position:absolute;
display:block;
background:#C63D0F;
bottom:0;
left:0;
transform: scaleX(0);
transform-origin: bottom left;
transition-duration: 0.2s;
-webkit-transform: scaleX(0);
-webkit-transform-origin: bottom left;
-webkit-transition-duration: 0.2s;
}
.dd input {
top:0;
opacity:0;
display:block;
padding:0;
margin:0;
border:0;
position:absolute;
height:100%;
width:100%;
}
.dd input:hover {
cursor:pointer;
}
.dd input:hover ~ .dd-a {
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
}
.dd input:checked:after {
transform: scaleX(1);
-webkit-transform: scaleX(1);
}
.dd input:checked ~ .dd-c {
transform: scaleY(1);
-webkit-transform: scaleY(1);
}
.dd-a span {
color:#C63D0F;
}
.dd-c{
display:block;
position: absolute;
background:white;
height:auto;
transform: scaleY(0);
transform-origin: top left;
width: 100%;
}
.dd-c ul {
margin:0;
padding:0;
list-style-type: none;
}
.dd-c li {
margin-botom:5px;
word-break: keep-all;
white-space:nowrap;
display:block;
position:relative;
}
a {
display:block;
position:relative;
text-decoration: none;
padding:5px;
background:white;
color:#C63D0F;
}
a:before {
z-index:0;
content:"";
position:absolute;
display:block;
height:100%;
width:100%;
transform-origin:top left;
background:#C63D0F;
top:0;
left:0;
transform: scaleX(0);
-webkit-transform: scaleX(0);
}
a span {
display:block;
position:relative;
}
a:hover:before {
transform:scaleX(1);
-webkit-transform:scaleX(1);
}
a:hover span {
color:white;
}
<div class="c">
<div class="dd">
<div class="dd-a"><span>Dropdown menu</span></div>
<input type="checkbox">
<div class="dd-c">
<ul>
<li><span>Link</span></li>
<li><span>Link</span></li>
<li><span>Link</span></li>
</ul>
</div>
</div>
</div>
I made navbar where are menu and logo next to each other so what's problem ? well when I size my browser they go into each other. In my example logo have higher z-index so menu is unseen when I size in, I need solution to this problem
#navbar ul li .a1 {
position: fixed;
left:0;
padding-left:18px;
cursor: pointer;
color:rgb(252,227,0);
font-size:1.2rem;
text-decoration: none;
transition: .5s;
}
#navbar #logo img {
width:90px;
height:48px;
background: black;
position: absolute;
z-index: 1000;
left:6%;
padding-left:12px;
}
<div id="navbar">
<div id="logo">
<img src="https://i1.wp.com/obedparla.com/wp-content/uploads/2018/11/twenty-one-pilots-trench-logo.jpg?fit=1920%2C1080&ssl=1">
</div>
<ul>
<li>
<a href="#" class="a1">
<i class="fa fa-bars"></i>Menu
</a>
</li>
</ul>
</div>
use left:100px; instead of left:6%; it will works
#navbar ul li .a1 {
position: fixed;
left:0;
padding-left:18px;
cursor: pointer;
color:rgb(252,227,0);
font-size:1.2rem;
text-decoration: none;
transition: .5s;
}
li{
list-style-type: none;
}
#navbar #logo img {
width:90px;
height:48px;
background: black;
position: absolute;
z-index: 1000;
left:100px;
padding-left:12px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="navbar">
<div id="logo">
<img src="https://i1.wp.com/obedparla.com/wp-content/uploads/2018/11/twenty-one-pilots-trench-logo.jpg?fit=1920%2C1080&ssl=1">
</div>
<ul>
<li><i class="fa fa-bars"></i> Menu</li>
</ul>
</div>
Try this code
#navbar{
position: fixed;
width: 100%;
height: 100px; /*if not required dont give height*/
display:flex;
top: 0;
left: 0;
}
#navbar ul li .a1 {
padding-left:18px;
cursor: pointer;
color:rgb(252,227,0);
font-size:1.2rem;
text-decoration: none;
transition: .5s;
}
#navbar #logo img {
width:90px;
height:48px;
background: black;
}
I would like to remove the white gap between my navbar and header , i dont know why i got the gap . i hope someone can help me
#import url(http://fonts.googleapis.com/css?family=Lato);
.container
{
width:800px;
overflow:hidden;
display:inline-block;
margin-top: 0px;
}
.side-bar
{
background:#74AFAD;
position:absolute;
height:100%;
width:200px;
color:#fff;
transition: margin-left 0.5s;
}
.side-bar ul
{
list-style:none;
padding:0px;
}
.side-bar ul li.menu-head
{
font-family: 'Lato', sans-serif;
padding:20px;
}
.side-bar ul li.menu-head a
{
color:#fff;
text-decoration:none;
height:50px;
}
.side-bar ul .menu-head a
{
color:#fff;
text-decoration:none;
height:50px;
margin: 0;
}
.side-bar ul .menu li a
{
color:#fff;
text-decoration:none;
display:inline-table;
width:100%;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
}
.side-bar ul .menu li a:hover
{
border-left:3px solid #ECECEA;
padding-left:17px;
}
.side-bar ul .menu li a.active
{
padding-left:17px;
background:#D9853B;
border-left:3px solid #ECECEA;
}
.side-bar ul .menu li a.active:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 7px solid #D9853B;
margin-top: -10px;
margin-left: 180px;
}
.content
{
padding-left: 200px;
transition: padding-left 0.5s;
}
.active > .side-bar
{
margin-left:-150px;
transition: margin-left 0.5s;
}
.active > .content
{
padding-left:50px;
transition: padding-left 0.5s;
}
#logout_sidebar {
position: absolute;
display: inline-block;
bottom: 0;
width: 100%;
}
#media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
width:calc(100% + 220px);
}
.row-offcanvas-left
{
left: -220px;
}
.row-offcanvas-left.active {
left: 0;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
}
}
#sidebar {
width: inherit;
min-width: 220px;
max-width: 220px;
background-color:#f5f5f5;
float: left;
height:100%;
position:relative;
overflow-y:auto;
overflow-x:hidden;
}
#main {
height:100%;
overflow:auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/navbar.css">
<title> Bagus Gamestore Admin Dashboard</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="wrapper">
<div class="side-bar">
<ul>
<li class="menu-head">
ADMIN PANEL <span class="glyphicon glyphicon-align-justify pull-right"></span>
</li>
<div class="menu">
<li>
Dashboard <span class="glyphicon glyphicon-dashboard pull-right"></span>
</li>
<li>
User List<span class="glyphicon glyphicon-user pull-right"></span>
</li>
<li>
Add New Product<span class="glyphicon glyphicon-plus pull-right"></span>
</li>
<li>
Go to Website <span class="glyphicon glyphicon-globe pull-right"></span>
</li>
</div>
<div class="menu ">
<li id="logout_sidebar">
Logout<span class="glyphicon glyphicon-log-out pull-right"></span>
</li>
</div>
</ul>
</div>
<div class="content">
<!-- show user list -->
<!-- end of show user list-->
</div>
</div>
</div>
</div>
</body>
</html>
as you can see , theres a litle gap over the ADMIN PANEL , how do i remove those gap ? thank you before
You need to position the div .side-bar explicitly at the top of its parent using top: 0;. (Note this di is already positioned absolute)
.side-bar{
top: 0;
}
Snippet below
#import url(http://fonts.googleapis.com/css?family=Lato);
.container {
width: 800px;
overflow: hidden;
display: inline-block;
margin-top: 0px;
}
.side-bar {
background: #74AFAD;
position: absolute;
height: 100%;
width: 200px;
color: #fff;
transition: margin-left 0.5s;
}
.side-bar ul {
list-style: none;
padding: 0px;
}
.side-bar ul li.menu-head {
font-family: 'Lato', sans-serif;
padding: 20px;
}
.side-bar ul li.menu-head a {
color: #fff;
text-decoration: none;
height: 50px;
}
.side-bar ul .menu-head a {
color: #fff;
text-decoration: none;
height: 50px;
margin: 0;
}
.side-bar ul .menu li a {
color: #fff;
text-decoration: none;
display: inline-table;
width: 100%;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.side-bar ul .menu li a:hover {
border-left: 3px solid #ECECEA;
padding-left: 17px;
}
.side-bar ul .menu li a.active {
padding-left: 17px;
background: #D9853B;
border-left: 3px solid #ECECEA;
}
.side-bar ul .menu li a.active:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 7px solid #D9853B;
margin-top: -10px;
margin-left: 180px;
}
.content {
padding-left: 200px;
transition: padding-left 0.5s;
}
.active>.side-bar {
margin-left: -150px;
transition: margin-left 0.5s;
}
.active>.content {
padding-left: 50px;
transition: padding-left 0.5s;
}
#logout_sidebar {
position: absolute;
display: inline-block;
bottom: 0;
width: 100%;
}
#media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
width: calc(100% + 220px);
}
.row-offcanvas-left {
left: -220px;
}
.row-offcanvas-left.active {
left: 0;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
}
}
#sidebar {
width: inherit;
min-width: 220px;
max-width: 220px;
background-color: #f5f5f5;
float: left;
height: 100%;
position: relative;
overflow-y: auto;
overflow-x: hidden;
}
#main {
height: 100%;
overflow: auto;
}
.side-bar {
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/navbar.css">
<title> Bagus Gamestore Admin Dashboard</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="wrapper">
<div class="side-bar">
<ul>
<li class="menu-head">
ADMIN PANEL <span class="glyphicon glyphicon-align-justify pull-right"></span>
</li>
<div class="menu">
<li>
Dashboard <span class="glyphicon glyphicon-dashboard pull-right"></span>
</li>
<li>
User List<span class="glyphicon glyphicon-user pull-right"></span>
</li>
<li>
Add New Product<span class="glyphicon glyphicon-plus pull-right"></span>
</li>
<li>
Go to Website <span class="glyphicon glyphicon-globe pull-right"></span>
</li>
</div>
<div class="menu ">
<li id="logout_sidebar">
Logout<span class="glyphicon glyphicon-log-out pull-right"></span>
</li>
</div>
</ul>
</div>
<div class="content">
<!-- show user list -->
<!-- end of show user list-->
</div>
</div>
</div>
</div>
</body>
</html>
Applying
margin: 0px;
to your body and removing
display:inline-block;
from your container appears to
work, but that might not be what you want depending on what other elements you want on your page.
You know how to do this using CSS?
In my navbar I would like to see a transparent triangle to the active link.
If I create a PNG image with a transparent triangle and use it like this:
background: rgba (0,0,0,0.4) url (triangle.png) no-repeat bottom center;
this does not work properly because under my triangle shows the transparent rgba color rgba(0,0,0,0.4) ...
I would like to do this to make a nice effect when scrolling the page. It is possibile?
Demo
You can use the :before and :after pseudo elements to achieve this effect.
<nav>
<ul>
<li class="active">homepage</li>
<li>option2</li>
<li>option3</li>
</ul>
</nav>
nav {
position: fixed;
background-color: rgba(0,0,0,.7);
display: block;
width: 100%;
padding: 10px 0;
color: white;
font-size: 1.5em;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
float: left;
width: auto;
padding: 0 20px;
position: relative;
}
nav li:before,
nav li:after {
content: '';
position: absolute;
bottom: -35px;
left: 0;
right: 0;
height: 5px;
border: 10px transparent solid;
border-top-color: rgba(0,0,0,.7);
border-left-width: 0;
border-right-width: 0;
}
nav li:before {
right: 50%;
}
nav li:after {
left: 50%;
}
nav li.active:before {
border-right-width: 10px;
}
nav li.active:after {
border-left-width: 10px;
}
nav li:last-child:after { /* covers the bottom of the navigation bar all the way to the right */
right: -9999999px;
}
Another solution using links:
<nav>
<ul>
<li>homepage</li>
<li>option2</li>
<li>option3</li>
</ul>
</nav>
write css style for :active class
js. No jQuery and you even get the hover effect for free.
i think this will help you..
same concept but used differently for further reference refer here :
stackoverflow.com/questions/17327076/how-to-create-a-ul-with-a-triangle-for-the-active-row
Will post my solution. It's pretty complicated and though I don't know if there is other simpler way to make li>a nested elements be transparent for the background under ul. This solution uses :before/:after pseudo attributes.
I used this markup (how to avoid helper <i></i>?):
<header>
<ul class="clearfix">
<li><a class="active" href="">HOMEPAGE <i></i></a></li>
<li>CONTACT <i></i></li>
<li>GET OUT <i></i></li>
</ul>
</header>
and CSS:
header li a {
text-align: center;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
display: inline-block;
padding: 25px;
color: #FFF;
position: relative;
}
header li a:hover {
background: rgba(255, 255, 255, .2);
}
header li a i:after, header li a i:before {
content:'';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
display: none;
background: url(http://subtlepatterns.com/patterns/escheresque_ste.png);
background-attachment: fixed;
border-top: 15px solid rgba(0, 0, 0, .5);
}
header li a.active i:after, header li a.active i:before {
display: block;
}
header li a:hover i:after, header li a:hover i:before {
display: block;
border-top-color: rgba(255, 255, 255, .1);
}
header li a i:before {
margin-left: -15px;
border-right: 15px solid transparent;
}
header li a i:after {
border-left: 15px solid transparent;
}
Hopefully someone will get inspired one day.
Demo: http://jsfiddle.net/R9pKq/
<figure>
<div><div>
</figure>
css
figure{
width:400px;
height:320px;
background:skyblue url(http://img1.wikia.nocookie.net/__cb20140301204257/disney/images/4/49/Elsa-Anna.jpg);
border:4px solid rgba(0,0,0,.8);
margin:40px auto;
position:relative;
}
figure div{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:200px;
background:rgba(255,255,255,.1);
}
figure div:before{
content:'';
position:absolute;
width:0px;
height:0px;
left:50%;
top:-40px;
margin-left:-40px;
border-bottom:40px solid rgba(255,255,255,.1);
border-left:40px solid transparent;
border-right:40px solid transparent;
}
Demo
or if you want to apply it to a menu
<menu>
<li><a>Home</a></li>
<li><a>Work</a></li>
<li><a>Projects</a></li>
<li><a>Infos</a></li>
</menu>
css
menu{
margin-top:40px;
}
menu li{
float:left;
list-style:none;
position:relative;
}
menu li{
padding:20px; 40px;
}
menu li:hover:before{
content:'';
position:absolute;
width:0px;
height:0px;
left:50%;
top:-20px;
margin-left:-20px;
border-bottom:20px solid rgba(0,0,0,.8);
border-left:20px solid transparent;
border-right:20px solid transparent;
}
Demo with Hover
to use the active class jst change menu li:hover:before to menu li.active:before
When i hover over the navmenu it pushes other content down on the webpage. In addition, when you hover over the nav the font is no longer in white. I'm sorry I am new at programming and borrowed some of this code so it may be sloppy. Thanks
Here is my html:
<div class="nav">
<ul id="nav">
<li>Home</li>
<li>Shop Online</li>
<li>Online Rentals
<div>
<ul>
<li>Rent Now</li>
<b>Current Rental Customers</b>
<li>Rental Returns</li>
<li>Rental Repairs</li>
<li>Rental Exchanges</li>
</ul>
</div>
</li>
<li>Lessons
<div>
<ul>
<li>Private Lessons</li>
<li>Meet the Teachers</li>
<li>Request a Lesson</li>
</ul>
</div>
</li>
<li>Performing Arts Center
<div>
<ul>
<li>Musical Theater</li>
<li>Kindermusik</li>
<li>Recording Studio</li>
<li>Group Ensembles</li>
</ul>
</div>
</li>
<li>Repairs</li>
<li>My Account</li>
</ul>
</div>
Here is my css:
/* main menu styles */
#nav,#nav ul {
font-family: verdana;
list-style: none;
margin: 0;
padding: 0;
position: fixed;
}
#nav {
height: 50px;
left: 0;
overflow: hidden;
top: 0;
position: relative;
}
#nav li {
float:left;
position:relative;
z-index:10;
}
#nav li a {
background-repeat: no-repeat;
background-position: center top;
color: #fff;
display: inline;
float: left;
font-size: 14px;
height: 51px;
line-height: 40px;
padding: 0 10px;
position: relative;
text-decoration: none;
z-index: 20;
background-color: #005E20;
}
#nav li:first-child a {
background:url(file:///Macintosh%20HD/Users/davidscott/Downloads/example91/images/bg-menu.png) no-repeat left top;
padding-left:35px;
}
#nav li ul li:first-child a {
background-image:none;
padding-left:10px;
}
#nav li.pad {
background: url(file:///Macintosh%20HD/Users/davidscott/Downloads/example91/images/bg- menu.png) no-repeat right top;
display: inline;
height: 51px;
width: 35px;
}
#nav ul {
background-color: #FFFFFF;
height: auto;
padding: 10px 0;
position: absolute;
top: -115px;
width: 180px;
z-index: 1;
border-radius: 8px; /*some css3*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
transition: 0.8s ease-in-out;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
color: #005E20;
}
#nav ul li {
width:180px;
}
#nav ul li a {
background:transparent;
height:20px;
line-height:20px;
width:160px;
}
#nav:hover {
height:200px;
}
#nav li:hover ul {
-moz-transform:translate(0,161px); /*some css3*/
-o-transform:translate(0,161px);
-webkit-transform:translate(0,161px);
}
#nav a:hover,#nav li:hover > a {
color:#99ff33;
}
This changes the height of the nav on hover (pushing the rest of the page down):
#nav:hover {
height:200px;
}
This changes the color to green on hover:
#nav a:hover, #nav li:hover > a {
color:#99ff33;
}
Here's a rudimentary example without those hover definitions:
http://jsfiddle.net/w4uyX/
It's all in your CSS code (which seems a bit unorganized to me).
To deal with the menu pushing other content down, please find the selector #nav:hover where a larger height is set.
Then find the selector #nav a:hover,#nav li:hover > a. There is the setting for the different color, when you hover over the menu.
see my navbar and see the difference
http://codepen.io/leandroruel/pen/yrwKI