Created
March 11, 2016 01:43
-
-
Save MuratOrs/01df654e9a28854fc45e to your computer and use it in GitHub Desktop.
Выпадающее меню на чистом CSS3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--Разметка HTML--> | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Document</title> | |
<link rel="stylesheet" href="css/style.css"> | |
<link rel="stylesheet" href="css/foundation.css"> | |
</head> | |
<body> | |
<div id="wrapper"> | |
<div id="navMenu"> | |
<ul> | |
<li> <a href="#">Products</a> | |
<ul> | |
<li><a href="#">submenu1</a></li> | |
<li><a href="#">submenu2</a></li> | |
<li><a href="#">submenu3</a></li> | |
<li><a href="#">submenu4</a></li> | |
<li><a href="#">submenu5</a></li> | |
</ul> | |
</li><!-- end main LI--> | |
</ul> <!-- end main UL--> | |
<ul> | |
<li> <a href="#">Products</a> | |
<ul> | |
<li><a href="#">submenu1</a></li> | |
<li><a href="#">submenu2</a></li> | |
<li><a href="#">submenu3</a></li> | |
<li><a href="#">submenu4</a></li> | |
<li><a href="#">submenu5</a></li> | |
</ul> | |
</li><!-- end main LI--> | |
</ul> <!-- end main UL--> | |
<ul> | |
<li> <a href="#">Products</a> | |
<ul> | |
<li><a href="#">submenu1</a></li> | |
<li><a href="#">submenu2</a></li> | |
<li><a href="#">submenu3</a></li> | |
<li><a href="#">submenu4</a></li> | |
<li><a href="#">submenu5</a></li> | |
</ul> | |
</li><!-- end main LI--> | |
</ul> <!-- end main UL--> | |
<ul> | |
<li> <a href="#">Products</a> | |
<ul> | |
<li><a href="#">submenu1</a></li> | |
<li><a href="#">submenu2</a></li> | |
<li><a href="#">submenu3</a></li> | |
<li><a href="#">submenu4</a></li> | |
<li><a href="#">submenu5</a></li> | |
</ul> | |
</li><!-- end main LI--> | |
</ul> <!-- end main UL--> | |
<ul> | |
<li> <a href="#">Products</a> | |
<ul> | |
<li><a href="#">submenu1</a></li> | |
<li><a href="#">submenu2</a></li> | |
<li><a href="#">submenu3</a></li> | |
<li><a href="#">submenu4</a></li> | |
<li><a href="#">submenu5</a></li> | |
</ul> | |
</li><!-- end main LI--> | |
</ul> <!-- end main UL--> | |
<br class="clearFloat"> | |
</div><!-- end navMenu--> | |
</div><!-- end wrapper--> | |
</body> | |
</html> | |
<!--Стили--> | |
#navMenu | |
{margin: 0; | |
padding: 0;} | |
#navMenu ul { | |
margin: 0; | |
padding: 0; | |
line-height: 30px;} | |
#navMenu li{ | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
float: left; | |
position: relative; | |
background: #999; | |
} | |
#navMenu ul li a { | |
text-align: center; | |
font-family: "Comic Sans Ms", cursive; | |
text-decoration: none; | |
height: 30px; | |
width: 150px; | |
display: block; | |
color:#FFF; | |
border: 1px solid #FFF; | |
text-shadow:1px 1px #000; | |
} | |
#navMenu ul ul{ | |
position: absolute; | |
visibility: hidden; | |
top:32px; | |
} | |
#navMenu ul li:hover ul{ | |
visibility: visible; | |
} | |
#navMenu li:hover{ | |
background: #09F; | |
} | |
#navMenu ul li:hover ul li a:hover{ | |
background: #CCC; | |
color:#000; | |
} | |
#navMenu a:hover{ | |
color: #000; | |
} | |
.clearFloat{ | |
clear: both; | |
margin: 0; | |
padding: 0; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment