下拉菜单,子项自动显示

时间:2016-03-08 18:42:04

标签: html css drop-down-menu menu dropdown

我非常感谢以下方面的一些帮助。我对编码很缺乏经验,但我需要建立一个非常基本的网站。

我拥有我几乎想要的网站结构,并进行了一些小的改动;其中一个是菜单......

我目前有一个下拉菜单,可以使用。但是,我想停止其中一家餐馆的子菜单。物品立即出现在餐厅上空徘徊。请帮助:)

代码如下:

<body>

    

  <ul>
    <li><a href="#">Index</a>
    </li>
    <li>


      <li><a href="#">Parks</a>
        <!-- Code below: creates a new layer onto the lists -->
        <ul>
          <!-- Code below: makes a dropdown menu for the above menu item -->
          <li><a href="disneyland.html">Disney Land</a>
            <li><a href="universal.html">Universal</a>
            </li>
            <li><a href="buschgardens.html">Busch Gardens</a>
            </li>
            <!-- Code below: reverts the following contents of the list to a higher tier -->
        </ul>
        <li>
          <a href="#">Restaurants</a>
          <ul>
            <li><a href="logans.html">Logans</a>
            </li>
            <li><a href="outback.html">Outback</a>
            </li>
            <ul>
              <li><a href="#">Test Restaurant</a>
              </li>

            </ul>
            <li><a href="perkins.html">Perkins</a>
            </li>

          </ul>
          <li>
            <a href="statistics.html">Statistics</a>
  </ul>
</div>



<article>
  ARTICLE
</article>


<aside>
  <div class="disneyImage1">

</aside>




<footer>
  &copy; Billy 2015. Disclaimer: all expressions on this site are strictly personal opinions and preferences and may not actually reflect the locations, businesses, etc. factually.
</footer>
</div>

body {
    font-family: verdana, sans-serif;
    font-size: 100%;
}
#siteWrapper{
    background-color: yellow;
    width: 65%;
    margin: 0 auto;
}



footer{
    font-size: small;
    color: white;
    background-color: grey; 
}

aside{
    background-color: green;
    border-style: solid;

}

article {
    border-style: solid;
    background-color: green;
}

section {

}


/*   TABLE  */

table, th, td {
    border: 1px solid black;
    text-align: center;
}

/*   END OF TABLE  */



/*   HEADINGS  */

h1{
    text-align: center;
    font-size: 250%;
}

h2{
    text-align: center;
    font-size: 175%;
}

h3{
    text-align: center;
    font-size: 125%;
}


/*   END OF HEADINGS   */



/* Overall menu area  */

.nav    {
    background-color: pink;
    text-align: center;
}

/* Unordered lists within nav  */
.nav ul {
    list-style-type: none;
    padding: 0; margin: 0;
}

/* Unordered lists within nav that have list elements (links)  */
.nav ul li  { 
    display: inline-block; 
}

/* Hover properties for the top menu links  */
.nav ul li:hover    {
    background-color: yellow;
}

/* Normal Link properties */
.nav ul li a,visited    {
    color: purple;
    padding: 20px 10px 20px 10px;
    display: block;
    text-decoration: none;
}

/* Hover links are block */
.nav ul li:hover ul { 
    display: block; 
}

/* Drop-down menus properties */
.nav ul ul  {
    position: absolute;
    text-align: left;
    display: none;
    background-color: red; 
}

/* Drop-downs are blocks */
.nav ul ul li   {
    display: block; 
}

/* Padding properties for the hyperlinks */
.nav ul ul li a,visited { 
    padding: 15px 10px 15px 10px; 
}

/* Drop-down hover colours */
.nav ul ul li:hover { 
    background-color: yellow;
    position: relative;
}
.nav ul ul ul   { 
    min-width: 175px; 
    background-color: #ADC9F0; 
    position: absolute;
    left: 100%;
    top: 0;
}




/*    */



.imageBanner{
    border-style: solid;
    background-color: orange;
    height:200px;
    overflow: hidden;
    background-image: url(porsche.gif);
    background-repeat: no-repeat;
    background-size:cover;

}
.imageBanner h2 {
    color: #624791;
    text-align: left;
}
.imageBanner img {
    width: 100%;

}

/*    All code below is controlling only the form elements on the website   */
legend  {

    font-size: 20px;
}

form {
  background: -webkit-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  background: linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  margin: auto;
  position: relative;
  width: 550px;
  height: 700px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
  font-style: italic;
  line-height: 24px;
  font-weight: bold;
  color: #09C;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #999;
  border: inset 1px solid #333;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

input {
  width: 375px;
  display: block;
  border: 1px solid #999;
  height: 25px;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

textarea {
    width: 500px;
    height:200px;
}

0 个答案:

没有答案