Spry下拉菜单的CSS样式详解

点击　窗口>CSS样式，打开CSS样式面板，点击样式面板上的＂全部＂按钮，快速打开SpryMenuBarHorizontal.css．
1.      水平菜单省缺是放置在页面的左边的，如果你想将它放到页面的右边对齐，那么点击：ul.MenuBarHorizontal li,然后在下面的属性面板中，点击float项右边的下拉列表，将left换为right.现在菜单被对齐到页面的右边了．你也可以双击ul.MenuBarHorizontal li，在打开的CSS规则面板中设置菜单项的格式．
2.如果你想改变页面刚加载时的连接的背景和文本的颜色，那么你需要修改："ul.MenuBarHorizontal a."，如果你想修改当鼠标移到连接上时连接的背景和文本颜色，那么你应该修改："ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.Menu…."（注意如果你建立的是垂直的菜单，那么MenuBarHorizontal将是：MenuBarVertical）

3.Spry菜单省缺的字体是与boby或最近一层父级元素的字体是一样的．你可以修改"ul.MenuBarHorizontal."来设置．在CSS样式面板中双击"ul.MenuBarHorizontal."打开CSS规则设置面板，设置一个字体．


4.你可以通过修改："ul.MenuBarHorizontal li."来修改菜单项的宽度，省缺的宽度是８em，em是指的字母的宽度，用em作单位可以很好在让菜单项宽度去适应菜单项的内容．如果你的菜单项文字较多，你可以将宽度设大一点，使菜单项的内容排成一排．

6.如果你将主菜单的宽度调整成１０em的话，你应该将："ul.MenuBarHorizontal ul"和"ul.MenuBarHorizontal ul li." 中的宽度设为１０.２em，以保证子菜单与主菜单项一样宽．

差不多就这个样子了，其它的一些CSS样式你可以再设置看看．
点击＂实时视图＂按钮，你就可以测试你的菜单了：


在该网页相同目录下会产生一个SpryAssets目录，里面会有一个SpryMenuBarHorizontal.css文件，打开这个文件，可以进一步学习理解CSS网页设计．当然你也可以精简这个css文件，以优化网页的性能．

转载于:https://www.cnblogs.com/lilan/archive/2011/10/24/2222458.html