Question

所以我正在尝试构建一个简单的下拉菜单，但是我在尝试使其工作时遇到了最大的麻烦。什么都有帮助

<!DOCTYPE html>
<html lang "eng">
    <head>
        <meta charset "utf-8">
        <title>EC The Photographer</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/ec.css">
        <link rel="stylesheet" href="css/responsive.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div class="header">
            <a href="index.html" atl="Logo">
                <img src="img/ec_logo.png" alt="E C the photographer logo" class="logo">
            </a>
            <div class="navbar">
            <ul>
                <li><a href="index.html">Home</a></li>
                <!-- Photography Drop Down Menu -->
                <li><a href="photos.html">Photography</a>
                    <ul class="pic-dropdown">
                        <li><a href="models.html">Modeling</a></li>
                        <li><a href="portraits.html">Portraits</a></li>
                        <li><a href="fashion.html">Fashion</a></li>
                        <li><a href="events.html">Events</a></li>
                        <li><a href="weddings.html">Weddings</a></li>
                    </ul>
                </li>
                <!-- Blog Drop Down Menu -->
                <li><a href="blog.html">Blog</a>
                    <ul class="blog-dropdown">
                        <li><a href="35.html">35mm</a></li>
                    </ul>
                </li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>

/ ------------------------------------------- CSS -------------------------------------------- /

/*---------------------------------------------------------------------General-----------------------------------------------------------------------------*/

body {
    font-family: 'Open Sans', sans-serif;
}

.logo {
    max-width: 70%;
    margin: 0;
}

.Header p {
    font-size: 1em;
    margin: 0 0 0 6.99999%;
}

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}
/*---------------------------------------------------------------------Header-----------------------------------------------------------------------------*/



/*---------------------------------------------------------------------nav-----------------------------------------------------------------------------*/

.navbar ul {
    text-decoration: none;
    list-style: none;
    background-color: ;
    color: #000;
    display: inline-block;
}

.navbar ul li {
    text-decoration: none; 
    list-style: none;
    color: #000;
    display: inline-block;
}

.navbar ul li a {
    text-decoration: none;
    list-style: none;
    color: #000;
    display: inline-block;
}

.pic-dropdown li a {
    text-decoration: none;
    list-style: none;
    color: #000;
    display: block;
}

/*---------------------------------------------------------------------Footer-----------------------------------------------------------------------------*/

.footer {
  text-align: center;
  clear: both;
  padding-top: 2%;
  margin: 5% 0 0 0;
}

.footer p{
  color: #4F5254;
  font-size: 0.85em;
  text-align: center;
}


.social-icon{ 
  display: inline-block;
  max-width: 5%;
  max-height: 5%;
  clear: both;
  margin: 0 1%;
}

/*---------------------------------------------------------------------about-----------------------------------------------------------------------------*/

.profile-pic {
  max-height: 40%;
  max-width: 40%;
  display: block;
  clear: both;
  float: left;
  margin-top: 10px;
  margin-right: 25px;
  margin-bottom: 10px;
}

.bio h3{
    color: #000;
}
.bio p{
    float: right;
    clear: both;
    font-size: 1em;
}

Answer 1

您需要设置一种样式，以便当您将鼠标悬停在父<li>上时，会显示该子<ul>。

而且，您需要设置一些样式才能使其正常工作。

这里有一些可以帮助你入门的CSS：

.navbar ul li {
    text-decoration: none; 
    list-style: none;
    color: #000;
    display: inline-block;
    /* Need position: relative to make your sub-nav behave */
    position: relative;
}

/* This rule is necessary to hide the dropdown */
.navbar ul li ul {
    display: block;
    position: absolute;
    /* Moves it off the page, to the far left, so not visible */
    left: -999em;
    top: 20px; /* adjust as appropriate */
    width: 250px; /* adjust as appropriate */
}

/* This is how you make it show up when the li is hovered */
.navbar ul li:hover ul {
    left: auto;
}

感谢@Jean-Philippe Edmond创建jsFiddle

麻烦下降意味着

1 个答案: