css菜单设计问题帮助

本文介绍了css菜单设计问题帮助的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ heyy .. 我在这个链接中尝试菜单栏： - http://www.cssportal.com/css3-menu-generator/ [ ^ ] 在这个菜单中只有父菜单..我想添加一个子菜单，它显示在旁边.. 我试过但失败了旁边的儿童菜单 这是我的代码; - < ul id = menu-bar > < li > < a href = ＃ > 安全性< / a > < ul > < li > < a href =' 〜/ ContentPages / PrivilegeManagement /AddPrivileges.aspx?MenuId=2'> 特权管理< / a > < ul > < li > < a href =' 〜/ ContentPages / PrivilegeManagement / AddPrivileges.aspx？ MenuId = 2' > 添加权限< / a > < / li > < li > < a href =' 〜/ ContentPages / PrivilegeManagement / SearchPrivileges.aspx？MenuId = 3' > 搜索权限< / a > < / li > < / ul > < / li > < li > < a href =' 〜/ ContentPages / PrivilegeManagement / SearchPrivileges.aspx？MenuId = 3' > 用户管理< / a > < ul > < li > < a href =' 〜/ ContentPages / UserManagement / AddUser.aspx？MenuId = 5' > 添加用户< / a > < / li > < li > < a href =' 〜/ ContentPages / UserManagement / SearchUser.aspx？MenuId = 6' > 搜索用户< / a > < / li > < li > < a href =' 〜/ ContentPages / UserManagement / ChangePassword.aspx？MenuId = 13' > 更改密码< / a > < / li > < / ul > < / li > < / ul > < / li > < li > < a href =' ＃' > Masters < / a > < ul > < li > < a href =' 〜/ ContentPages /Location/Location.aspx?MenuId=8'> 添加位置< / a > < / li > < li > < a href =' 〜/ ContentPages / Location / LocationSearch.aspx？MenuId = 9' > 搜索位置< / a > < / li > < / ul > < / li > < / ul > 解决方案 试试这个代码 #coolMenu， #coolMenu ul { list-style：none; } #coolMenu { 浮动：左; } #coolMenu> li { float：left; } #coolMenu li a { display：block; 身高：2em; 行高：2em; 填充：0 1.5em; text-decoration：没有; } #coolMenu ul { 职位：绝对; 显示：无; z-index：999; } #coolMenu ul li a { 宽度：100px; } #coolMenu li：hover ul.noJS { display：block; } / *主菜单 ----- ------------------------------------- * / #coolMenu { font-family：Arial; font-size：12px; background：＃2f8be8; } #coolMenu> li>一个{ 颜色：#fff; font-weight：bold; } #coolMenu> li：hover>一个{ 背景：＃f09d28; 颜色：＃000; } / *子菜单 ---------------------------- -------------- * / #coolMenu ul { 背景：＃f09d28; } #coolMenu ul li a { 颜色：＃000; } #coolMenu ul li：hover一个{ 背景：＃ffc97c; } （function（）{ （'＃coolMenu'）。find（'& gt; li'）。hover（function（）{ heyy.. I try a menu bar in this link :- http://www.cssportal.com/css3-menu-generator/[^]In this menu have only parent menu .. I want to add a child menu and it display in side..I tried but failed get the child menu on sidehere is my code ;-<ul id="menu-bar"> <li><a href="#">Security</a> <ul> <li><a href='~/ContentPages/PrivilegeManagement/AddPrivileges.aspx?MenuId=2'>Privilege Management</a> <ul> <li><a href='~/ContentPages/PrivilegeManagement/AddPrivileges.aspx?MenuId=2'>Add Privilege</a></li> <li><a href='~/ContentPages/PrivilegeManagement/SearchPrivileges.aspx?MenuId=3'>Search Privilege</a> </li> </ul> </li> <li><a href='~/ContentPages/PrivilegeManagement/SearchPrivileges.aspx?MenuId=3'>User Management</a> <ul> <li><a href='~/ContentPages/UserManagement/AddUser.aspx?MenuId=5'>Add User</a></li> <li><a href='~/ContentPages/UserManagement/SearchUser.aspx?MenuId=6'>Search User</a></li> <li><a href='~/ContentPages/UserManagement/ChangePassword.aspx?MenuId=13'>Change Password</a></li> </ul> </li> </ul> </li> <li><a href='#'>Masters</a> <ul> <li><a href='~/ContentPages/Location/Location.aspx?MenuId=8'>Add Location</a></li> <li><a href='~/ContentPages/Location/LocationSearch.aspx?MenuId=9'>Search Location</a></li> </ul> </li> </ul> 解决方案 try this code#coolMenu,#coolMenu ul {list-style: none;}#coolMenu {float: left;}#coolMenu > li {float: left;}#coolMenu li a {display: block;height: 2em;line-height: 2em;padding: 0 1.5em;text-decoration: none;}#coolMenu ul {position: absolute;display: none;z-index: 999;}#coolMenu ul li a {width: 100px;}#coolMenu li:hover ul.noJS {display: block;}/* Main menu------------------------------------------*/#coolMenu {font-family: Arial;font-size: 12px;background: #2f8be8;}#coolMenu > li > a {color: #fff;font-weight: bold;}#coolMenu > li:hover > a {background: #f09d28;color: #000;}/* Submenu------------------------------------------*/#coolMenu ul {background: #f09d28;}#coolMenu ul li a {color: #000;}#coolMenu ul li:hover a {background: #ffc97c;}(function () {('#coolMenu').find('&gt; li').hover(function () { 这篇关于css菜单设计问题帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！