私はcssのコーディングが初めてで、私の問題に関連する提案された回答を試しましたが、何も機能しません。助けていただければ幸いです。利用可能な幅全体をカバーするコンテナーの背景を保持しながら、メニューをページの中央に配置したい...
ここに私のhtmlコードがあります:
<div id="nav">
<li><a href="index.htm">Home</a></li>
<li><a href="about.htm">About</a>
<ul>
<li><a href="history.htm">History</a></li>
<li><a href="about.htm#mission">Mission</a></li>
<li><a href="about.htm#bod">Board of Directors</a></li>
<li><a href="location.htm">Location</a></li>
</ul>
<li><a href="SFO.htm">Facilities & Services</a>
<ul>
<li><a href="#">Services >></a>
<ul>
<li><a href="im.htm">Internal Medicine</a></li>
<li><a href="obg.htm">OB-Gyne</a></li>
<li><a href="pedia.htm">Pediatrics</a></li>
<li><a href="surgery.htm">Surgery</a></li>
<li><a href="dental.htm">Dental Care</a></li>
<li><a href="rehab.htm">Rehabilitation Medicine</a></li>
<li><a href="ent.htm">Otorhinolaryngology(ENT)</a></li>
</ul>
<li><a href="facilities.htm">Facilities >></a>
<ul>
<li><a href="lab.htm">Laboratory-Tertiary Level</a></li>
<li><a href="i&cc.htm">Intensive & Critical Care</a></li>
<li><a href="nnc.htm">Nursery & Neonatal Care</a></li>
<li><a href="picu.htm">Pediatric Intensive Care</a></li>
<li><a href="pcu.htm">Pulmonary Care</a></li>
<li><a href="ecc.htm">Ear Care Center</a></li>
<li><a href="hdu.htm">Hemodialysis Unit</a></li>
<li><a href="cardio.htm">Cardiac Diagnostics</a></li>
<li><a href="rd.htm">Radiology Diagnostics</a></li>
<li><a href="obg.htm">OB-Gyne Diagnostics</a></li>
</ul>
</ul>
</li>
<li><a href="hp.htm">Healthcare Plans</a>
<ul>
<li><a href="hmo.htm">Accredited HMOs</a></li>
<li><a href="executive.htm">Executive Checkup</a></li>
<li><a href="cc.htm">Credit Cards</a></li>
</ul>
</li>
<li><a href="hcp.htm">Doctors</a>
<ul>
<li><a href="#">""</a></li>
</ul>
</li>
<li><a href="career.htm">Careers</a></li>
<li><a href="archive.htm">Archive</a></li>
<li><a href="faq.htm">FAQ</a></li>
<li><a href="faq.htm">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
そして私のCSSコード:
#nav {
Z-INDEX: 10;
text-align:center;
width: 100%;
height: 20px;
background: green;
position: relative;
padding:3px;
font-size: 13px;
list-style-type:none;
list-style-position:outside;
display:inline-block;
font-weight: bold;
line-height:1.5em;
float: none;
}
#nav-wrapper {
text-align: center;
}
#nav ul{
Z-INDEX: 10;
text-align:center;
position:relative;
width: 1000px;
display:inline-block;
margin:0;
padding:0;
background: none;
list-style-type:none;
list-style-position:outside;
line-height: 1.7em;
font-size: 13px;
float: none;
}
#nav li li{
Z-INDEX: 10;
text-align:left;
display:inline-block;
margin:0;
padding:0;
font-weight: normal;
list-style-position:outside;
border-bottom: 0.1em solid white;
color: #fff;
}
#nav a:link, #nav a:visited{
display:block;
padding:0px 5px;
color:#fff;
text-decoration:none;
background: green;
}
#nav ul a:hover{
Z-INDEX: 999;
background: light-green;
color: yellow;
position: relative;
}
#nav li ul a:hover{
Z-INDEX: 999;
background: green;
color: yellow;
position: relative;
}
#nav li li a:hover{
Z-INDEX: 999;
background: light-green;
color: yellow;
font-weight: bold;
position: relative;
}
#nav li a:hover{
background: light-green;
color: yellow;
Z-INDEX: 999;
position: relative;
}
#nav a:active{
color: yellow;
font-weight: bold;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:14em;
top:1.3em;
display:none;
}
#nav li ul a{
width:14.65em;
float:left;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:14.65em;
margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}