大廈網頁

 <!doctype html> 
    <html> 
    <head> 
    <title>My web page</title> 
    <link href="mycss.css" rel="stylesheet" type="text/css"> 
    <h1>Welcome to my page!</h1> 
    <body> 
    <nav id="nav"> 
    <ul> 

    <li>Home</li> 

    <li><a href="">About Me!</a> 
    <ul> 
    <li><a href="">Me!</a></li> 
    <li><a href="">Hobbies!</a></li> 
    <li><a href="">My Photography!</a></li> 
    <li><a href="">Favorite Music!</a></li> 
    </ul> 
    </li> 

    <li><a href="">Important Links</a> 
    <ul> 
    <li><a href="">L1</a></li> 
    <li><a href="">L2</a></li> 
    <li><a href="">L3</a></li> 
    <li><a href="">L4</a></li> 
    </ul> 
    </li> 

    <li><a href="">Contact</a></li> 

    </ul> 
    </nav> 
     <img src="http://http://upload.wikimedia.org/wikipedia/commons/a/a8/Sydney_harbour_bridge_new_south_wales.jpg" width="700" height="400" alt=""/> 
    <p>About Me</p> 
    <p>About Me</p> 
    </body> 
    </html>

CSS文件...大廈網頁

 * { 
      text-align:center; 
    } 

    h1 { 
    } 

    nav { 
     display: block; 
     font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
     color: #202020; 
     list-style-type: none; 
    } 

    p { 
     display: block; 
     text-align: center; 
     font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
     color: 202020; 
     position: relative; 
    } 

    img { 
    position: relative; 
    top: -5px; 
    } 


    #nav ul li { 
     display: inline-block; 
     list-style-type: none; 
     float: none; 
     padding-top: 5px; 
     background-color: #ACFE89; 
     padding-left: 30px; 
     padding-right: 30px; 
     position: relative; 
     padding-bottom: 5px; 
     color: #333366; 
    } 

    #nav ul li:hover { 
     color: #0099FF; 
    } 
    #nav ul li ul{ 
     display:none; 
     position: absolute; 
     left: 0; 
     top: 100%; 
    } 
    #nav ul li ul li{ 


     } 
    #nav ul li:hover > ul { 
     display:block; 
    } 
    a { 
     text-decoration: none; 
    }

http://jsfiddle.net/txZ5K/3/

嗨，我面臨着一些問題，此頁......

下拉菜單弄亂。下拉菜單不在圖像後面。導航欄上的所有項目在懸停時都不會突出顯示。

我是新來的，但盡我所能做一個很酷的網頁。請請幫助我！

來源

2014-03-05 user3367020

http://jsfiddle.net/t2XfH/

我給的10 z-index至#nav ul

希望這有助於

來源

2014-03-05 19:18:22 Anubhav

1）在命名你的CSS樣式 - #nav ul li改變padding-left以及padding-right至20像素。

padding-left: 20px; 
padding-right: 20px;

2）在你的CSS命名爲#nav ul li ul li，加width:130px;像

#nav ul li ul li { 
    width:130px; 
}

試試這個&仍，如果你面對任何issue..let我知道...

來源

2014-03-05 19:18:46 Arjit

好了，問題在這裏元素i的堆棧順序

<img src="http://http://upload.wikimedia.org/wikipedia/commons 
    /a/a8/Sydney_harbour_bridge_new_south_wales.jpg" width="700" height="400" alt=""/> 
    <p>About Me</p> 
    <p>About Me</p>

是在堆棧中的下拉菜單中。所以前爲下拉將幫助指定z-index，的z索引屬性指定的元素，元素以更大的堆疊順序的堆疊順序總是在的前元素的堆棧順序較低。

 #nav ul { 
     z-index: 1; 
     }

在你的情況下，設置'1'就足夠了。

我更改了一下代碼：jsfiddle

來源

2014-03-05 19:33:55

回答

相關問題