html - 样式化下拉菜单元素

Question

我正在尝试为导航的下拉级别设置样式（例如，增加下拉的宽度），但找不到要更改的相关选择器。该网站是http://www.mattmaclennan.co.uk/a2

示例：在“New Motorcycles”下拉菜单中，我想增加宽度，然后将翻转元素移到一边

我知道要使用的代码，但我只是找不到相关的选择器来执行它。在这里扯我的头发！

感谢您提前提供任何建议！

Answer 1

也许这会有所帮助？http://jsfiddle.net/Xtu9t/

<nav>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">New Motorcycles</a>
        <ul>
            <li><a href="#">Adventure</a></li>
            <li><a href="#">125cc</a></li>
            <li><a href="#">foofoo</a>
                <ul>
                    <li><a href="#">subsub</a></li>
                    <li><a href="#">subsub2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Used motorcycles</a>
        <ul>
            <li><a href="#">Motor 1</a></li>
            <li><a href="#">Motor 2</a></li>
        </ul>
    </li>
    <li><a href="#">etc</a></li>
</ul>

它的基本下拉菜单，所以你必须自己做更多的造型。但这是CSS

body {    
font-family: Helvetica, sans-serif;
font-size: 14px;
line-height: 10px;
}

nav ul ul {
display: none;
}
nav ul li:hover > ul {
    display: block;
}


nav ul {
     background: red; 
     list-style: none;
     position: relative;
    display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}

nav ul li {
    float: left;

}
    nav ul li:hover {
        background: black;
    }
        nav ul li:hover a {
            color: #fff;
        }

    nav ul li a {
        display: block;
        padding: 25px 20px;
        color: #fff;
        text-decoration: none;

    }


nav ul ul {
    background: red;
    padding: 0;
    position: absolute;
    top: 100%;
}
    nav ul ul li {
        float: none;
        position: relative;
    }
        nav ul ul li a {
            padding: 15px 20px;
            color: #fff;
        }    
            nav ul ul li a:hover {
                background: #000;
            }

nav ul ul ul {
    position: absolute;
    left: 100%;
    top:0;
}

如您所见，没有使用任何类或ID。​</p>