大理石在哪儿
![CSS3 Green Marble Menu CSS3 Green Marble Menu](https://i-blog.csdnimg.cn/blog_migrate/e396ec20dd296f42a2726f1c4c807a27.png)
![CSS3绿色大理石菜单 CSS3 Green Marble Menu](https://i-blog.csdnimg.cn/blog_migrate/e396ec20dd296f42a2726f1c4c807a27.png)
CSS3 Green Marble Menu tutorial. In our new tutorial we’ll create a new horizontal dropdown CSS3 menu. This menu will be suitable for black and for white websites. It made of green marble colors.
CSS3绿色大理石菜单教程。 在我们的新教程中,我们将创建一个新的水平下拉CSS3菜单。 此菜单适用于黑色和白色网站。 它由绿色大理石制成。
Here are final result (what we will creating):
这是最终结果(我们将创建的结果):
![Green Marble Dropdown Menu](https://i-blog.csdnimg.cn/blog_migrate/20cc8327d86da73a8cd331b3b9086e0a.png)
![绿色大理石下拉菜单](https://i-blog.csdnimg.cn/blog_migrate/20cc8327d86da73a8cd331b3b9086e0a.png)
Here are samples and downloadable package:
以下是示例和可下载的软件包:
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
OK, download the example files and lets start coding !
好,下载示例文件,开始编码!
步骤1. HTML (Step 1. HTML)
As usual, we start with the HTML. Here are full html code of our menu. Today – this is 2 levels menu. Whole menu built on UL-LI elements.
和往常一样,我们从HTML开始。 这是菜单的完整html代码。 今天-这是2级菜单。 整个菜单均基于UL-LI元素。
index.html (index.html)
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>CSS3 Green Marble Menu | Script Tutorials</title>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
</head>
<body>
<div class="container">
<div class="content">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#" class="current">HTML/CSS</a>
<ul class="subs">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">jQuery/JS</a>
<ul class="subs">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
</ul>
</div>
</div>
<footer>
<h2>CSS3 Green Marble Menu</h2>
<a href="https://www.script-tutorials.com/css3-green-marble-menu/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>CSS3 Green Marble Menu | Script Tutorials</title>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
</head>
<body>
<div class="container">
<div class="content">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#" class="current">HTML/CSS</a>
<ul class="subs">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">jQuery/JS</a>
<ul class="subs">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
</ul>
</div>
</div>
<footer>
<h2>CSS3 Green Marble Menu</h2>
<a href="https://www.script-tutorials.com/css3-green-marble-menu/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</footer>
</body>
</html>
步骤2. CSS (Step 2. CSS)
Here are the CSS styles of our dropdown menu. Maybe you’ve noticed – that in our html – I have two CSS files: layout.css and menu.css. The first file (layout.css) contain the styles of our test page. We will not publish these styles in this article, but if you wish – you can find these styles in the package.
这是我们的下拉菜单CSS样式。 也许您已经注意到-在我们的html中-我有两个CSS文件:layout.css和menu.css。 第一个文件(layout.css)包含测试页的样式。 我们不会在本文中发布这些样式,但是如果您愿意–您可以在包中找到这些样式。
css / menu.css (css/menu.css)
ul#nav {
color: #232223;
display:block;
float:right;
font: 16px/26px Georgia,"Times New Roman",Times,serif;
}
ul#nav,ul#nav ul {
list-style:none;
}
ul#nav .subs {
background-color: rgba(121,160,160,0.8);
border:1px solid #887963;
display:none;
float:left;
left:0;
padding:10px;
position:absolute;
top:100%;
}
ul#nav li:hover>* {
display:block;
}
ul#nav li:hover {
position:relative;
}
ul#nav ul .subs {
left:100%;
position:absolute;
top:0;
}
ul#nav ul {
padding:0 5px 5px;
}
ul#nav li {
display:inline;
float:left;
}
ul#nav a {
color: #353435;
float: left;
font-size: 15px;
letter-spacing: 1px;
line-height: 14px;
min-width:60px;
padding: 60px 20px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0 #B4C6C6;
text-transform: uppercase;
}
ul#nav > li:hover > a {
border-top: 5px solid #887963;
color: #1e1e1e;
padding-top: 55px;
}
ul#nav li a.current, ul#nav li a.current:hover {
background: url("../images/nav_current.png") no-repeat scroll center top transparent;
border: medium none;
color: #fff;
padding-top: 60px;
text-shadow: none;
}
ul#nav ul a {
color:#000;
font-size:12px;
font-weight:bold;
padding:5px;
text-shadow:#fff 0 0 0;
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
}
ul#nav ul li:hover>a {
letter-spacing:2px;
}
ul#nav {
color: #232223;
display:block;
float:right;
font: 16px/26px Georgia,"Times New Roman",Times,serif;
}
ul#nav,ul#nav ul {
list-style:none;
}
ul#nav .subs {
background-color: rgba(121,160,160,0.8);
border:1px solid #887963;
display:none;
float:left;
left:0;
padding:10px;
position:absolute;
top:100%;
}
ul#nav li:hover>* {
display:block;
}
ul#nav li:hover {
position:relative;
}
ul#nav ul .subs {
left:100%;
position:absolute;
top:0;
}
ul#nav ul {
padding:0 5px 5px;
}
ul#nav li {
display:inline;
float:left;
}
ul#nav a {
color: #353435;
float: left;
font-size: 15px;
letter-spacing: 1px;
line-height: 14px;
min-width:60px;
padding: 60px 20px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0 #B4C6C6;
text-transform: uppercase;
}
ul#nav > li:hover > a {
border-top: 5px solid #887963;
color: #1e1e1e;
padding-top: 55px;
}
ul#nav li a.current, ul#nav li a.current:hover {
background: url("../images/nav_current.png") no-repeat scroll center top transparent;
border: medium none;
color: #fff;
padding-top: 60px;
text-shadow: none;
}
ul#nav ul a {
color:#000;
font-size:12px;
font-weight:bold;
padding:5px;
text-shadow:#fff 0 0 0;
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
}
ul#nav ul li:hover>a {
letter-spacing:2px;
}
现场演示
结论 (Conclusion)
Hope you enjoyed with new menu, don’t forget to tell thanks and leave a comment :) Good luck!
希望您喜欢新菜单,别忘了感谢并发表评论:)祝您好运!
翻译自: https://www.script-tutorials.com/css3-green-marble-menu/
大理石在哪儿