商品顶部下拉菜单

<style>
/*阿里图库*/
@font-face {font-family: ‘iconfont‘;
    src: url(‘iconfont/iconfont.eot‘); /* IE9*/
    src: url(‘iconfont/iconfont.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
    url(‘iconfont/iconfont.woff‘) format(‘woff‘), /* chrome、firefox */
    url(‘iconfont/iconfont.ttf‘) format(‘truetype‘), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url(‘iconfont/iconfont.svg#iconfont‘) format(‘svg‘); /* iOS 4.1- */
}.iconfont{
    font-family:"iconfont" !important;
    font-size:20px;
    font-style:normal;
      color: #fff;
   padding-right:10px;
   }
}*{
   margin:0;
   padding:0;
}a{
text-decoration: none;
}body{
	margin: 0;
	padding: 0;
}
#logo{
	width:100%;
	height:50px;
	background: #000;
	margin-top:100px;
	z-index: 12
}
#logo ul{
	width:1000px;
	height: 50px;
	margin: 0 auto;
	}
#logo ul li{
	height:50px;
	list-style: none;
	float:left;
	color: #fff;
	font-size:16px;
	font-family:‘微软雅黑‘;
	line-height: 50px;
	}
	#logo ul li a{
		color:#fff;
		text-decoration: none;
		display: block;
		padding: 0 30px;
	}
	/*#logo ul li a:hover{
            background: #ff6699;

	}*/
	#logo ul li.first
	{
		width:200px;
		/*background:#ff6699;*/
		/*text-indent: 70px;*/
		text-align:center;
	}
.on{
	background: #ff6699;
}

#logo ul li.first .menu{

	width:1000px;
	height: 300px;
	background:#fff;
	position:absolute;/*绝对定位*/
	display: none;/*显示隐藏*/
	box-shadow: 0px 0px 15px #000;/*图层阴影*/
z-index: 1
}
/*#logo ul li.first:hover .menu{
	display: block;
}*/
#logo ul li .menu .content-l a,#logo ul li .menu .content-b a,#logo ul li .menu .content-r a{
       text-decoration: none;
       font-size: 14px;
       color:#000;
       border-bottom:2px solid #000;
       padding-left: 0
	}
	#logo ul li .menu .content-l,#logo ul li .menu .content-b,#logo ul li .menu .content-r{
		float:left;
		/*margin: 0 30px;*/
		margin-left: 60px;
		width:250px;
		height:300px;
		text-align:left;
	}
	#logo ul li .menu .content-l .electrical,#logo ul li .menu .content-b .electrical,#logo ul li .menu .content-r .electrical{
		width:100%;
		min-height:75px;
		text-align: left;
		display: inline-block;
		text-indent: 0;
		padding-left:0;
		border-bottom:1px solid #ddd;
	}
	#logo ul li .menu .content-l .electrical li,#logo ul li .menu .content-b .electrical li,#logo ul li .menu .content-r .electrical li{
		list-style: none;
		float: left;
		margin: 0 5px;
		font-size:12px;
		color:#ddd;
		text-indent: 0;
		height:25px;
	}
</style>
时间: 2024-11-09 10:49:04

商品顶部下拉菜单的相关文章

附加:商品类别下拉菜单动态化

商品类别下拉菜单动态化 数据库中建立TypeGoods表(typeId,typeName),字符串 创建商品类型Bean,TypeGoods.java package mybean; public class TypeGoods { private String typeId; private String typeName; public String getTypeId() {  return typeId; } public void setTypeId(String typeId) { 

【android开发】使用PopupWindow实现页面点击顶部弹出下拉菜单

没有太多花样,也没有很复杂的技术,就是简单的PopupWindow的使用,可以实现点击弹出一个自定义的view,view里可以随便设计,常用的可以放一个listview. demo中我只是一个点击展示,简单的使用了fade in out的动画效果,也没有精美的图片资源,看着也丑,不过这么短的时间,让你掌握一个很好用的技术,可以自己扩展,不很好么? 废话不说了,直接上代码: MainActivity.java [java] view plaincopy public class MainActiv

(实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术   程序开发   数据库   小类: 实现的效果就是当选择大类时,小类下拉框里的选项内容也随着改变.实现原理:根据大类的值,通过jQuery把值传给后台PHP处理,PHP通过查询MySQl数据库,得到相应的小类,并返回JSON数据给前端处理. XHTML 首先我们要建立两个下拉选择框,第一个是大类

制作下拉菜单(PopupList)

怎样判断是否应当使用下拉菜单 下拉菜单,就是将一系列的选项隐藏,通过单击某一个控件将会弹出一个包含这些选项的列表,在其中选择想要的选项.这样做不但可以节省屏幕空间,也可以让用户在进行选择时更加方便快捷. 下拉菜单本质上还是一个单选框,与Toggle的功能有一些类似,对于下拉菜单玩家必须选择一个选项(有一个默认的初始选项),在同一时间也只能选择一个选项(单选性质).在游戏开发过程中,如果碰到了以下特点的需求,就可以考虑用下拉菜单了. (1)有一系列选项需要玩家做出选择,这些选项是有限多的. (2)

为joomla加入?下拉菜单的方法

用 Joomla! 建站的大多数站长都须要在站点前台使用下拉菜单(dropdown menu),或者叫弹出菜单(slide menu),由于这样能够在有限的页面空间上公布很多其它的导航菜单,而且能够进行分组,方便訪客迅速找到所需信息.因此,我们也注意到了,差点儿每一款收费模板(commercial template)都提供了下拉菜单功能.假设你使用 Joomla! 1.5 核心自带的 rhuk_milkyway 模板,就会发现这个模板却没有提供下拉菜单功能.那么,是否能用 Joomla 核心自带

android利用PopupWindow实现点击工具栏弹出下拉菜单

1.概述 本文将介绍如何利用PopupWindow实现点击屏幕顶部工具栏按钮弹出下拉菜单的功能.先上图: 2.代码实现 首先是activity_main.xml布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width=&qu

创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来.   Bootstrap提供了不少的前端UI组件.带下拉菜单的文本框就是其中之一,效果图如下(真要自己完全设计,还得费一番功夫)   关于该组件的详情参看Bootstrap官网.带下拉菜单的文本框   看到上面的效果图,使我想到WinForm编程中的DropDownList控件.不过,和DropDownList控件相比,还缺少以下内容 1.当点击菜单中的

Android自定义控件:仿美团下拉菜单及相关代码优化

背景 最近的项目中用到了类似美团中的下拉多选菜单,在实际开发过程中,也发现了一些问题,主要归纳如下: 1.当菜单较为复杂时,如果不能设计好代码逻辑,将造成控件难于维护 2.美团菜单可以连续点击顶部tab,切换不同菜单,而我使用的popupWindow似乎在展开一个菜单时点击其他tab,菜单就会收回. 本文将针对如上两个问题进行一些讨论,最终给出较为合理的解决方案. 程序结构 由于菜单涉及多级多项,如果把UI和其他逻辑堆在一起写,必然会造成代码过于庞大,甚至没有办法扩展,更谈不上及时变更需求. V

为joomla加入下拉菜单的方法

用 Joomla! 建站的大多数站长都须要在站点前台使用下拉菜单(dropdown menu),或者叫弹出菜单(slide menu),由于这样能够在有限的页面空间上公布很多其它的导航菜单,而且能够进行分组,方便訪客迅速找到所需信息.因此,我们也注意到了,差点儿每一款收费模板(commercial template)都提供了下拉菜单功能.假设你使用 Joomla! 1.5 核心自带的 rhuk_milkyway 模板,就会发现这个模板却没有提供下拉菜单功能.那么,是否能用 Joomla 核心自带