Question

我想我可能会有一些限制自己的代码。基本上我是这个整个网络创作的新手，我有点卡在导航和下拉。它似乎没有正确排列。到目前为止，这是我的代码。

所以我有：主页 - NewToFitness？ - 营养 - 食谱 - 在一行上联系所有人，并在下一行的“锻炼”一词下面进行锻炼。我希望它与其他人在同一条线上，但我无法找到我的代码出错的地方。

.mainHeader nav {
  position: relative;
  background: #363636;
  height: 60px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -border-radius: 5px;
}
.mainHeader nav ul {
  list-style: none;
  margin: 0 auto;
}
.mainHeader nav ul li {
  float: left;
  display: inline-block;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
  color: #FFF;
  font-size: 110.5%;
  display: inline-block;
  padding: 14px 60px;
  height: 30px;
}
.mainHeader nav a:hover,
.mainHeader nav a:active .mainHeader nav .active a:link,
.mainHeader nav .active a:visited {
  background-color: #73b5ff;
  text-shadow: none;
}
.mainHeader nav ul li a {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #363636;
  min-width: 20px;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}

</head>

<body class="body">

<header class="mainHeader">
<img src="img/Logo.png" width="100" height="100" alt=""/>
   	<h1>Mike's Workshop</h1>
<nav id="navbar"> 
   	<ul>
	<li><a href="Home/Home.html">Home</a></li>
	<li><a href="NewToFitness/NewToFitness.html">New to Fitness?</a>	      </li>
    <li><a href="Nutrition/Nutrition.html">Nutrition</a></li>
    <li><a href="Recipes/Recipes.html">Recipes</a></li>
    <li><a href="Contact/Contact.html">Contact</a>   </li>    
    <div class="dropdown">
   		<a href="Workouts/Workouts.html">Workouts</a>
        <div class="dropdown-content">
            <a href="#">Abs</a>
            <a href="#">Back</a>
            <a href="#">Biceps</a>
            </div>
            </div>
   </ul>  
  </nav>

</header>

Dreamweaver导航栏和下拉列表没有正确排列

0 个答案: