带框和三栏的网站导航

时间：2018-09-03 19:33:41

标签： html css

我一直在尝试创建与网站上相同的导航系统， 但在过去的2个小时里，它一直很努力地尝试这样做，但仍然无法创建相同的

如果有人可以提供帮助，我将不胜感激

该网站为XIVDB - Final Fantasy XIV: Stormblood Database [^]

我还查看了导航代码，但是它很难遵循和实现，并且尝试使用w3schools，但是仍然无法实现相同的设计，因为当我尝试添加其中一个代码时，它就崩溃了

我试图从零开始构建导航 我只是设法添加了列表，但是当您将鼠标移向选项The navigation box that i am trying to add [^]

之一时，我无法创建出现的额外框

这和我用代码所做的一样

<ul>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Database</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">Registration</a></li>
  <li style="float:right"><a class="active" href="#about">Login</a></li>
  
</ul>

编辑1：Current progress [^]我一直在努力，我设法创建了一个列表和子列表。.但是子列表只包含1行，而顶部没有文本，如图所示。正在尝试使其显示为The navigation box that i am trying to add [^]

这是我最后一次更新代码。

span,ol, ul, li{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.1em;
  font: inherit;
  vertical-align: baseline;
  outline: 1px solid black;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-transform:uppercase;
}
body {
  font-family: Helvetica, 'Trebuchet MS', Tahoma, sans-serif;
  font-size: 1.1em;
  line-height: 1;
  color: #414141;

}

br { display: block; line-height: 1.6em; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

table { border-collapse: collapse; border-spacing: 0; }


/** page structure **/
nav {
  display: block;
  width: 100%;
  height: 70px;
  background: #555;
  
}

/*.wrapper { 
  display: block;
  margin: 0 auto;
  width: 750px;
}*/

#menu {
  display: block;
  position: relative;
  z-index: 99;
  
  
}

#menu li {
  display: block;
  float: left;
  
  
}
#menu li a {
  display: block;
  position: relative;
  float: left;
  padding: 0 61px;
  font-size: 1.1em;
  line-height: 70px;
  font-weight: bold;
  text-decoration: none;
  
  color: white;
}
#menu li a:hover, #menu li a.active {
	background: Black;
	color: #FFF;
}

#menu li ul {
  display: none;
  position: absolute;
  top: 70px;
  width: 200px;
  background: #555;
  z-index: -1;
  
  -webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
  -moz-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
  box-shadow: 0 2px 7px rgba(0,0,0,0.45);
}
#menu li ul li {
  display: block;
  width: 200px;
}
#menu li ul li a {
  display: block;
  float: none;
  color: white;
  font-size: 1.1em;
  line-height: 40px;
    
  padding: 0 15px;
}
#menu li ul li a:hover {
  background: black;
  color: #fff;
}

#menu li ul.expanded {
  width: 400px;
}
#menu li ul.expanded li { margin-right: 200px; }



#menu li ul li ul {
  display: none;
  position: absolute;
  left: 200px;
  top: 0;
  height: 100%;
  background: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
#menu li ul li ul li a { color: #fff; }
#menu li ul li ul li a:hover { text-decoration: underline; }

#menu li ul li.purple a:hover, #menu li ul li.purple a.active { background: black; color: #fff; }
#menu li ul li.purple ul { background: black; }

#menu li ul li.green a:hover, #menu li ul li.green a.active { background: black; color: #fff; }
#menu li ul li.green ul { background: black; }

#menu li ul li.aqua a:hover, #menu li ul li.aqua a.active { background: black; color: #fff; }
#menu li ul li.aqua ul { background: black; color: #fff; }

#menu li ul li.red a:hover, #menu li ul li.red a.active { background: black; color: #fff; }
#menu li ul li.red ul { background: black; }

#menu li ul li.blue a:hover, #menu li ul li.blue a.active { background: black; color: #fff; }
#menu li ul li.blue ul { background: black; }

#menu li ul li.gold a:hover, #menu li ul li.gold a.active { background: black; color: #fff; }
#menu li ul li.gold ul { background: black; }


/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
<!DOCTYPE html>
<html lang="en-US">
<html>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<head>
<style>
.site {
    width: 970px;
    margin: 0 auto;
    padding: 15px 0 50px;
}
body {
  font-family: Helvetica, 'Trebuchet MS', Tahoma, sans-serif;
  font-size: 62.5%;
  line-height: 1;
  color: #414141;

}


element.style {
}
.user-bar .user-controls {
    float: right;
    width: 700px;
    margin-top: 12px;
    text-align: right;
}

user agent stylesheet
div {
    display: block;
	}
.user-bar {
    font-size: 13px;
    position: relative;
    z-index: 9000;
    width: 970px;
    margin: 0 auto;
    padding: 10px 0;
    border-radius: 0 0 3px 3px;
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    overflow-y: scroll;
    background-color: #111;
}
.topnav {
    background-color: #333;
    overflow: hidden;
	outline: 1px solid black;
}
/* Right-aligned section inside the top navigation */
.topnav-right {
  float: right;
  
}
/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
  
}
</style>
<div class="user-bar" role="navigation" ><div class="user-left">
  <a href="index.html"><img src="Images/DragonNest_Logo.png" alt="logo" width="200" height="100"> </a>
</head>
<body>

  <div class="topnav">
  <div class="topnav-right">
    <a href="#search">Login</a>
    <a href="#about">Registration</a>
  </div>
</div>
</div>
    

<nav>
    <div class="wrapper">
      <ul id="menu" class="clearfix">
        <li><a href="#">database</a>
          <ul>
            <li class="purple"><a href="#">Weapons</a>
              <ul>
              <li><a href="WarriorWeapons.html">Warrior</a></li>
                <li class="divider"></li>
                <li><a href="#">Archer</a></li>
                <li class="divider"></li>
                <li><a href="#">Sorceress</a></li>
                <li class="divider"></li>
                <li><a href="#">Cleric</a></li>
                <li class="divider"></li>
                <li><a href="#">Tinkerer</a></li>
                <li class="divider"></li>
                <li><a href="#">Kali</a></li>
                 <li class="divider"></li>
                <li><a href="#">Assassin</a></li>
                  <li class="divider"></li>
                <li><a href="#">Lencea</a></li>
              </ul>
            </li>
            <li class="green"><a href="#">Equipments</a>
              <ul>
              <li><a href="#">Warrior</a></li>
                <li class="divider"></li>
                <li><a href="#">Archer</a></li>
                <li class="divider"></li>
                <li><a href="#">Sorceress</a></li>
                <li class="divider"></li>
                <li><a href="#">Cleric</a></li>
                <li class="divider"></li>
                <li><a href="#">Tinkerer</a></li>
                <li class="divider"></li>
                <li><a href="#">Kali</a></li>
                 <li class="divider"></li>
                <li><a href="#">Assassin</a></li>
                  <li class="divider"></li>
                <li><a href="#">Lencea</a></li>
              </ul>
            </li>
            <li class="aqua"><a href="#">ACCESSORIES</a>
              <ul>
                <li><a href="#">Rings</a></li>
                <li class="divider"></li>
                <li><a href="#">Necklaces</a></li>
                <li class="divider"></li>
                <li><a href="#">Earrings</a></li>
              </ul>
            </li>
                        <li class="blue"><a href="#">Skills</a>
              <ul>
              <li><a href="#">Warrior</a></li>
                <li class="divider"></li>
                <li><a href="#">Archer</a></li>
                <li class="divider"></li>
                <li><a href="#">Sorceress</a></li>
                <li class="divider"></li>
                <li><a href="#">Cleric</a></li>
                <li class="divider"></li>
                <li><a href="#">Tinkerer</a></li>
                <li class="divider"></li>
                <li><a href="#">Kali</a></li>
                 <li class="divider"></li>
                <li><a href="#">Assassin</a></li>
                  <li class="divider"></li>
                <li><a href="#">Lencea</a></li>
              </ul>
            </li>
            <li class="red"><a href="#">Items</a>
              <ul>
                <li><a href="#">Consumables</a></li>
                <li class="divider"></li>
                <li><a href="#">Crafting Items‎</a></li>
                <li class="divider"></li>
                <li><a href="#">Exchange Items‎</a></li>
                <li class="divider"></li>
                <li><a href="#">Event Items‎</a></li>
                <li class="divider"></li>
                <li><a href="#">Fish</a></li>
              </ul>
            </li>

            <li class="gold"><a href="#">Tools</a>
              <ul>
                <li><a href="#">Fishing</a></li>
                <li class="divider"></li>
                <li><a href="#">Cooking</a></li>
                <li class="divider"></li>
                <li><a href="#">Farming</a></li>
              </ul>
            </li>
                        <li class="gold"><a href="#">Crafting</a>
              <ul>
                <li><a href="#">set Equipments</a></li>
                <li class="divider"></li>
                <li><a href="#">Skill Accessories</a></li>
                <li class="divider"></li>
                <li><a href="#">Common goods</a></li>
                <li class="divider"></li>
                <li><a href="#">Dragon Jade</a></li>
                <li class="divider"></li>
                <li><a href="#">Talisman</a></li>
              </ul>
            </li>
                        <li class="gold"><a href="#">Achievements</a>
              <ul>
                <li><a href="#">General</a></li>
                <li class="divider"></li>
                <li><a href="#">Dungeon</a></li>
                <li class="divider"></li>
                <li><a href="#">nest</a></li>
                 <li class="divider"></li>
                <li><a href="#">Colosseum</a></li>
              </ul>
            </li>
          </ul>
        </li>
                                <li class="gold"><a href="#">MISCELLANEOUS</a>
              <ul>
                <li><a href="#">Titles</a></li>
                <li class="divider"></li>
                <li><a href="#">gestures</a></li>
                <li class="divider"></li>
                <li><a href="#">minions</a></li>
                 <li class="divider"></li>
                <li><a href="#">NPCs</a></li>
                    <li class="divider"></li>
                <li><a href="#">mounts</a></li>
              </ul>
                      <li><a href="#">Search</a>
          <ul>
            <li><a href="#">weapon</a></li>
             <li class="divider"></li>
            <li><a href="#">equipment</a></li>
             <li class="divider"></li>
            <li><a href="#">accessories</a></li>
             <li class="divider"></li>
            <li><a href="#">items</a></li>
             <li class="divider"></li>
            <li><a href="#">crafting</a></li>
             <li class="divider"></li>
            <li><a href="#">Achievements</a></li>
             <li class="divider"></li>
            <li><a href="#">MISCELLANEOUS</a></li>
          </ul>
                      <li><a href="#">Patch</a>
          <ul>
            <li><a href="#">weapon</a></li>
             <li class="divider"></li>
            <li><a href="#">equipment</a></li>
             <li class="divider"></li>
            <li><a href="#">accessories</a></li>
             <li class="divider"></li>
            <li><a href="#">items</a></li>
             <li class="divider"></li>
            <li><a href="#">crafting</a></li>
             <li class="divider"></li>
            <li><a href="#">Achievements</a></li>
             <li class="divider"></li>
            <li><a href="#">MISCELLANEOUS</a></li>
          </ul>
                     <li><a href="#">About</a>
          <ul>
            <li><a href="#">weapon</a></li>
             <li class="divider"></li>
            <li><a href="#">equipment</a></li>
             <li class="divider"></li>
            <li><a href="#">accessories</a></li>
             <li class="divider"></li>
            <li><a href="#">items</a></li>
             <li class="divider"></li>
            <li><a href="#">crafting</a></li>
             <li class="divider"></li>
            <li><a href="#">Achievements</a></li>
             <li class="divider"></li>
            <li><a href="#">MISCELLANEOUS</a></li>
          </ul>
		  
        </li>
        </li>
            </li>
          </ul>
        </li>

      </ul>
    </div>
  </nav>
<script type="text/javascript">
$(function(){
  $('a[href="#"]').on('click', function(e){
    e.preventDefault();
  });
  
  $('#menu > li').on('mouseover', function(e){
    $(this).find("ul:first").show();
    $(this).find('> a').addClass('active');
  }).on('mouseout', function(e){
    $(this).find("ul:first").hide();
    $(this).find('> a').removeClass('active');
  });
  
  $('#menu li li').on('mouseover',function(e){
    if($(this).has('ul').length) {
      $(this).parent().addClass('expanded');
    }
    $('ul:first',this).parent().find('> a').addClass('active');
    $('ul:first',this).show();
  }).on('mouseout',function(e){
    $(this).parent().removeClass('expanded');
    $('ul:first',this).parent().find('> a').removeClass('active');
    $('ul:first', this).hide();
  });
});
</script>
</body>
</html>

0 个答案:

没有答案
相关问题
最新问题