html - 下拉列表 html 和 css

Question

我正在为自己做一个网站，我想做下拉菜单，你知道当你将鼠标悬停在“联系人”上时，它会删除其他选项，如“Web 开发人员”和“支持”等等，但是我不知道我做错了什么......这是原始代码:(CSS)

body {
    margin: 0;
    padding: 0;
    background: #000000 url(images/img12.jpg) repeat top left;
    text-align: justify;
    font: 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #7F7772;
}

form {
    margin: 0;
    padding: 0;
}

fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

input, textarea {
    padding: 5px;
    border: 1px solid #626262;
    font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
}

h1, h1 a, h2, h2 a, h3, h3 a {
    margin: 0;
    text-decoration: none;
    font-weight: normal;
    color: #AAFF00;
}

h1 {
    letter-spacing: -3px;
    font-size: 2.6em;
}

h2 {
    letter-spacing: -2px;
    font-size: 2em;
}

h3 {
    margin-bottom: 2em;
    font-size: 1em;
    font-weight: bold;
}

p, ol, ul {
    margin: 0 0 2em 0;
    line-height: 200%;
}

blockquote {
    margin: 0 0 0 1.5em;
    padding-left: 1em;
    border-left: 5px solid #DDDDDD;
}

a {
    color: #AAFF00;
}

a:hover {
    text-decoration: none;
    color: #FFFFFF;
}

img {
    border: none;
}

img.left {
    float: left;
    margin: 8px 20px 0px 0px;
    border: 2px solid #434343; 
}


/* Header */

#wrapper {
    background: url(images/img14.jpg) no-repeat center top;
}

#header {
    width: 900px;
    height: 128px;
    margin: auto;
}

header #logo h1, #logo p {
        margin: 0 auto;
    float: left;
    color: #AAFF00;
}

header #logo h1 {
    height: 88px;
    padding: 20px 90px 0 0;
    font-size: 4em;
}

#logo p {
    margin: 0 0 0 -80px;
    padding: 55px 0 0 0;
    line-height: normal;
    letter-spacing: -1px;
    font-size: 1.2em;
    font-weight: bold;
}

#logo a {
    text-decoration: none;
    color: #AAFF00;
    font-weight: bold;
}

#logo img {
    margin: -28px;
    width:80px ;
    height:80px ;
}

/* Meni */

#menu {
    width: 950px;
    height: 60px;
    margin: 0 auto;
    background: #6AA2FD url(images/img04.gif);
}

#menu ul {
    margin: 0 auto;
    padding: 0 auto;
    list-style: none;
}

#menu li {
    display: inline;
    text-transform: uppercase;
}

#menu a {
    display: block;
    float: left;
    background: url(images/img15.gif) no-repeat right 100%;
    padding: 18px 30px 0 30px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: bold;
    color: #FFFFFF;
        margin: 0;
}

#menu a:hover {

        margin: 0 auto;
        padding: 0 auto;
    height: 60px;
    background: url(images/img16.gif) repeat-x right 30%;
    color: #000000;
}


#menu .current_page_item a {
    color: #FFFFFF;
        background: url(images/img16.gif) repeat-x right 30%;
}

/* Stran */

#page {
    width: 890px;
    margin: 0 auto;
    padding: 30px 0;
}

/* Oglasi */

#ads {
    float: right;
    width: 160px;
    padding: 0 0 0 20px;
}

/* Vsebina */

#content {
    float: left;
    width: 430px;
}

.post {
    margin-bottom: 50px;
}

.post .title {
}

.post .title h2 {
    font-size: 2.2em;
}

.post .title p {
    margin: 0;
    line-height: normal;
    color: #BABABA;
}

.post .title p a {
    color: #BABABA;
}

.post .entry {
    padding-top: 30px;
}

.post .links {
    width: 410px;
    height: 29px;
    margin: 0;
    padding: 6px 0 0 20px;
    background: #F3F3F3 url(images/img08.gif) no-repeat;
}

.post .links a {
    padding: 0 23px;
    text-decoration: none;
    font-weight: bold;
}

.post .links a:hover {
    text-decoration: underline;
}

.post .links .more {
    background: url(images/img09.gif) no-repeat;
}

.post .links .comments {
    background: url(images/img10.gif) no-repeat;
}

/* Footer */

#footer {
    clear: both;
    width: 950px;
    margin: 0 auto;
    padding: 30px 0;
    background: url(images/img11.gif) no-repeat;
}

#footer p {
    margin: 0 0 5px 0;
    text-align: center;
    line-height: normal;
    font-size: .9em;
}

#footer a {
    text-decoration: none;
}

 /* Pod menu */


 #nav{
    width: 950px;
    height: 60px;
    margin: 0 auto;
    background: #6AA2FD url(images/img04.gif);
}
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav a{

        display: block;
    float: left;
    background: url(images/img15.gif) no-repeat right 100%;
    padding: 18px 30px 0 30px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: bold;
    color: #FFFFFF;
}
#nav a:hover{

        text-decoration:underline;
        height: 60px;
    background: url(images/img16.gif) repeat-x right 30%;
    color: #000000;
}

#nav ul{
    background:#fff;
    background:rgba(255,255,255,0);
    position:absolute;
    left:-9999px; 



    margin: 0;
        padding: 0;
    list-style: none;
}
#nav ul li{
    padding-top:1px;
    float:none;
}
#nav ul a{
    white-space:nowrap; 
}
#nav li:hover ul{
    left:0;
}
#nav li:hover a{
    background:#6b0c36;
    text-decoration:underline;
}
#nav li:hover ul a{
    text-decoration:none;
}
#nav li:hover ul li a:hover{
    background:#333;
}

#nav .current_page_item a {
    color: #FFFFFF;
        background: url(images/img16.gif) repeat-x right 30%;
}

这是索引的 HTML 代码:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Moj svet</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <link href="mojcss.css" rel="stylesheet" type="text/css" >

        </head>
        <body>
            <div id="menu">
        <ul>
            <li><a href="index.html" class="current_page_item" >Domov</a>
            <li><a href="Igre.html">Igre</a></li>
            <li><a href="robotika.html">Robotika</a></li>
            <li><a href="about.html">O meni</a></li>
            <li><a href="contact.html">Kontakt</a></li>
        </ul>
    </div>     
            <div id="wrapper">
    <div id="header">
        <div id="logo">
                <p><img src="images/v8.jpg" alt="logotip"></p>
            <h1><a href="#">Welcome, to my world*</a></h1>
            <p>&nbsp;</p>
        </div>
        <div id="rss"></div>
    </div>
    <div id="page">
        <div id="ads"><img src="images/img2.png" alt="" width="220" height="600" /></div>
        <div id="content">
            <div class="post">
                <div class="title">
                    <h2><a href="#">Doma</a></h2>
                    <p>&nbsp;</p>
                </div>
                <div class="entry">
                    <p>To je domača stran, moje osebne spletne strani</p>
                </div>
            </div>
            <div class="post">
                <div class="title">
                    <h2><a href="#">Spoznajte me</a>            </h2>
                </div>
                <div class="entry">
                  <h3>Interaktivno</h3>
                  <blockquote>
                    <p>Spoznajte me, skozi mojo spletno stran, tukaj!.</p>
                  </blockquote>
                </div>
            </div>
        </div>
    </div>
                <div id="footer">
        <p>&copy;2013 Aljaž Šešo*. All Rights Reserved.</p>
</div>
</div>
        <div align=center></div>
    </body>
</html>

对不起，如果我的英语不好，我来自斯洛文尼亚。 http://jsfiddle.net/dbM8S/

Answer 1

首先将以下属性添加到“#menu li{}”

float:left;
position:relative;

在“#menu li{}”之后添加此 CSS

#menu ul ul {
width:220px;
display:none;
position:absolute;
left:19px;
top:50px;
padding:0;

}

#menu ul li ul li {
    width:200px;
    padding:0 10px;
    height:30px;
    float:left;
    display:block;
    line-height:20px;
    line-height:30px;
    background-color:#6AA2FD;
}

#menu ul li ul li a {
    padding:0;  
}


#menu ul li:hover ul {
    display:block;
}

在你的情况下，菜单的 HTML 代码应该是

<ul>
    <li><a href="index.html" class="current_page_item" >Domov</a>
    <li><a href="Igre.html">Igre</a></li>
    <li><a href="robotika.html">Robotika</a></li>
    <li><a href="about.html">O meni</a></li>
    <li><a href="contact.html">Kontakt</a>
        <ul>
            <li><a href="">Web developers</a></li>
            <li><a href="">Suport</a></li>
       </ul>
    </li>
</ul>