樣式下拉菜單元素

Question

我想樣式下導航的水平（例如，增加下拉的寬度），但找不到相關的選擇器更改。該網站是http://www.mattmaclennan.co.uk/a2

舉例：在「新摩托車」降了下來，我想增加寬度，然後將側翻的元素在一旁

我知道要使用的代碼，但我只是無法找到相關選擇器來執行此操作。把我的頭髮拉出來！

感謝您的任何建議提前！

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的地方使用。