HTMLドロップダウンメニューが機能しません

Question

私はこのウェブサイトhttp://www.aoaluminiumproducts.com.au/で作業していますが、ドロップダウン機能が動作していないようです。私は、 "サービス"タブをサブナビゲーション1リンクなどのドロップダウンアイテムにしたいと思います（私は名前を変更します）。

HTML/CSSのSOURCE

<div id="menubar"> 
<ul id="menu"><!-- put class="selected" in the li tag for the selected page - to highlight which page you're on --> 
<li class="selected"><a href="index.html">Home</a> 
<div class="c1"></div> 
</li> 
<li><a href="services.html">Our Services</a></li> 

<ul> 
         <li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li> 
         <li><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li> 
         <li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li> 
         <li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li> 

        </ul> 


<li><a href="gallery.html">Gallery</a></li> 
<li><a href="contact.html">Contact Us</a></li> 
</ul> 
</div> 

html 
{ height: 100%;} 

* 
{ margin: 0; 
    padding: 0;} 

body 
{ font: 0.8em/1.5 "arial",sans-serif; 
    color: #303030; 
    background: #990000; 
    } 

p 
{ padding: 0 0 20px 0; 
    line-height: 1.7em;} 

img 
{ border: 0;} 

h1, h2, h3, h4, h5, h6 
{ font: normal 175% 'century gothic', arial, sans-serif; 
    color: #43423F; 
    margin: 0 0 15px 0; 
    padding: 15px 0 5px 0;} 

h2 
{ font: normal 200% 'century gothic', arial, sans-serif; 
    color: #1293EE;} 

h4, h5, h6 
{ margin: 0; 
    padding: 0 0 5px 0; 
    font: normal 120% arial, sans-serif; 
    color: #1293EE;} 

h5, h6 
{ font: italic 95% arial, sans-serif; 
    padding: 0 0 15px 0; 
    color: #000;} 

h6 
{ color: #362C20;} 

a, a:hover 
{ outline: none; 
    text-decoration: underline; 
    color: #CC0000;} 

a:hover 
{ text-decoration: none;} 

.left 
{ float: left; 
    width: auto; 
    margin-right: 10px;} 

.right 
{ float: right; 
    width: auto; 
    margin-left: 10px;} 

.center 
{ display: block; 
    text-align: center; 
    margin: 20px auto;} 

blockquote 
{ margin: 20px 0; 
    padding: 10px 20px 0 20px; 
    border: 1px solid #E5E5DB; 
    background: #FFF;} 

ul 
{ margin: 2px 0 22px 17px;} 

ul li 
{ list-style-type: circle; 
    margin: 0 0 6px 0; 
    padding: 0 0 4px 5px;} 

ol 
{ margin: 8px 0 22px 20px;} 

ol li 
{ margin: 0 0 11px 0;} 

#main, #logo, #menubar, #site_content, #footer 
{ margin-left: auto; 
    margin-right: auto;} 

#header 
{ background: #990000; 
    height: 240px;} 

#logo 
{ width: 810px; 
    position: relative; 
    height: 120px; 
    background: #150517; url(logo.png) no-repeat;} 

#logo #logo_text 
{ position: center; 
    top: 20px; 
    left: 0;} 

#logo h1, #logo h2 
{ font: normal 300% 'century gothic', arial, sans-serif; 
    border-bottom: 0; 
    text-transform: none; 
    margin: 0;} 

#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover 
{ padding: 22px 0 0 0; 
    color: #FFF; 
    letter-spacing: 0.1em; 
    text-decoration: none;} 

#logo_text h1 a .logo_colour 
{ color: #FAF700;} 

#logo_text h2 
{ font-size: 100%; 
    padding: 4px 0 0 0; 
    color: #DDD;} 

#menubar 
{ width: 877px; 
    height: 72px; 
    padding: 0; 
    background: #150517; url(menu.png) repeat-x; 
    } 

ul#menu, ul#menu li 
{ float: left; 
    margin: 0; 
    padding: 0;} 

ul#menu li 
{ list-style: none;} 

ul#menu li a 
{ letter-spacing: 0.1em; 
    font: normal 100% 'lucida sans unicode', arial, sans-serif; 
    display: block; 
    float: left; 
    height: 37px; 
    padding: 29px 26px 6px 26px; 
    text-align: center; 
    color: #FFF; 
    text-transform: uppercase; 
    text-decoration: none; 
    background: transparent;} 

ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover 
{ color: #FFF; 
    background: #451C1B url(menu_select.png) repeat-x;} 

#site_content 
{ width: 900px; 
    overflow: hidden; 
    margin: 0 auto 0 auto; 
    padding: 20px 24px 20px 37px; 
    background: #DCDCDC;} 

.sidebar 
{ float: right; 
    width: 200px; 
    padding: 0 15px 20px 15px;} 

.sidebar ul 
{ width: 178px; 
    padding: 4px 0 0 0; 
    margin: 4px 0 30px 0;} 

.sidebar li 
{ list-style: none; 
    padding: 0 0 7px 0; } 

.sidebar li a, .sidebar li a:hover 
{ padding: 0 0 0 40px; 
    display: block; 
    background: transparent url(link.png) no-repeat left center;} 

.sidebar li a.selected 
{ color: #444; 
    text-decoration: none;} 

#content 
{ text-align: left; 
    width: 595px; 
    padding: 0;} 

#content ul 
{ margin: 2px 0 22px 0px;} 

#content ul li 
{ list-style-type: none; 
    background: url(bullet.png) no-repeat; 
    margin: 0 0 6px 0; 
    padding: 0 0 4px 25px; 
    line-height: 1.5em;} 

#footer 
{ width: 878px; 
    font: normal 100% 'lucida sans unicode', arial, sans-serif; 
    height: 33px; 
    padding: 24px 0 5px 0; 
    text-align: center; 
    background: #000000; 
    color: #b1b1b1; 
    text-transform: uppercase; 
    letter-spacing: 0.1em;} 

#footer a 
{ color: #FFF; 
    text-decoration: none;} 

#footer a:hover 
{ color: #FFF; 
    text-decoration: underline;} 

.search 
{ color: #5D5D5D; 
    border: 1px solid #BBB; 
    width: 134px; 
    padding: 4px; 
    font: 100% arial, sans-serif;} 

#colours 
{ height: 0px; 
    text-align: right; 
    padding: 66px 16px 0px 300px;} 

.form_settings 
{ margin: 15px 0 0 0;} 

.form_settings p 
{ padding: 0 0 4px 0;} 

.form_settings span 
{ float: left; 
    width: 200px; 
    text-align: left;} 

.form_settings input, .form_settings textarea 
{ padding: 5px; 
    width: 299px; 
    font: 100% arial; 
    border: 1px solid #E5E5DB; 
    background: #FFF; 
    color: #47433F;} 

.form_settings .submit 
{ font: 100% arial; 
    border: 1px solid; 
    width: 99px; 
    margin: 0 0 0 212px; 
    height: 33px; 
    padding: 2px 0 3px 0; 
    cursor: pointer; 
    background: #7D0F0F; 
    color: #FFF;} 

.form_settings textarea, .form_settings select 
{ font: 100% arial; 
    width: 299px;} 

.form_settings select 
{ width: 310px;} 

.form_settings .checkbox 
{ margin: 4px 0; 
    padding: 0; 
    width: 14px; 
    border: 0; 
    background: none;} 

.separator 
{ width: 100%; 
    height: 0; 
    border-top: 1px solid #D9D5CF; 
    border-bottom: 1px solid #FFF; 
    margin: 0 0 20px 0;} 

table 
{ margin: 10px 0 30px 0;} 

table tr th, table tr td 
{ background: #DCDCDC; 
    color: #DCDCDC; 
    padding: 7px 4px; 
    text-align: left;} 

table tr td 
{ background: #DCDCDC; 
    color: #DCDCDC; 
} 

#testimonials{ 
    width: 133px; 
    padding: 45px 45px 35px; 
    background:url('../img/quotes.png') no-repeat 20px 20px rgba(178,178,169,0.2); 
    min-height:90px; 

    -moz-border-radius:12px; 
    -webkit-border-radius:12px; 
    border-radius:12px; 
} 
#testimonials ul{ list-style:none;} 
#testimonials p.text{ font-size:11px;} 

#testimonials p.author{ 
    color: #878787; 
    font-size: 16px; 
    font-style: italic; 
    text-align: left; 

} 

#testimonials p.author a, 
#testimonials p.author a:visited{ 
    color:#6aa42a; 
} 

Answer 1

私はあなたのhtmlを使用してのみul a

ため、ul要素のhoverが表示されていない、あなたは次のCSSを持っている必要があります。

ul#menu ul#sub-menu { 
display: none; 
} 

ul#menu ul#sub-menu:hover { 
display: inline-block; // or display:inline if you want them horizontally positioned 
} 

id=sub-menuまたはそれにラベルを付けるas、html要素には、それはOKを次に動作する必要があります。

Answer 2

[OK]を、これを試してみてください。

HTML：

<div id="menubar"> 
<ul id="menu"> 
<li class="selected"><a href="index.html">Home</a> 
<div class="c1"></div> 
</li> 
<li><a href="services.html">Our Services</a> 
// Take out the <li> from the submenu and add a span 

    <span><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></span> 
    <span><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></span> 
    <span><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></span> 
    <span><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></span> 
</li> 
<li><a href="gallery.html">Gallery</a></li> 
<li><a href="contact.html">Contact Us</a></li> 
</ul> 

CSS：

ul#menu { 
list-style: none; 
position: relative; 
.. // other styling you want like color, font spacing etc. 
} 
ul#menu li { 
float: left; 
.. // other styling like border, text color, etc. 
} 

ul#menu li a { 
display: inline; // you have the menu running horiz on your page 
.. // other stylings 
} 

ul#menu li span { 
float: left; 
position: absolute; 
display: none; 
} 

ul#menu li:hover span { 
display: block; // list submenu vertically 
} 

私はこれをテストしていませんが、それはあなたが必要なものに近いものでなければなりません。

Answer 3

解決される問題でフィドルを参照してください：http://jsfiddle.net/tDAAs/1/

デモ：あなたは車輪の再発明しているhttp://jsfiddle.net/tDAAs/1/embedded/result/