I have a question regarding CSS transformation. I made a Dropdown menu in which the dropdown (submenu) should have a special shape. See here:
https://drive.google.com/folderview?id=0B5Ki_dh4A-VJY2ZKQUJaQnF5SDQ&usp=sharing
So far I could manage a part of it with: transform: skewY. How I can finish the rest as shown in the picture above?
Here is my JSFiddle: http://jsfiddle.net/sxfxs/
Has anybody an idea?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>MENUTEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#menu {
font-family: TrajanProRegular;
position: absolute;
top:100px;
width: 1100px;
height: 70px;
background-color: #484441;
color: #8C8985;
font-weight: bold;
clear: both;
text-align: center;
vertical-align: middle;
line-height: 70px;
display: inline-block;
}
nav {
width: 1100px;
height: 70px;
background: #484441;
line-height: 70px;
position: absolute;
}
nav span {
font: 1.35em 'TrajanProRegular';
}
nav a {
text-decoration: none;
}
nav ul {
text-align: center;
margin-top: -1px;
display: inline-block;
}
ul li {
font: 9px 'PT Sans Narrow';
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;
/* float: left;*/
}
ul > li {
display: inline-block;
letter-spacing: 0.11em;
padding: 0 10px 0;
}
ul li a {
line-height: 70px;
padding: 0 10px;
height: 70px;
color: #8C8985;
font: 1.3em/70px TrajanProRegular;
/* font: 10pt/70px TrajanProBold; */
-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;
border-left: 1px solid #777370;
border-right: 1px solid #777370;
}
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 #239976;
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: 185px;
background: #239976;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-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;
-webkit-transform: skewY(3deg);
-moz-transform: skewY(3deg);
-ms-transform: skewY(3deg);
-o-transform: skewY(3deg);
transform: skewY(3deg);
}
.dropOut ul {
float: left;
padding: 10px 0;
-webkit-transform: skewY(-3deg);
-moz-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
-o-transform: skewY(-3deg);
transform: skewY(-3deg);
}
.dropOutb {
width: 185px;
background: #239976;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-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;
z-index: -1;
}
.dropOut ul li {
text-align: left;
float: left;
width: 150px;
/* padding: 12px 0 10px 15px; */
margin: 0px 3px;
color: #FFF;
/* -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;
}
/* NEW */
.dropOut ul li a{
font: 12px 'PT Sans Narrow';
border: none !important;
/* padding: 5px 0 10px 0px !important; */
text-align: left;
width: 160px !important;
margin: 0px 5px 0px 0px !important;
padding: 5px 0 10px 0px !important;
float: left;
height: 15px !important;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
.dropOut ul li:hover {
/* background: #CCE5DB; */
/* text-shadow: 2px 2px 2px #FFFFFF; */
/* filter:DropShadow(Color=#fffff, OffX=2, OffY=2); */
}
.dropOut ul li:hover a {
color: #ACD6C6;
}
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: 0px; }
</style>
</head>
<body>
<div id="menu">
<nav>
<ul>
<li class="drop">
<span>T</span>OPmenu1
<div class="dropdownContain">
<div class="dropOut dropOutb">
<!--<div class="triangle"></div>-->
<ul>
<li>T1Sub1</li>
<li>T1Sub2</li>
</ul>
</div> <!-- dropOut -->
</div> <!-- dropdownContain -->
</li> <!-- drop -->
<li class="drop">
<span>T</span>OPmenu2
<div class="dropdownContain">
<div class="dropOut dropOutb">
<!--<div class="triangle"></div>-->
<ul>
<li>Topmenu2sub1</li>
<li>Topmenu2sub2</li>
</ul>
</div> <!-- dropOut -->
</div> <!-- dropdownContain -->
</li> <!-- drop -->
<li class="drop">
<span>T</span>OPmenu3
<div class="dropdownContain">
<div class="dropOut">
<!--<div class="triangle"></div>-->
<ul>
<li>TOPmenu3Sub1</li>
<li>TOPmenu3Sub2</li>
</ul>
</div> <!-- dropOut -->
</div> <!-- dropdownContain -->
</li> <!-- drop -->
<li class="drop">
<span>T</span>OPmenu4
<div class="dropdownContain">
<div class="dropOut">
<!--<div class="triangle"></div>-->
<ul>
<li>TOPmenu4Sub1</li>
<li>TOPmenu4Sub2</li>
<li>TOPmenu4Sub3</li>
<li>TOPmenu4Sub4</li>
</ul>
</div> <!-- dropOut -->
</div> <!-- dropdownContain -->
</li> <!-- drop -->
<li class="drop">
<span>T</span>OPmenu5
<div class="dropdownContain">
<div class="dropOut">
<!--<div class="triangle"></div>-->
<ul>
<li>TOPmenu5Sub1</li>
<li>TOPmenu5Sub2</li>
<li>TOPmenu5Sub3</li>
<li>TOPmenu5Sub4</li>
<li>TOPmenu5Sub5</li>
</ul>
</div> <!-- dropOut -->
</div> <!-- dropdownContain -->
</li> <!-- drop -->
<li class="drop">
<span>T</span>OPmenu6
<div class="dropdownContain">
<div class="dropOut">
<!--<div class="triangle"></div>-->
<ul>
<li>TOPmenu6Sub1</li>
<li>TOPmenu6Sub2</li>
</ul>
</div> <!-- dropOut -->
</div> <!-- dropdownContain -->
</li> <!-- drop -->
<li class="drop">
<span>T</span>OPmenu7
<div class="dropdownContain">
<div class="dropOut">
<!--<div class="triangle"></div>-->
<ul>
<li>TOPmenu7Sub1</li>
<li>TOPmenu7Sub2</li>
<li>TOPmenu7Sub3</li>
</ul>
</div> <!-- dropOut -->
</div> <!-- dropdownContain -->
</li> <!-- drop -->
</ul>
</nav>
</div><!-- menu -->
</body>
</html>
One way is to add the following to .dropOut ul
background: #239976;
margin-bottom: -10px;
margin-top: 10px;
http://jsfiddle.net/myajouri/sxfxs/1/
Related
I am new to coding, and I am making a home page. I was trying to get the black and white hover feature on the images of my home pages. However, when I hover my mouse over the image, it does not work. It is only until you hover to the left of the image that the image will turn from color to BW. Any ideas on how to fix this? Any help is greatly appreciated!
Here is my code:
#font-face {
font-family: "p22-underground";
src: qzo1okq;
}
.container {
position: absolute;
padding-bottom: 0px;
margin-top: -125px;
margin-right: -70px;
float: left;
}
.Marlon {
position: absolute;
margin-top: -275px;
margin-left: 15px;
}
/*B&W*/
.blue {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blue:hover {
-webkit-filter: grayscale(100%);
}
.blue {
position: relative;
background-position: left top;
margin-top: 120px;
margin-left: -250px;
max-width:100%;
height:auto;
text-align: center;
}
/*B&W*/
.Tammy {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Tammy:hover {
-webkit-filter: grayscale(100%);
display: block;
}
.Tammy {
position: relative;
background-position: left top;
margin-top: -5px;
margin-left: -250px;
max-width:100%;
height:auto;
text-align: center;
}
/*B&W*/
.Tacos {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Tacos:hover {
-webkit-filter: grayscale(100%);
}
.Tacos {
position: relative;
background-position: center;
margin-top: -623px;
margin-left: 100px;
max-width:100%;
text-align: center;
}
/*B&W*/
.Glasses {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Glasses:hover {
-webkit-filter: grayscale(100%);
}
.Glasses {
position: relative;
background-position: center;
margin-top: -5px;
margin-left: 100px;
max-width:100%;
height:auto;
text-align: center;
}
/*B&W*/
.Door {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Door:hover {
-webkit-filter: grayscale(100%);
}
.Door{
position: relative;
background-position: right top;
margin-top: -623px;
Margin-left:700px;
max-width:100%;
height:auto;
text-align: center;
}
.Social {
position: relative;
text-align: center;
inline: block;
padding-bottom: 0px;
top:-25px;
bottom: 0px;
margin:auto;
}
body {
background-image: url("http://ac.aup.edu/~a94241/background.jpeg");
}
ul {
list-style-type: none;
height: 50px;
margin: 150;
padding: 80;
overflow: hidden;
margin-top: 200px;
background-color: black;
font-family: "p22-underground";
font-weight: "500";
font-size: 150%;
}
li {
float: none;
color: "#fcf8de";
position: relative;
display: inline-block;
bottom: 12px;
margin-left: 10px;
margin-right: 10px;
}
li a {
display: block;
color: "#fcf8de";
text-align: center;
padding: 14px 16px;
margin-left: 5px;
}
footer {
height:10px;
padding: 20px;
margin-top:100px;
text-align:left;
vertical-align:middle;
padding-top: 14px;
background-color: black;
font-family: "p22-underground";
font-weight: "300";
position:static;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://use.typekit.net/qzo1okq.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
<body>
<div class="container">
<a href="http://ac.aup.edu/~a94241/Marlon Coding.html">
<img src="http://ac.aup.edu/~a94241/cactus.png" alt="Cactus Vector" width="100" height="90">
</a>
</div>
<div class="Marlon">
<a href="http://ac.aup.edu/~a94241/Marlon Coding.html">
<img src="http://ac.aup.edu/~a94241/Marlon Vector.png" alt="Marlon Vector" width="450" height="550">
</a>
</div>
<ul>
<center>
<h1 style="font-p22-underground-sc, sans-serif;font-style:normal; font-weight:500; font-size:80% "</h1>
<li>PHILOSOPHIE</li>
<li>MENU</li>
<li>NOUS TROUVER</li>
<li>AVIS</li>
<li>CONTACT
</li>
</ul>
</center>
<div class="opacity">
<div class="blue">
<a href="http://ac.aup.edu/~a94241/Philosophie.html">
<img src="http://ac.aup.edu/~a94241/blue car.png" alt="BlueCar" width="300" height="310">
</a>
</div>
<div class="Tammy">
<a href="http://ac.aup.edu/~a94241/Avis.html">
<img src="http://ac.aup.edu/~a94241/tammy Lunch.png" alt="TammyLunch" width="300" height="310">
</a>
</div>
<div class="Tacos">
<a href="http://ac.aup.edu/~a94241/Contact.html">
<img src="http://ac.aup.edu/~a94241/tacos.png" alt="Tacos" width="300" height="310">
</a>
</div>
<div class="Glasses">
<a href="http://ac.aup.edu/~a94241/Menu.html">
<img src="http://ac.aup.edu/~a94241/Glasses.png" alt="Glasses" width="300" height="310">
</a>
</div>
<div class="Door">
<a href="http://ac.aup.edu/~a94241/Nous Trouver.html">
<img src="http://ac.aup.edu/~a94241/door.png" alt="Door" width="300" height="620">
</a>
</div>
</div>
<footer>
<p1><font color="#fcf8de">CALL: 01 40 60 12 12</font></p1>
<div class="Social">
<a href="https://www.facebook.com/restaurantmarlon">
<img src="http://ac.aup.edu/~a94241/facebook.png" alt="Facebook Vector" width="20" height="25">
</a>
<a href="https://www.instagram.com/restaurantmarlon/">
<img src="http://ac.aup.edu/~a94241/instragram.png" alt="Instargram Vector" width="20" height="25">
</a>
</div>
</footer>
</body>
</html>
I have 2 examples below which display 4 links and hovering upon them display border bottom with ease effect.
In the Example 1 the border-bottom display from top-bottom. I have tried revering with the padding property which is there in Example 2, Its not consistent across the browsers and it does not works properly.
Example 1: transition default functionality (transition from top-bottom)
<!DOCTYPE html><html class=''>
<head>
<style class="cp-pen-styles">
body {
padding: 50px;
}
a, a:hover {
text-decoration: none;
}
li {
position: relative;
padding-bottom: 3px;
margin-right: 10px;
display: inline;
}
li a {
border-bottom: 0em solid transperant;
color: #777;
}
li:focus > a,
li:hover > a,
li:active > a {
border-bottom: 0.313em solid #206E9F;
transition: border-bottom .2s ease-in-out;
-webkit-transition: border-bottom .2s ease-in-out;
-moz-transition: border-bottom .2s ease-in-out;
-ms-transition: border-bottom .2s ease-in-out;
}
|
</style>
</head>
<body>
<ul>
<li>HOME</li>
<li>PAGE</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
</ul>
</body>
</html>
Example 2: transition from bottom-top (using padding - Compatibility issue with IE browser)
<!DOCTYPE html><html class=''>
<head>
<style class="cp-pen-styles">
body {
padding: 50px;
}
a, a:hover {
text-decoration: none;
}
li {
position: relative;
padding-bottom: 3px;
margin-right: 10px;
display: inline;
}
li a {
color: #777;
padding-bottom:0.4em;
border-bottom: 0em solid transperant;
}
li:focus > a,
li:hover > a,
li:active > a {
padding-bottom:0em;
border-bottom: 0.313em solid #206E9F;
transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
}
</style></head><body>
<ul>
<li>HOME</li>
<li>PAGE</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
</ul>
</body></html>
How to make CSS3 transition working for border-bottom property which starts from bottom to top.
You can simulate your desired outcome by using :after or :before pseudo elements. This way you'll have much greater control over the desired effect (like adding various transforms).
body {
padding: 50px;
}
a {
text-decoration: none;
}
li {
display: inline;
margin-right: 10px;
}
li a {
border-bottom: 0 solid transparent;
color: #777;
display: inline-block;
padding-bottom: 3px;
position: relative;
}
li a > .fancy-line {
background-color: transparent;
content: "";
display: block;
height: 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
-o-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
}
li a:hover > .fancy-line {
background-color: #206E9F;
height: 3px;
}
<ul>
<li>HOME <span class="fancy-line"></span></li>
<li>PAGE <span class="fancy-line"></span></li>
<li>ABOUT US <span class="fancy-line"></span></li>
<li>CONTACT US <span class="fancy-line"></span></li>
</ul>
You can do this with a pseudo-element and a transform rather than a border.
body {
padding: 50px;
}
a,
a:hover {
text-decoration: none;
}
li {
position: relative;
padding-bottom: 3px;
margin-right: 10px;
display: inline;
}
li a {
border-bottom: 0em solid transperant;
color: #777;
position: relative;
}
li > a::after,
li > a::after,
li > a::after {
content: '';
position: absolute;
width: 100%;
height: .313em;
background: #206E9F;
top: 100%;
left: 0;
transform-origin: center bottom;
transform: scaleY(0);
transition: transform .2s ease-in-out;
}
li:focus > a::after,
li:hover > a::after,
li:active > a::after {
transform: scaleY(1);
}
<ul>
<li>HOME
</li>
<li>PAGE
</li>
<li>ABOUT US
</li>
<li>CONTACT US
</li>
</ul>
I'm trying to make a menu with definitions on the left and links on the right - but I can't get all the box to be a link. I could solve it with table I guess, but I hope there is a smoother solution.
So I want to float left one side of the line and right the other.
Here's my CSS:
li {
margin: 0px 10px 0px 100px;
padding: 30px 5px 0px 5px;
border-bottom: 2px solid black;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
display: block;
-moz-transition: background-color .3s ease-in;
-webkit-transition: background-color .3s ease-in;
-o-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
li:hover {
background-color: #CCC;
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}
a {
float: right;
color: black;
text-decoration: none;
}
And the HTML:
<ul>
<li>Blog#.blogspot.com</li>
<li>Twitter##</li>
<li>Google+Google+</li>
<li>Contact me##gmail.com</li>
</ul>
Or much better, here: http://jsfiddle.net/hJRdN/
It is done here on jsfiddle
just replace html and css as in js fiddle
<ul>
<li>Blog<span>#.blogspot.com</span></li>
<li><span>Twitter</span>##</li>
<li>Google+<span>Google+</span></li>
<li>Contact me<span>##gmail.com</span></li>
</ul>
CSS
li {
float:left;
width:400px;
margin: 0px 10px 0px 100px;
border-bottom: 2px solid black;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
display: block;
-moz-transition: background-color .3s ease-in;
-webkit-transition: background-color .3s ease-in;
-o-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
li:hover {
background-color: #CCC;
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}
a {
display:block;
padding: 30px 5px 0px 5px;
color: black;
text-decoration: none;
width:390px;
}
a span{ float:right}
Is it necesary to have unordered list? If not you could easily achieve that with just using floated divs.
<a href="#">
<div class="row">
<div class="left">blog</div><div class="right">blogspot.com</div>
</div>
</a>
<a href="#">
<div class="row">
<div class="left">twitter</div><div class="right">twitter.com</div>
</div>
</a>
And css:
.row { width: 100%; float: left; }
.row:hover { background-color: #e3e3e3; }
.left { float: left; }
.right { float: right; }
.row .left { color: #000; }
.row .right { color: #000; }
Check out this fiddle: http://jsfiddle.net/dejvidpi/7a6mp/
I'm using Creative CSS3 Animation Menus by CODROPS which the Demo can be seen HERE
I want to make a subsmenu at Tetapan(setting) when user hover the mouse at it LIKE THIS .
This is my code that I try to put arrow at the subsmenu
This is css code
#font-face {
font-family: 'WebSymbolsRegular';
src: url('websymbols/websymbols-regular-webfont.eot');
src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('websymbols/websymbols-regular-webfont.woff') format('woff'),
url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.ca-menu{
padding:0;
margin:5px auto;
width: 145px;
}
.ca-menu li{
width: auto;
height: 50px;
overflow: hidden;
position: relative;
display: block;
background: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-bottom: 4px;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.ca-menu li:last-child{
margin-bottom: 0px;
}
.ca-menu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #333;
position: relative;
}
.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
font-size: 20px;
color: #333;
text-shadow: 0px 0px 1px #333;
line-height: 25px;
position: absolute;
width: 9px;
left: 2px;
text-align: center;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-content{
position: absolute;
left: 30px;
width: 370px;
height: 60px;
top: 5px;
}
.ca-main{
line-height: 25px;
font-size: 15px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-sub{
font-size: 14px;
color: #666;
}
.ca-menu li:hover{
background-color: #000;
}
.ca-menu li:hover .ca-icon{
color: #f900b0;
font-size: 120px;
opacity: 0.2;
left: -20px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
.ca-menu li:hover .ca-main{
color: #f900b0;
opacity: 0.8;
}
.ca-menu li:hover .ca-sub{
color: #fff;
opacity: 0.8;
}
/** Here I add arrow **/
.has-sub>a::after {
content: '';
position: absolute;
top: 20px;
right: 5px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #333;
}
ul li:hover>a::after {
border-left: 4px solid #f900b0;
}
HTML code
<ul class="ca-menu">
<li>
<a href="pagehome.php">
<span class="ca-icon">D</span>
<div class="ca-content">
<h2 class="ca-main">Halaman Utama</h2>
</div>
</a>
</li>
<li>
<a href="addpage.php">
<span class="ca-icon">F</span>
<div class="ca-content">
<h2 class="ca-main">Borang Baru</h2>
</div>
</a>
</li>
<li>
<a href="searchpage.php">
<span class="ca-icon">L</span>
<div class="ca-content">
<h2 class="ca-main">Carian Borang</h2>
</div>
</a>
</li>
<li class='has-sub'>
<a href="settingpage.php">
<span class="ca-icon">S</span>
<div class="ca-content">
<h2 class="ca-main">Tetapan</h2>
</div>
</a>
<ul>
<li>
<a href="settingpage.php">
<span class="ca-icon">S</span>
<div class="ca-content">
<h2 class="ca-main">Tetapan</h2>
</div>
</a>
</li>
</ul>
</li>
<li>
<a href="out.php" onClick="return confirm('Anda pasti untuk keluar dari sistem ?');">
<span class="ca-icon">X</span>
<div class="ca-content">
<h2 class="ca-main">Keluar</h2>
</div>
</a>
</li>
</ul>
My pure css drop-down menu works in all major browsers except IE8. There are two issues.
1) The background color of menu doesn't display until the mouse rolls over one of the menu items. (see photo in link below)
http://www.searchtransparency.net/stackoverflow/2.jpg
2) If the menu is exited from the parent link (treatments) it leaves a shortened version of the background displaying. (see photo in link below)
http://www.searchtransparency.net/stackoverflow/1.PNG
CSS:
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
z-index:3;
}
.menu {
height: 53px;
width: 994px;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 38px;
padding-top: 15px;
}
.menu li a {
display: block;
padding-left: 44px;
padding-right: 44px;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0px;
margin-left: 0;
padding-top: 0;
padding-bottom: 0;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color:#CCC; }
.menu ul {
position: absolute;
top: 53px;
left: 0;
opacity: 0;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
-webkit-box-shadow: 0px 0px 5px 0px #333;
box-shadow: 0px 0px 5px 0px #333;
background-color: #222;
padding-bottom: 15px;
visibility: hidden;
behavior: url(PIE.htc);
}
.menu li:hover > ul {
opacity: 1;
visibility: visible;
}
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 25px;
overflow: visible;
}
.menu ul li a {
width: 175px;
margin: 0;
font-size: 12px;
text-shadow: none;
border: none;
padding-left: 25px;
height: 20px;
padding-top: 5px;
}
.menu ul li:last-child a { border: none; }
.menu li li:hover > a {
background-color: #666;
}
HTML:
<ul class="menu">
<li><img src="images/icon-home.png" alt="Home" width="18" height="18" border="0"></li>
<li>Meet The Doctor</li>
<li class="icon-dropdown-arrow">Treatments
<ul>
<li style="font-size:14px; padding-left:15px; padding-top:10px; margin-top:10px;">Skin Resurfacing</li>
<li>Fraxel® Restore</li>
<li style="font-size:14px; padding-left:15px; padding-top:10px; margin-top:0px;">Skin Tightening</li>
<li>Thermage®</li>
<li>Refirme® Photo-Rejuvenation</li>
<li style="font-size:14px; padding-left:15px; padding-top:10px; margin-top:0px;">Cellulite Treatments</li>
<li>LPG Lipomassage™</li>
<li>VelaShape™</li>
<li>Thermage®</li>
<li>Ionithermie Treatment</li>
<li style="font-size:14px; padding-left:15px; padding-top:10px; margin-top:0px;">Injectibles</li>
<li>Dermal Fillers</li>
<li>Botox® Cosmetic</li>
<li style="font-size:14px; padding-left:15px; padding-top:10px; margin-top:0px;">Other</li>
<li>Laser Hair Removal</li>
<li>Skin Treatments (Face & Body)</li>
<li>Skin Rejuvenation</li>
<li>Plastic Surgery</li>
<li>Massage</li>
</ul>
</li>
<li>Specials</li>
<li>Reviews</li>
<li>Contact</li>
</ul>
Code on JsFiddle.net
As i remember IE understand :hover only just for "a" tag.
:last-child doesn't support too, question about :last-child