<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    
    <style>
    ul.menubar {
     margin: 0px;               
     padding: 0px 0px 0px 15px; 
     background-color: #4689FF;
     text-align:center;
    }

    ul.menubar li {
     width: 125px;           
     display: inline-block;  
     list-style-type: none; 
     position: relative;    
    }
    
    ul.menubar a {
     background-color: #4689FF; 
     color: white;              
     line-height: 40px;         
     text-align: center;        
     text-decoration: none;    
     font-weight: bold;        
     display: block;           
    } 
    
    ul.menubar a:hover {
     background-color: #BAD3FF; 
     color: white;            
    }

    ul.menubar ul {
     display: none;         
    }
    
    ul.menubar ul {
     display: none;     
     margin: 0px;         
     padding: 0px;        
     position: absolute;  
    }


    ul.menubar li:hover ul {
     display: block;      
    }
    
    ul.menubar ul li {   
     width: 135px;              
     border-top: 1px solid blue; 
    }
    ul.menubar ul li a {   
     line-height: 35px;   
     text-align: left;    
     padding-left: 5px;   
     font-weight: bold; 
    }
    ul.menubar ul li a:hover {  
     background-color: #BAD3FF; 
     color: white;            
    }
    
   </style>
   
   <title>アニメ履歴</title>
  </head>
  <body>
    <ul class="menubar mb-5">
     <li><a href="{{ route('home') }}">ホーム</a></li>
     <li><a href>登録</a>
      <ul>
         <li><a href="{{ route('create.watched') }}">観た作品</a></li>
         <li><a href="{{ route('create.unwatch') }}">観たい作品</a></li>
      </ul>
     </li>
     <li><a href>一覧</a>
      <ul>
         <li><a href="{{ route('index.watched') }}">観た作品</a></li>
         <li><a href="{{ route('index.unwatch') }}">観たい作品</a></li>
      </ul>
     </li>
    </ul>
    <!-- ここにメインの処理を書く -->
 
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>