Why is the CSS animation not working

Why is the CSS animation not working - html

The animation is supposed to swing back and forth. But I can't figure out why it is not. Here is the code look at the website http://codepen.io/anon/pen/tasJE. That is that it is supposed to look like
CSS
#menu {
position: relative;
right: 30px;
float: right;
padding: 0 20px;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
background: #ccc;
}
#menu, #menu ul {
list-style: none;
}
#menu > li {
float: left;
position: relative;
border-right: 1px solid rgba(0,0,0,.1);
box-shadow: 1px 0 0 rgba(255,255,255,.25);
perspective: 1000px;
}
#menu > li:first-child {
border-left: 1px solid rgba(255,255,255,.25);
box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
}
#menu a {
display: block;
position: relative;
z-index: 10;
padding: 13px 20px 13px 20px;
text-decoration: none;
color: rgba(75,75,75,1);
line-height: 1;
font-weight: 600;
font-size: 12px;
letter-spacing: -.05em;
background: transparent;
text-shadow: 0 1px 1px rgba(255,255,255,.9);
transition: all .25s ease-in-out;
}
#menu > li:hover > a {
background: #333;
color: rgba(0,223,252,1);
text-shadow: none;
}
#menu li ul {
position: absolute;
left: 0;
z-index: 1;
width: 71px;
padding: 0;
opacity: 0;
visibility: hidden;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: transparent;
overflow: hidden;
transform-origin: 50% 0%;
}
#menu li:hover ul {
padding: 0px 0;
background: #333;
opacity: 1;
visibility: visible;
box-shadow: 1px 1px 7px rgba(0,0,0,.5);
animation-name: swingdown;
animation-duration: 1s;
animation-timing-function: ease;
}
#keyframes swingdown {
0% {
opacity: .99999;
transform: rotateX(90deg);
}
30% {
transform: rotateX(-20deg) rotateY(5deg);
animation-timing-function: ease-in-out;
}
65% {
transform: rotateX(20deg) rotateY(-3deg);
animation-timing-function: ease-in-out;
}
100% {
transform: rotateX(0);
animation-timing-function: ease-in-out;
}
}
#menu li li a {
padding-left: 15px;
font-weight: 200;
color: #ddd;
text-shadow: none;
border-top: dotted 1px transparent;
border-bottom: dotted 1px transparent;
transition: all .15s linear;
}
#menu li li a:hover {
color: rgba(0,223,252,1);
border-top: dotted 1px rgba(255,255,255,.15);
border-bottom: dotted 1px rgba(255,255,255,.15);
background: rgba(0,223,252,.02);
}
HTML
<ul id="menu">
<li>More
<ul>
<li>Home</li>
<li>Facts</li>
<li>Tour</li>
<li>Author</li>
</ul>
</ul>
And here is the jfiddle
http://jsfiddle.net/jspence29/CVnf4/

This is an extension to the comments above.
JSFiddle allows you to load external JavaScript files, via the panel to the left.
That's where I loaded -prefix-free into.
Here's a screenshot:

Related

How can the menu center right (СSS)

I want the menu to be in the center of the page in the browser. I add my CSS file in question. I kind of wrote everything correctly, you can help me fix the error. The table is centered and I want the menu too. I want the menu to be in the center of the page in the browser. I add my CSS file in question. I kind of wrote everything correctly, you can help me fix the error. The table is centered and I want the menu too.
My CSS file
html, body {
background: black;
font: 100% helvetica, arial, sans-serif;
margin: 0;
padding: 0;
}
#container {
margin: 40px auto;
width: 800px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#header {
border-bottom: 1px solid white;
margin: 0 0 20px;
overflow: hidden;
padding: 0 0 10px;
}
a {
color: white;
background: red;
font-weight: bold;
text-decoration: none;
-moz-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
a:hover {
color: white;
}
/*============================*/
/* Main Navigation
/*============================*/
#nav {
height: 50px;
line-height: 50px;
width: 100%;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
background: white;
background-image: -o-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -moz-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -ms-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #222222),color-stop(1, #555555));
background-image: linear-gradient(bottom, #222222 0%, #555555 100%);
float: left;
position: relative;
width: 20%;
}
#nav li:first-child, #nav li:first-child a {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
#nav li:last-child, #nav li:last-child a {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
#nav a {
border-right: 1px solid red;
border-left: 1px solid red;
color: white;
display: block;
font-size: 14px;
height: 50px;
overflow: hidden;
text-align: center;
text-shadow: 0 -1px 0 red;
-webkit-box-shadow: inset 0 0 10px transparent;
-moz-box-shadow: inset 0 0 10px transparent;
}
#nav a:after {
background: rgba(255,255,255,.07);
content: "";
height: 25px;
left: 0;
position: absolute;
width: 100%;
}
#nav li:hover > a {
background: black;
border-left-color: #222;
color: white;
text-shadow: 0 1px 0 #000;
-webkit-box-shadow: inset 0 0 10px #111;
-moz-box-shadow: inset 0 0 10px #111;
box-shadow: inset 0 0 10px #111;
}
#nav span {
position: relative;
}
#nav a:active span {
color: red;
position: relative;
top: 1px;
}
#nav li:first-child a {
border-left: none;
}
#nav li:last-child a {
border-right: none;
}
.dropdown > a span:after {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #ccc;
content: "";
right: -13px;
position: absolute;
top: 3px;
}
.dropdown:hover > a span:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content: "";
right: -15px;
position: absolute;
top: 6px;
}
/*============================*/
/* Sub Navigation
/*============================*/
#nav ul ul {
opacity: 0;
position: absolute;
top: 50px;
visibility: hidden;
width: 0;
-moz-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#nav ul li:hover ul {
opacity: 1;
visibility: visible;
width: 100%;
}
#nav ul ul li {
background: white;
float: none;
line-height: 0;
width: 100%;
}
#nav ul ul li:nth-child(odd) {
background: white;
}
#nav ul ul li:first-child, #nav ul ul li:first-child a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#nav ul ul li:last-child, #nav ul ul li:last-child a {
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
#nav ul ul li a {
border-right: none;
border-left: none;
border-top: 1px solid white;
color: #555;
font-size: 12px;
height: 36px;
line-height: 36px;
padding: 0 0 0 15px;
text-align: left;
text-shadow: 0 -1px 0 #eee;
}
#nav ul li ul li a:after {
background: rgba(0,0,0,.02);
content: "";
height: 18px;
left: 0;
position: absolute;
top: 19px;
width: 100%;
}
#nav ul ul li a:hover {
background: white;
color: #111;
text-shadow: 0 1px 0 #fff;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav ul ul a:active span {
color: white;
position: relative;
top: 1px;
}
.login-form {
position:absolute;
width:200px;
height:150px;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
<div id="container">
<div id="header">
</div>
<div id="nav">
<ul>
<li><span>Главная</span></li>
<li class="dropdown"><span>Студенты</span>
<ul>
<li><span>Список студентов</span></li>
<sec:authorize access="hasRole('ADMIN') || hasRole('USER')">
<li><span>Добавить студента</span></li>
</sec:authorize>
</ul>
</li>
<sec:authorize access="!isAuthenticated()">
<li class="dropdown"><span>Войти</span>
</li>
</sec:authorize>
<sec:authorize access="!isAuthenticated()">
<li><span>Выйти</span></li>
</sec:authorize>
</ul>
</div>
</div>

html, body {
background: black;
font: 100% helvetica, arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container {
margin: 40px auto;
width: 800px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#header {
border-bottom: 1px solid white;
margin: 0 0 20px;
overflow: hidden;
padding: 0 0 10px;
}
a {
color: white;
background: red;
font-weight: bold;
text-decoration: none;
-moz-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
a:hover {
color: white;
}
/*============================*/
/* Main Navigation
/*============================*/
#nav {
height: 50px;
line-height: 50px;
width: 100%;
text-align: center;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
}
#nav li {
background: white;
background-image: -o-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -moz-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -ms-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #222222),color-stop(1, #555555));
background-image: linear-gradient(bottom, #222222 0%, #555555 100%);
float: left;
position: relative;
/* width: 20%; */
}
#nav li:first-child, #nav li:first-child a {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
#nav li:last-child, #nav li:last-child a {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
#nav a {
border-right: 1px solid red;
border-left: 1px solid red;
color: white;
display: block;
font-size: 14px;
height: 50px;
overflow: hidden;
text-align: center;
text-shadow: 0 -1px 0 red;
-webkit-box-shadow: inset 0 0 10px transparent;
-moz-box-shadow: inset 0 0 10px transparent;
padding: 0 60px;
}
#nav a:after {
background: rgba(255,255,255,.07);
content: "";
height: 25px;
left: 0;
position: absolute;
width: 100%;
}
#nav li:hover > a {
background: black;
border-left-color: #222;
color: white;
text-shadow: 0 1px 0 #000;
-webkit-box-shadow: inset 0 0 10px #111;
-moz-box-shadow: inset 0 0 10px #111;
box-shadow: inset 0 0 10px #111;
}
#nav span {
position: relative;
}
#nav a:active span {
color: red;
position: relative;
top: 1px;
}
#nav li:first-child a {
border-left: none;
}
#nav li:last-child a {
border-right: none;
}
.dropdown > a span:after {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #ccc;
content: "";
right: -13px;
position: absolute;
top: 3px;
}
.dropdown:hover > a span:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content: "";
right: -15px;
position: absolute;
top: 6px;
}
/*============================*/
/* Sub Navigation
/*============================*/
#nav ul ul {
opacity: 0;
position: absolute;
top: 50px;
visibility: hidden;
width: 0;
-moz-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
#nav ul li:hover ul {
opacity: 1;
visibility: visible;
width: 100%;
}
#nav ul ul li {
background: white;
float: none;
line-height: 0;
width: 100%;
}
#nav ul ul li:nth-child(odd) {
background: white;
}
#nav ul ul li:first-child, #nav ul ul li:first-child a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#nav ul ul li:last-child, #nav ul ul li:last-child a {
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
#nav ul ul li a {
border-right: none;
border-left: none;
border-top: 1px solid white;
color: #555;
font-size: 12px;
height: 36px;
line-height: 36px;
padding: 0 0 0 15px;
text-align: left;
text-shadow: 0 -1px 0 #eee;
}
#nav ul li ul li a:after {
background: rgba(0,0,0,.02);
content: "";
height: 18px;
left: 0;
position: absolute;
top: 19px;
width: 100%;
}
#nav ul ul li a:hover {
background: white;
color: #111;
text-shadow: 0 1px 0 #fff;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav ul ul a:active span {
color: white;
position: relative;
top: 1px;
}
.login-form {
position:absolute;
width:200px;
height:150px;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
<div id="container">
<div id="header">
</div>
<div id="nav">
<ul>
<li><span>Главная</span></li>
<li class="dropdown"><span>Студенты</span>
<ul>
<li><span>Список студентов</span></li>
<sec:authorize access="hasRole('ADMIN') || hasRole('USER')">
<li><span>Добавить студента</span></li>
</sec:authorize>
</ul>
</li>
<sec:authorize access="!isAuthenticated()">
<li class="dropdown"><span>Войти</span>
</li>
</sec:authorize>
<sec:authorize access="!isAuthenticated()">
<li><span>Выйти</span></li>
</sec:authorize>
</ul>
</div>
</div>

Please change the following two class:-
#container {
width: 100%; //Change width to 100%
height: 100vh; //Add height 100vh
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#nav {
height: 50px;
line-height: 50px;
width: 80%; // Change width to 80%
margin: 0 auto; // Add margin 0 auto
}

you can use margin to #nav tag, just add the following code in your css.
#nav
{ margin-left:11%;}

Add the below lines in your code. This will help you:
#nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
#nav li {
background: white;
background-image: -o-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -moz-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -ms-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #222222),color-stop(1, #555555));
background-image: linear-gradient(bottom, #222222 0%, #555555 100%);
position: relative;
width: 20%;
display: inline-block;
}

How to make this box to a triangle in css [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
please check out this code pen link
want to make the square beside home to triangle upside down. when i hover - its working correctly
https://codepen.io/shaswat/pen/gXLBwo
please help me to make that square to triangle .creating a navigation bar
after I hover its working correctly by transforming to upside
/* Menu CSS */#cssmenu,
#cssmenu > ul {
background: black;
padding-bottom: 3px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: "";
display: table;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu > ul {
background: blue;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li {
float: left;
position: relative;
}
#cssmenu > ul > li > a {
padding: 15px 25px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
#cssmenu > ul > li:hover > a {
background: red;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li > a.active {
background: grey;
}
/* Childs */
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 50px;
background: green;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu > ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 50px;
left: 0;
}
#cssmenu > ul ul:before {
content: "";
position: absolute;
top: -10px;
width: 100%;
height: 18px;
background: transparent;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a {
padding: 15px 26px;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.50s ease-in-out;
-moz-transition: all 0.50s ease-in-out;
-ms-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;
}
#cssmenu > ul ul li a:hover {
border-left: 10px solid #d64e34;
background: grey;
}
#cssmenu > ul ul li a:active {
background: green;
}
#cssmenu li a:first-child:nth-last-child(2):before {
content:"";
position: absolute;
height: 0;
width: 0;
border: 8px solid orange;
top: 40%;
right: 5px;
}
#cssmenu li:hover > a:first-child:nth-last-child(2):before {
border: 8px solid transparent;
border-bottom-color: orange;
margin-top: -5px;
}
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a>
<ul>
<li><a href='#'>Product 1</a></li>
<li><a href='#'>Product 2</a></li>
<li><a href='#'>Product 3</a></li>
</ul>
</li>
<li><a class='active' href='#'>Products</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>

On the line 119 replace orange with transparent. And add border-top-color: orange;. If you make border-bottom-color instead of border-top-color arrow will be reversed.
border: 8px solid transparent;
border-top-color: orange;

Change the code of #cssmenu li a:first-child:nth-last-child(2):before like this :
#cssmenu li a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
height: 0;
width: 0;
border: 8px solid transparent;
border-top-color: orange;
top: 40%;
right: 5px;
}
the full code :
/* Menu CSS */
#cssmenu,
#cssmenu>ul {
background: black;
padding-bottom: 3px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu>ul:before,
#cssmenu>ul:after {
content: "";
display: table;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu>ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu>ul {
background: blue;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu>ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu>ul>li {
float: left;
position: relative;
}
#cssmenu>ul>li>a {
padding: 15px 25px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
#cssmenu>ul>li:hover>a {
background: red;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu>ul>li.active>a,
#cssmenu>ul>li>a.active {
background: grey;
}
/* Childs */
#cssmenu>ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 50px;
background: green;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu>ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 50px;
left: 0;
}
#cssmenu>ul ul:before {
content: "";
position: absolute;
top: -10px;
width: 100%;
height: 18px;
background: transparent;
}
#cssmenu>ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu>ul ul li a {
padding: 15px 26px;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.50s ease-in-out;
-moz-transition: all 0.50s ease-in-out;
-ms-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;
}
#cssmenu>ul ul li a:hover {
border-left: 10px solid #d64e34;
background: grey;
}
#cssmenu>ul ul li a:active {
background: green;
}
#cssmenu li a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
height: 0;
width: 0;
border: 8px solid transparent;
border-top-color: orange;
top: 40%;
right: 5px;
}
#cssmenu li:hover>a:first-child:nth-last-child(2):before {
border: 8px solid transparent;
border-bottom-color: orange;
margin-top: -5px;
}
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a>
<ul>
<li><a href='#'>Product 1</a></li>
<li><a href='#'>Product 2</a></li>
<li><a href='#'>Product 3</a></li>
</ul>
</li>
<li><a class='active' href='#'>Products</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>

Instead of having #cssmenu li a:first-child:nth-last-child(2):before have border: 8px solid orange; replace it with border: 8px solid transparent; and border-top-color: orange;. This will give you a down arrow and when you hover it will turn into an up arrow.

As an alternative, you could use a font. Replace the last two rules with this:
#cssmenu>ul>li>a::after {
content: "⏷";
position: absolute;
line-height: .5;
font-size: 24px;
transform: rotate(0deg) translateY(0);
margin-left: 5px;
color:orange;
transition:.5s ease;
}
#cssmenu>ul>li:hover>a::after {
transform:rotate(180deg) translate(5px,-5px);
transform-origin:center;
transition:.5s ease;
}
Demo
/* Menu CSS */
#cssmenu,
#cssmenu>ul {
background: black;
padding-bottom: 3px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu>ul:before,
#cssmenu>ul:after {
content: "";
display: table;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu>ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu>ul {
background: blue;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu>ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu>ul>li {
float: left;
position: relative;
}
#cssmenu>ul>li>a {
padding: 15px 25px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
#cssmenu>ul>li:hover>a {
background: red;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu>ul>li.active>a,
#cssmenu>ul>li>a.active {
background: grey;
}
/* Childs */
#cssmenu>ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 50px;
background: green;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu>ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 50px;
left: 0;
}
#cssmenu>ul ul:before {
content: "";
position: absolute;
top: -10px;
width: 100%;
height: 18px;
background: transparent;
}
#cssmenu>ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu>ul ul li a {
padding: 15px 26px;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.50s ease-in-out;
-moz-transition: all 0.50s ease-in-out;
-ms-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;
}
#cssmenu>ul ul li a:hover {
border-left: 10px solid #d64e34;
background: grey;
}
#cssmenu>ul ul li a:active {
background: green;
}
#cssmenu>ul>li:first-of-type>a::after {
content: "⏷";
position: absolute;
line-height: .5;
font-size: 24px;
transform: rotate(0deg) translate(-5px,0);
margin-left: 5px;
color:orange;
transition:.5s ease;
}
#cssmenu>ul>li:first-of-type:hover>a::after {
transform:rotate(180deg) translate(5px,-5px);
transform-origin:center;
transition:.5s ease;
}
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a>
<ul>
<li><a href='#'>Product 1</a></li>
<li><a href='#'>Product 2</a></li>
<li><a href='#'>Product 3</a></li>
</ul>
</li>
<li><a class='active' href='#'>Products</a>
</li>
<li><a href='#'>About</a>
</li>
<li><a href='#'>Contact</a></li>
</ul>
</div>

just change this styles
#cssmenu li a:first-child:nth-last-child(2):before {
content:"";
position: absolute;
height:0;
width: 0;
border-top: 8px solid orange;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
top: 40% ;
right:5px;
}

html menu change drop down text color only

I'm trying to change the color of the text on only the part of the menu that drops down. My problem when changing the font color is it changes the font color for the whole menu rather than just the drop down part of the navigation.
i apologize in advance its been years since i worked with html and i'm very rusty.
example here
The code here:
<div style="text-align: left;">
<style>
#homelink {
background-image: url(http://i946.photobucket.com/albums/ad301/campbellmichelle41109/sims3_logo_ver931034_zpsmnyi2tcj.png);
background-repeat: no-repeat;
background-color: transparent;
display: block;
width: 126px;
height: 140px;
}
#homelink {
position: relative;
padding: 0;
margin: -97px;
}
#mbt-menu, #mbt-menu ul {
margin: -15px;
padding: 17px;
list-style: none;
}
#mbt-menu {
width: 100%;
margin: 0px auto;
javascript:void(0)
background-image: url("http://i946.photobucket.com/albums/ad301/campbellmichelle41109/navbg1.1_zps86kuvvkj.png") repeat-x;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
#mbt-menu:before,
#mbt-menu:after {
content: "";
display: table;
}
#mbt-menu:after {
clear: both;
}
#mbt-menu {
zoom:1;
}
#mbt-menu li {
float: left;
border-right: 1px solid #328ad4;
-moz-box-shadow: 1px 0 0 #469ee8;
-webkit-box-shadow: 1px 0 0 #469ee8;
box-shadow: 1px 0 0 #469ee8;
position: relative;
}
#mbt-menu a {
float: left;
padding: 10px 25px;
color: #FFFFFF;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#mbt-menu li:hover > a {
color: #FFFFFF;
}
*html #mbt-menu li a:hover { /* IE6 only */
color: #000000;
}
#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opaciaty: 0;
visibility: hidden;
position: absolute;
top: 46px;
left: 0;
z-index: 9999;
background: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mbt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#mbt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #227ac4, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #227ac4, 0 2px 0 #666;
box-shadow: 0 1px 0 #227ac4, 0 2px 0 #666;
}
#mbt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#mbt-menu ul a {
padding: 7px;
width: 130px;
_height: 9px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mbt-menu ul a{
font-size: 12px;
font-color: #000000;
}
#mbt-menu ul a:hover {
background-color: #ffffff;
}
#mbt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#mbt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #469ee8;
}
#mbt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#mbt-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#mbt-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#mbt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<div align=center>
<ul id="mbt-menu">
<li><a id=homelink href="http://sims3addictresource.blogspot.com/"></a></li>
<li>
Simology
<ul>
<li>Needs </li>
<li>Skills</li>
<li>Traits</li>
<li>Moodlets</li>
<li>Lifetime Wishes</li>
<li>Life Time Rewards</li>
<li>Death </li>
<li>Ghosts</li>
</ul>
</li>
<li>
Expansion Guide
<ul>
<li>Ambitions</li>
<li>Generations</li>
<li>Pets</li>
<li>Late Night</li>
<li>Supernatural</li>
<li>World Adventures</li>
<li>University Life</li>
</ul>
</li>
<li>
Towns
<ul>
<li>Sunset Valley</li>
<li>Monte Vista</li>
<li>Hidden Springs</li>
<li>Dragon Valley</li>
<li>Roaring Heights</li>
</ul>
</li>
<li>
Free Downloads
<ul>
<li> Custom Sims </li>
<li>Sliders</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>

Try this
#mbt-menu li ul li > a {
color: // your colour here;
}

#mbt-menu a {
float: left;
padding: 10px 25px;
color: #FFFFFF;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
This part of the css is the one that is causing the issue. You are setting any link that is part of the menu to be white, even the ones that are not the submenu.
You can instead move that color: #ffffff out, and do
#mbt-menu li ul a{
color: #FFFFFF;
}
This finds all the a tags that are part of the menu that are under a sublist and sets the color to white.

Here is a way to fix that
#mbt-menu ul a {
color:coral; //change any color here
}
DEMO

navigation dropdown menu border issues

I want the drop down part of the menu to have borders both around and throw the drop down part of the menu. I also want to get rid of the blue border that shows on the right of the drop down menu.
The image below shows the problem i am having and what i want:
Here is the code for my navigation menu:
<div style="text-align: left;">
<style>
#homelink {
background-image: url(http://i946.photobucket.com/albums/ad301/campbellmichelle41109/sims3_logo_ver931034_zpsmnyi2tcj.png);
background-repeat: no-repeat;
background-color: transparent;
display: block;
width: 126px;
height: 140px;
}
#homelink {
position: relative;
padding: 0;
margin: -97px;
}
#mbt-menu, #mbt-menu ul {
margin: -15px;
padding: 17px;
list-style: none;
}
#mbt-menu ul {
border-style: solid;
border-color: #EBEBEB;
}
#mbt-menu {
width: 100%;
margin: 0px auto;
javascript:void(0)
background-image: url("http://i946.photobucket.com/albums/ad301/campbellmichelle41109/navbg1.1_zps86kuvvkj.png") repeat-x;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
#mbt-menu:before,
#mbt-menu:after {
content: "";
display: table;
}
#mbt-menu:after {
clear: both;
}
#mbt-menu {
zoom:1;
}
#mbt-menu li {
float: left;
border-right: 1px solid #328ad4;
-moz-box-shadow: 1px 0 0 #469ee8;
-webkit-box-shadow: 1px 0 0 #469ee8;
box-shadow: 1px 0 0 #469ee8;
position: relative;
}
#mbt-menu a {
float: left;
padding: 10px 25px;
color: #ffffff;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#mbt-menu li ul a{
color: #000000;
}
#mbt-menu li ul a{
color: #000000;
}
#mbt-menu li ul a:hover{
color: #057BBA;
}
#mbt-menu li:hover > a {
color: #0;
}
*html #mbt-menu li a:hover { /* IE6 only */
color: #000000;
}
#mbt-menu ul li {
border-style: solid;
border-color: #EBEBEB;
}
#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opaciaty: 0;
visibility: hidden;
position: absolute;
top: 46px;
left: 0;
z-index: 9999;
background: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mbt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
}
#mbt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
border: 1px solid #EBEBEB;
}
#mbt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#mbt-menu ul a {
padding: 7px;
width: 130px;
_height: 9px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mbt-menu ul a{
font-size: 12px;
}
#mbt-menu ul a:hover {
background-color: #ffffff;
}
#mbt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#mbt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #469ee8;
}
#mbt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#mbt-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#mbt-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#mbt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<div align=center>
<ul id="mbt-menu">
<li><a id=homelink href="http://sims3addictresource.blogspot.com/"></a></li>
<li>
Simology
<ul>
<li>Needs</li>
<li>Skills</li>
<li>Traits</li>
<li>Moodlets</li>
<li>Lifetime Wishes</li>
<li>Life Time Rewards</li>
<li>Death</li>
<li>Ghosts</li>
</ul>
</li>
<li>
Expansion Guide
<ul>
<li>Ambitions</li>
<li>Generations</li>
<li>Pets</li>
<li>Late Night</li>
<li>Supernatural</li>
<li>World Adventures</li>
<li>University Life</li>
</ul>
</li>
<li>
Towns
<ul>
<li>Sunset Valley</li>
<li>Monte Vista</li>
<li>Hidden Springs</li>
<li>Dragon Valley</li>
<li>Roaring Heights</li>
</ul>
</li>
<li>
Free Downloads
<ul>
<li> Custom Sims </li>
<li>Sliders</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>

To get rid of the little blue triangle, remove this rule:
#mbt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #469ee8;
}
To remove the background box around the drop down menu, add these rules:
#mbt-menu ul {
border: none !important;
padding: 0 !important;
}
To remove the blue border (actually a box shadow) along the right side of the box, delete these rules:
#mbt-menu li {
float: left;
border-right: 1px solid #328ad4;
-moz-box-shadow: 1px 0 0 #469ee8; /* DELETE */
-webkit-box-shadow: 1px 0 0 #469ee8; /* DELETE */
box-shadow: 1px 0 0 #469ee8; /* DELETE */
position: relative;
To tweak the positioning of the drop down menu, so it aligns nicely with the parent link, adjust the left and top properties here:
#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0;
opaciaty: 0;
visibility: hidden;
position: absolute;
top: 46px; /* ADJUST DROP DOWN */
left: 0; /* ADJUST DROP DOWN */
z-index: 9999;
background: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

You essentially want something like this:
#mbt-menu ul {border:none; padding: 0;}
#mbt-menu li li {box-shadow: none; border-width: 2px 2px 0 2px;}
#mbt-menu li li:last-child {border-bottom-width: 2px;}
I wouldn't add the styles in like that, though. This is for demo purposes only. You may need to make those styles more specific for them to override what's there already. (I just tested via a CSS terminal.) Ideally, integrate these styles into your existing code where they belong.
You have styles for the parent ul/li that are affecting the sub ul/li, so ideally change those rules to target just the top level ones, using something like the child selector (>).

Center Align Links In Navbar?

I tried messing with float and margin but I can't seem to figure it out.
I have float:left; and margin-left:15px; maybe that's the problem?
I'm trying to figure out where to put my text-align:center; and display:inline-block (or display:inline)
What can I do to just center my links?
Here is my css code:
#cssmenu ul {
margin: 0;
padding: 0;
}
#cssmenu li {
margin: 0;
padding: 0;
}
#cssmenu a {
margin: 0;
padding: 0;
}
#cssmenu ul {
list-style: none;
}
#cssmenu a {
text-decoration: none;
}
#cssmenu {
height: 70px;
background-color: #232323;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
width: 1150px;
margin:0 auto;
text-align: center;
}
#cssmenu > ul > li {
float:left;
margin-left: 15px;
position:relative;
}
#cssmenu > ul > li > a {
color: #e0e0e0;
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {
color: #ff0000;
}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li {
position: relative;
}
#cssmenu ul ul a {
color: #323232;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#cssmenu ul ul a:hover {
background-color: #f0f0f0;
}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
width: 180px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu ul ul > li:hover > ul {
opacity: 1;
left: 190px;
visibility: visible;
}
#cssmenu ul ul a:hover {
background-color: #cc2c24;
color: #f0f0f0;
}

Try this:
#cssmenu ul {
margin: 0;
padding: 0;
text-align: center; /* add this */
}
#cssmenu > ul > li {
display: inline-block /* instead of float:left; */
}

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Why is the CSS animation not working - html

This is an extension to the comments above. JSFiddle allows you to load external JavaScript files, via the panel to the left. That's where I loaded -prefix-free into. Here's a screenshot:

Related

How can the menu center right (СSS)

How to make this box to a triangle in css [closed]

html menu change drop down text color only

navigation dropdown menu border issues

Center Align Links In Navbar?

Categories

Resources