Home

JS special effects

CSS3 special effects

CSS shopping mall websites commonly use left category drop-down navigation menu code

Download Now Preview

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商城网站常用左侧分类下拉导航菜单代码</title>

<style>
* { margin: 0; padding: 0; }
body { margin: 0; padding: 0; text-decoration: none; font-size: 14px; }
li { list-style: none; }
.menu { width: 1000px; height: 600px; margin: 30px auto; background-color: #ececec; }
.menu .menuTop { background-color: #F10215; color: #fff; width: 140px; height: 40px; padding-left: 20px; line-height: 40px; cursor: pointer; }
.menu ul { width: 160px; background-color: #fff; border: 2px solid #F10215; box-sizing: border-box; position: relative; }
.menu ul li { height: 30px; padding-left: 8px; text-align: left; line-height: 30px; font-size: 13px; background: url(image/1.png) no-repeat right; z-index: 2; }
.menu ul li a { color: #7070770; }
.menu ul li a:hover { color: red; text-decoration: underline; cursor: pointer; }
.menu ul li:hover { border: 1px solid #DDD; border-right: 0; background-image: none; }
.menu ul li:hover .submenu { display: block; }
.menu ul li:hover span { width: 30px; height: 30px; display: inline-block; background-color: #FFF; float: right; z-index: 100; position: relative; }
.menu ul li .submenu { position: absolute; left: 146px; top: 0; width: 720px; height: 300px; border: 1px solid #DDD; box-shadow: 0 0 8px #DDD; -moz-box-shadow: 0 0 8px #DDD; -webkit-box-shadow: 0 0 8px #DDD; background-color: #FFF; z-index: 3; display: none; }
.menu ul li .submenu .subleft { margin-left: 0px; width: 400px; height: 300px; float: left; padding: 5px; }
.menu ul li .submenu .subleft dl { overflow: hidden; border-bottom: 1px solid #D1D1D1; padding: 10px 0; }
.menu ul li .submenu .subleft dl dt { float: left; height: 22px; line-height: 22px; margin-right: 10px; font-weight: bold; color: #707070; font-size: 12px; cursor: pointer; }
.menu ul li .submenu .subleft dl dd { }
.menu ul li .submenu .subleft dl dd a { display: block; float: left; border-left: 1px solid #707070; padding: 0 5px; color: #707070; height: 14px; line-height: 14px; margin: 3px 0; font-size: 11px; }
.menu ul li .submenu .subright { width: 310px; height: 300px; background-color: blue; float: left; }
</style>

</head>
<body><script src="/demos/googlegg.js"></script>
<div class="menu">
<div class="menuTop">全部商品分类</div>
<ul>

<li> <a herf="javascript:;">First-level title 1</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Level 111</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> <a href="javascript:;">Level 3 title</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level title</a> </dd>
</dl>
</div>
<div class="subright" style="background-color: antiquewhite"> </div>
</div>
</li>

<li> <a herf="javascript:;">First-level title 2</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Second level title 222</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> <a href="javascript:;">Level 3 title</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level title 2</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:aquamarine"> </div>
</li>

<li> <a herf="javascript:;">First-level title 3</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Second level title 333</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> <a href="javascript:;">Level 3 title</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading 3</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:cadetblue"> </div>
</li>

<li> <a herf="javascript:;">First-level title 4</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Second level title 444</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> <a href="javascript:;">Level 3 title</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading 4</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:darkgrey"> </div>
</li>

<li> <a herf="javascript:;">First-level title 5</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Second level title 555</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> <a href="javascript:;">Level 3 title</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Level 3 title 5</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:darkseagreen"> </div>
</li>

<li> <a herf="javascript:;">First-level title 6</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Second level title 666</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> <a href="javascript:;">Level 3 title</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading 6</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:lavender"> </div>
</li>

<li> <a herf="javascript:;">First-level title 7</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Second level title 777</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> <a href="javascript:;">Level 3 title</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading 7</a> </dd>
</dl>
</div>
<div class="subright"> </div>
</li>

<li> <a herf="javascript:;">First-level title 8</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Second level title 888</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> <a href="javascript:;">Level 3 title</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading 8</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:lightseagreen"> </div>
</li>
<li> <a herf="javascript:;">First-level title 9</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Second level title 999</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> <a href="javascript:;">Level 3 title</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level title 9</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:mistyrose"> </div>
</li>

<li> <a herf="javascript:;">First-level title 10</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Level 1010</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> <a href="javascript:;">Level 3 title</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading< ;/a> </dd>
</dl>
<dl>
<dt>Second-level title</dt>
<dd> <a href="javascript:;">Third-level heading</a> <a href="javascript:;">Third-level heading</a> <a href=" javascript:;">Third-level title 10</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:salmon"> </div>
</li>

</ul>

</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

This is a relatively simple code that uses the CSS mouse hover attribute to create a commonly used left-side category drop-down navigation menu for mall websites.

Disclaimer

All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn