Question

我正在为我的一个朋友建立一个网站。坦率地说，我是一个很新的人，无论如何他们都会提示我进行练习，而我根本不介意去做。

我使用的是html和Css。我正在尝试上面的菜单或导航栏，但列表看起来很杂乱。我也试图为它制作子菜单，不确定它是否也妨碍了它。有任何有效的方法来说明这一点吗？

我的HTML ...

＆＃13;

  {
       border: solid 1px red;
     }
    html {
      height: 100%;
    }
    
    body {
      height: 100%;
    }
    
    .nav {
    position: absolute;
    width: 100%;
    height: 75px;
    font-family: 'Nunito', sans-serif;
    font-size: 13pt;
    background-color: black;
    }
    
    .wrapper {
      height: 75px;
      width: 100%;
      text-align: center;
    }
    
    .nav ul {
      float: right;
    margin-right: 25%;
    /*padding: 7em;*/
    }
    
    .nav ul li a {
      position: relative;
      display: inline;
      list-style-type: none;
      color: #fd7420;
      padding: 1em;
      margin: 1em;
      border-radius: 1px;
      background: black;
    }
    
    .nav ul ul li {
      color: #fd7420;
      margin: 3em;
      display: block;
      width: auto;
      line-height: 10px;
      height: 10px;
    }
    
    /*color menu color change display*/
    .nav a:hover {
    background: #fd7420;
    color: #1c2220;
    }
    
    .nav ul ul li {
      position: relative;
      display: none;
    }
    
    ul li {
    display: inline;
    list-style: none;
    }
    
    ul li a {
      text-decoration: none;
    }
    
    /*display menu display*/
    .nav ul li:hover ul li{
      display: block;
      animation: navmenu 500ms forwards;
    }
    
    @keyframes navmenu {
      0%{
        opacity:0;
      top:5px;
    }
    100%{
      opacity: 1;
      top:0px;
    }
    }
    
    .nav ul ul li:hover ul{
      display:block;
      position: absolute;
      width: 140px;
      left: 140px;
      top:0px;
    }
    
    .nav ul ul ul {
      display: none;
    }
    
    .banner {
      font-family: 'Lobster', cursive;
      color: orange;
      margin-top: 15%;
      padding: 1%;
      background-color: black;
      width: 100%;
    }
    
    .banner h1 {
      text-align: center;
    }
    
    #footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* height: 580px; */
    z-index: 100;
    background-color: black;
    }

＆＃13;

  <!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="utf-8">
    <title>Natural Pasta</title>
    <link rel="stylesheet" type="text/css" href="style-index.css">
    <!--
    font-family: 'Lobster', cursive;
    font-family: 'Shadows Into Light', cursive;
    font-family: 'Varela Round', sans-serif;
    font-family: 'Gloria Hallelujah', cursive;
    font-family: 'Nunito', sans-serif;
    font-family: 'Amatic SC', cursive;
    font-family: 'Gorditas', cursive;
    -->
    <link href="https://fonts.googleapis.com/css?family=Amatic+SC|Gloria+Hallelujah|Gorditas|Lobster|Nunito|Shadows+Into+Light|Varela+Round" rel="stylesheet">
    <body>
      <!-- Top Menu-->
    <div class="nav">
      <div class="wrapper">
    <ul>
    <li><a href="about-us.html">About Us</a></li>
    <li><a href="menu.html">Menu</a>
      <ul>
        <li><a href="#">To Go Pasta Meals</a></li>
        <li><a href="#">To Go Sauces</a></li>
        <li><a href="#">Ready To Eat...</a>
        <ul>
          <li>Arancinis</li>
          <li>Lasagnes</li>
          <li>Quiches</li>
        </ul></li>
      </ul>
    </li>
    <li><a href="#">Find Us</a></li>
    </ul>
    </div>
    </div>
    
    <div class="banner">
    <h1>Natural</h1> <br>
    <h1 style="font-family: 'Gloria Hallelujah', cursive;">Pasta</h1>
    </div>
    
    <div id="footer">
      <div>
        <h2>Contact Us</h2>
        <p>eget aliquam orci luctus. Nunc rutrum mauris sed ullamcorper tempus</p></div>
      <div></div>
    </div>
    </body>
    </html>

＆＃13;

杂乱的导航菜单与子菜单

0 个答案: