The last hour.
Page 1 of 1
The last hour.
by WWI Returns Wed Nov 06, 2013 1:56 am
There's not an off topic section on this forum. Just thought I'd share what I do in my free time 
CSS.
HTML
CSS.
- Code:
html{
background-color: yellow;
}
nav{
text-align: center;
font-family: 'Trebuchet MS', serif;
color: black;
}
nav a{
color: black;
text-decoration: none;
}
nav ul ul{
display: none;
}
nav ul li:hover > ul{
display: block;
white-space: nowrap;
}
nav ul{
background-color: gray;
box-shadow: 0px 0px 9px rgba(0,0,0,0.6);
padding: 0;
list-style: none;
position: relative;
display: inline-table;
white-space: nowrap;
}
nav ul:after{
content: ""; clear: both;
display: block;
}
nav ul li{
float: left;
border: 1px solid black;
}
nav ul li:hover{
white-space: nowrap;
background-color: black;
color: black;
}
nav ul li:hover a{
color: white;
}
nav ul li a{
display: block;
padding: 5px 10px;
color: black;
text-decoration: none;
white-space: nowrap;
}
nav ul ul {
background-color: gray;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
white-space: nowrap;
float: none;
position: relative;
}
nav ul ul li a{
padding: 5px 10px;
color: black;
}
nav ul ul li a:hover{
color: white;
}
nav ul ul ul{
position: absolute;
left: 100%;
top: 0;
white-space: nowrap;
}
HTML
- Code:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='./main.css'>
<title> Drop Down Menu Test </title>
</head>
<body>
<nav>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Dropdown Test</a>
<ul>
<li><a href='#'>Debug</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
WWI Returns- Posts : 2
Join date : 2013-11-04
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum|
|
|