HTML下拉菜單

我想創建一個網頁的下拉菜單，但我不喜歡它的外觀。這裏是我的頁面的鏈接，我在這裏發佈了代碼。任何幫助表示讚賞。HTML下拉菜單

http://scf.usc.edu/~diuguid/itp104/homepage.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd" 
    > 
<html lang="en"> 
    <head> 
    <title>Project Homepage</title> 
</head> 
<style> 
#outercontainer{ 
    width:820px; 
    height:1200px; 
    background-color:orange; 
} 

#header{ 
     width: 300px; 
     height: 60px; 
     margin: 0 auto; 
    color:red; 
    font-size:40pt; 
} 

#drop-nav{ 
    margin-right: 40px; 
    display: block; 
    width: 800px; 
    height: 30px; 
    background-color: black; 
} 

a{ 
    display: block; 
    margin-right: 80px; 
    } 

ul{ 
    list-style: none; 
    padding: 0px; 
    margin-right: 40px; 
    } 

    ul li{ 
    display: block; 
    position: relative; 
    float: left; 
    border:1px solid blue; 
    } 

    li ul{ 
    display: none; 
    } 

    ul li a{ 
    display: block; 
    background: #000; 
    padding: 5px 10px 5px 10px; 
    text-decoration: none; 
    white-space: nowrap; 
    color: #fff; 
    } 

    ul li a:hover{ 
    background: blue; 
    } 

    li:hover ul{ 
    display: block; 
    position: absolute; 
    } 

    li:hover li{ 
    float: none; 
    } 

    li:hover a{ 
    background: #f00; 
    } 

    li:hover li a:hover{ 
    background: #000; 
    } 

    #drop-nav li ul li{ 
    border-top: 0px; 
    } 
</style> 

<body> 
    <div id="outercontainer"> 
    <div id="header"> 
     LA SPORTS 
    </div> 

    <div id="navbar"> 
     <ul id="drop-nav"> 
    <li><a href="#">NBA</a> 
    <ul> 
     <li><a href="nba.html" target="_blank">Lakers</a></li> 
     <li><a href="nba.html" target="_blank">Clippers</a></li> 
    </ul> 
    </li> 
    <li><a href="#">MLB</a> 
    <ul> 
     <li><a href="#">Angels</a></li> 
     <li><a href="#">Dodgers</a></li> 
    </ul> 
    </li> 
    <li><a href="#">NHL</a> 
    <ul> 
     <li><a href="#">Kings</a></li> 

    </ul> 
    </li> 

    <li><a href="#">NFL</a> 
    <ul> 
     <li><a href="#">Past Teams</a></li> 

    </ul> 
    </li> 
</ul> 
    </div> 
    </div> 
</body> 
</html>

來源

2015-04-06 William Diuguid

你能解釋你想改變的屬性嗎？ – 2015-04-06 07:23:09

如果您查看我製作的頁面的鏈接，並將鼠標懸停在菜單選項上，則可以看到問題。即使使用每個菜單選項，我也想使其下降。 – 2015-04-06 07:34:24

-1

只需通過這個鏈接

http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css

這將有助於你作出下拉。

來源

2015-04-06 07:39:08 railslearner

添加這是你的CSS：

ul li a { 
    background: none repeat scroll 0 0 #000; 
    box-sizing: border-box; 
    color: #fff; 
    display: block; 
    padding: 5px 10px; 
    text-decoration: none; 
    white-space: nowrap; 
    width: 100%; 
}

我希望它會幫助你。

來源

2015-04-06 07:39:24

這確實有幫助！但下拉部分仍然與下一個菜單選項重疊。你知道如何解決這個問題嗎？ – 2015-04-06 07:46:39

我沒有得到你，它是如何重疊的，你可以展示嗎？ – 2015-04-06 08:59:24

HTML下拉菜單

回答

相關問題