導航中的下拉列表不顯示導航條並顯示中心問題

我想讓我的下拉列表顯示在懸停上，但無論我將其設置爲何種位置，它都能正常工作。我想也許這可能是在導航欄中沒有指定'顯示'？此外，我無法讓我的導航欄居中顯示在我的頁面上。我是html和css的初學者，所以請在我身上輕鬆一下=）。導航中的下拉列表不顯示導航條並顯示中心問題

這裏是我的HTML and the jsfiddle

<!DOCTYPE html> 
    <html lang="en"> 
    <meta charset="UTF-8"> 
    <head> 
     <title>Yanimal Art</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    </head> 

    <body> 
    <div id="header"><img src="images/yanimal.gif" alt=""></div> 

     <nav> 
      <ul> 
       <li><a href="about.aspx">About</a></li> 
       <li><a href="portfolio.aspx">Portfolio</a></li> 
       <ul> 
        <li><a href="drawings.aspx">Drawings</a></li> 
        <li><a href="paintings.aspx">Paintings</a></li> 
        <li><a href="digitalmedia.aspx">Digital Media</</li> 
       </ul> 
       <li><a href="shop.aspx">Shop</a></li> 
       <li><a href="contact.aspx">Contact</a></li> 
      </ul> 

     </nav> 

    <div id="middle"><p></p></div> 

    <div id="footer">Site is Currently Under Construction</div> 

    </body> 
</html>

這裏是我的代碼：

body { 
     background-color: #FFFFFF; 
} 

#header { 
     display: block; 
     margin-left: auto; 
     margin-right: auto; 
     height: 124px; 
     width: 830px; 
     margin-top: 60px; 
} 
    nav ul ul { 
     display: none; 
     position: absolute; 
     top: 100%; 
    } 
     nav ul li: hover > ul { 
      display: block; 
     } 
    nav ul { 
     display: inline-block; 
     text-align: center; 
     list-style: none; 
     position: relative; 
     padding: 0; 
     margin: 0 auto; 
     background-color: #B8B8B8; 
     font-family: Helvetica Neue light; 
    } 
     nav ul li { 
      float: left; 
     } 
      nav ul li:hover { 
       background: #e0e0e0; 
      } 
       nav ul li:hover a { 
         color: #333; 
       } 
      nav ul li a { 
        display: block; 
        padding: 12px 50px; 
        color: #000000; 
        text-decoration: none; 
      } 
nav ul ul { 
     background: #B8B8B8; 
     float: left; 
     margin: 0; 
     padding: 0; 
     list-style: none; 
} 
    nav ul ul li { 
      display: block; 
      text-decoration: none; 
      float: none; 
      position: relative; 
    } 
     nav ul ul li a { 
       display: block; 
       padding: 15px 40 px; 
       color: #000000; 
     } 

#middle { 
    opacity: 0.93; 
    display: block; 
    position: relative; 
    height: 100%; 
    width: 100%; 
    background-color: #121212; 
} 
#footer { 
     opacity: 0.7; 
     bottom: -40; 
     width: 100%; 
     background-color: #484838; 
     text-align: center; 
}

來源

2014-01-29 user3249580

你有一些問題，但沒有重大。

這是我改變了HTML：

<li><a href="portfolio.aspx">Portfolio</a> 
    <ul class="subNav"> 
     <li><a href="drawings.aspx">Drawings</a></li> 
     <li><a href="paintings.aspx">Paintings</a></li> 
     <li><a href="digitalmedia.aspx">Digital Media</a></li> 
    </ul> 
</li>

我加入的CSS /改變：

nav ul ul { 
    display: none; 
    position: absolute; 
    top: 100%; 
    z-index: 100; 
} 

nav ul li:hover .subNav { /* This allows the subNav to display block when the li is hovered on */ 
    display: block; 
}

最後，小提琴：Demo

第二個問題爲了能夠用margin: 0 auto;將元素居中，您需要爲元素定義寬度。

或者您可以在您的nav上使用text-align: center;作爲Danko的建議，Danko的小提琴：Demo。

你也忘了關閉一個標籤之一，

<li><a href="digitalmedia.aspx">Digital Media</a></li>

我也建議清理你的CSS，有點亂。

來源

2014-01-29 16:33:38

*第二個問題：*只需要添加'nav {text-align：center}'http://jsfiddle.net/4vFh2/1/ – DaniP

@Danko感謝您的中心小提琴！ –

導航中的下拉列表不顯示導航條並顯示中心問題

回答

相關問題