Question

css问题，这块导航菜单应该怎么做 ？求思路，有具体代码最好

Answer 1

看一下 jQuerymobile.com 上的样例，它的默认效果就是类似这个，它是用 ul + li 做出来的。我们看它最终的 html5 源码和 css 3 是什么样的，复制过来用就好了。

在浏览器的 Developer tools 中不断的试验看效果，合适时就保存下来成为一个 CSS 文件就好了。

比如 Google Chrome 浏览器中就可以像图片中这样调试 CSS，在 elementl.style 中调整我们的 CSS 看效果（先用 放大镜来选中一个元素节点）。

追问

我不是很懂你的意思呢

你发的图片是很么意思，能看到图片内部的代码吗？

追答

先去 jquerymobile.com 找一个 demos ，它有 list view ，

http://demos.jquerymobile.com/1.4.5/listview/

那里面就是你的图片中的菜单效果，我们在浏览器中观察它的 html5 源码并在我的图片中的 右边那个 developer tools 窗口中观察它的 css 的 class name 是什么，然后去它的 jquerymobile css 文件中复制那些效果。

比如我的图片中 有些 css 被划掉了，那是因为它的优先级不如另外一个 css 规则，我们在 Computed 窗口中看它最张生效的 css 效果是什么样的，在这个效果的右边会有灰色的字表示这个效果是由哪条 css 提供的，比如我的图片中有一个 "user agent stylesheet" ，这表示浏览器默认的效果，换句话说就是 html / css 默认的效果,只要不是 user agent stylesheet 而是一个 css 表达式的话，那就是某个 css 文件中的规则名称。

在我的图片中，我在右边的窗口中的 "element.style" 窗口中输入了 css 配置让左边的效果变化了。我们这样调试一段 css 就能得到我们想要的。因为 jquerymobile.com 上提供的是菜单效果，但它并没有你想要的黑色背景，我们需要这样去定制黑色背景来。

Answer 2

<nav id="nav-y">
    <strong>用户手册</strong>
    <ul>
        <li><a href="####">概览</a></li>
        <li><a href="####">共享与打印</a></li>
        <li><a href="####">主屏幕</a></li>
        <li><a href="####">文件夹</a></li>
        <li><a href="####">备份与恢复</a></li>
    </ul>
</nav>

body{margin: 20px;}

a{text-decoration: none;}

ul, ol, li{
    list-style:none outside none;
    margin: 0;
    padding: 0;
}

#nav-y , #nav-y a{
    font-family: "微软雅黑";
    color: #fff;
}

#nav-y{
    width: 300px;
    background: url(../img/navbg.gif);
    border-radius: 20px;
    font-size: 16px;
}

#nav-y strong{
    width: 275px;
    font-size: 18px;
    margin: 0;
    padding: 0;
    line-height: 50px;
}

#nav-y a{
    line-height: 46px;
    display: block;
    width: 275px;
}

#nav-y li{background: url(../img/arr.gif) no-repeat 270px 20px;}

#nav-y a:hover{background: url(../img/navhover.gif);border-top: none;line-height: 47px;}

#nav-y strong , #nav-y a{padding-left: 25px;}

#nav-y h1 , #nav-y a{border-bottom: 1px #000 solid;}

#nav-y a{border-top: 1px #323232 solid;}

#nav-y  li:last-child a{border-bottom: none;}

#nav-y  li:last-child a:hover{border-radius: 0 0 20px 20px;line-height: 47px;}