大理石在哪儿_创建大理石样式CSS3导航菜单

大理石在哪儿

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):

这是最终结果(我们将创建的结果)：

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/

大理石在哪儿