下午好,
我目前的任务是为网站创建多个样式表.其中一个网站样式要求我创建一个下拉菜单,但我根本不允许更改HTML代码,所以基本上我被要求创建一个只有CSS的下拉式菜单.
<div id="global-nav"> <ul> <li><a href="#products">Products</a> <ul> <li><a href="#widgets">Widgets</a></li> <li><a href="#sites">Sites</a></li> <li><a href="#gadgets">Gadgets</a></li> </ul> </li> </ul>
但是也有不同的要求:
每个列表项之前不应有任何圆点或圆圈.
我想知道是否可以用CSS完成这项任务.
有什么办法可以用CSS做到这一点吗?
解决方法
垂直菜单,水平扩展
*{padding:0;margin:0;} body{font:16px/1 sans-serif} /*VERTICAL MENU*/ nav.vertical{ position:relative; width:200px; } /* ALL UL */ nav.vertical ul{ list-style: none; } /* ALL LI */ nav.vertical li{ position:relative; } /* ALL A */ nav.vertical a{ display:block; color:#eee; text-decoration:none; padding:10px 15px; background:#667; transition:0.2s; } /* ALL A HOVER */ nav.vertical li:hover > a{ background:#778; } /* INNER UL HIDE */ nav.vertical ul ul{ position:absolute; left:0%; top:0; width:100%; visibility:hidden; opacity:0; transition: transform 0.2s; transform: translateX(50px); } /* INNER UL SHOW */ nav.vertical li:hover > ul{ left:100%; visibility:visible; opacity:1; transform: translateX(0px); }
<nav class="vertical"> <ul> <li><a href="">Home</a></li> <li><a href="#">Products +</a> <ul> <li><a href="#">Widgets</a></li> <li> <a href="#">Sites +</a> <ul> <li><a href="#">Site 1</a></li> <li><a href="#">Site 2</a></li> </ul> </li> <li> <a href="#">Gadgets +</a> <ul> <li><a href="#">Gadget 1</a></li> <li><a href="#">Gadget 2</a></li> </ul> </li> </ul> </li> <li><a href="">Contact</a></li> </ul> </nav>
垂直菜单(仅限手机)
这个最适合移动设备(较小的屏幕CSS),否则显示/隐藏将会带来用户体验
*{padding:0;margin:0;} body{font:16px/1 sans-serif} /*VERTICAL MENU*/ nav.vertical{ position:relative; background:#667; } /* ALL UL */ nav.vertical ul{ list-style: none; } /* ALL LI */ nav.vertical li{ position:relative; } /* ALL A */ nav.vertical a{ display:block; color:#eee; text-decoration:none; padding:10px 15px; transition:0.2s; } /* ALL A HOVER */ nav.vertical li:hover > a{ background:#778; } /* INNER UL HIDE */ nav.vertical ul ul{ background:rgba(0,0.1); padding-left:20px; transition: max-height 0.2s ease-out; max-height:0; overflow:hidden; } /* INNER UL SHOW */ nav.vertical li:hover > ul{ max-height:500px; transition: max-height 0.25s ease-in; }
<nav class="vertical"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Services +</a> <ul> <li><a href="#">Service 1</a></li> <li><a href="#">Service 2</a></li> <li><a href="#">Service 3</a></li> </ul> </li> <li><a href="#">Products +</a> <ul> <li><a href="#">Widgets</a></li> <li> <a href="#">Sites +</a> <ul> <li><a href="#">Site 1</a></li> <li><a href="#">Site 2</a></li> </ul> </li> <li><a href="#">Gadgets +</a> <ul> <li><a href="#">Gadget 1</a></li> <li><a href="#">Gadget 2</a></li> </ul> </li> </ul> </li> <li><a href="">Contact</a></li> </ul> </nav>