Skip to content

Instantly share code, notes, and snippets.

@MuratOrs

MuratOrs/gist:01df654e9a28854fc45e

Created March 11, 2016 01:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MuratOrs/01df654e9a28854fc45e to your computer and use it in GitHub Desktop.
Save MuratOrs/01df654e9a28854fc45e to your computer and use it in GitHub Desktop.
Download ZIP
Выпадающее меню на чистом CSS3
Raw
gistfile1.txt
<!--Разметка 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