html - super 快速 CSS 和 HTML : 2 Nav Bars + Sub Nav

Question

我目前是 CSS 的新手，我希望得到关于如何设置具有 2 个导航栏(并排)的页面样式的回复。

1 侧(左侧导航栏)有:登录和注册

一侧(右侧的导航栏)有:添加商户、添加业务、业务中心、趋势(对于趋势，有一个用于单词和数据的子菜单)

我目前无法:

1. 让我的右侧导航栏与左侧导航栏位于同一行
2. 让单词和数据的子菜单很好地落在“趋势”下

请帮忙，因为我已经想了将近一天!

<ul id="navleft">
   <li> <a href='/user/login.php'>Login</a></li>
   <li> <a href='/user/register.php'>Register</a> </li>
</ul>
</nav>

<ul id="navright">
   <li> <a href=/ user/addreview.php>Add Review</a> </li>
   <li> <a href=/ user/addbusiness.php>Add Business</a> </li>
   <li> <a href=/ business/businesscentre.php>Business Centre</a></li>
   <li> <a href=/ user/trending.php>Trending</a>
      <ul id="navrightsub">
         <li> <a href=/ user/trendingwords.php>Words</a> </li>
         <li> <a href=/ user/trendingareas.php>Areas</a> </li>
   </li>
   </ul>
</ul>

CSS 格式:

a {
   font-family: Arial;
   font-size: 15px;
   text-decoration: none;
   padding: 5px;
}
/* make text bigger and no underline*/

a:hover {
   cursor: pointer;
   color: #ff4500;
}
/* make text change color when hovered over*/

#navleft {
   list-style: none;
   width: 100%;
   background-color: #f5f5f5;
   padding: 5px;
}
/* this is the grey nav bar*/

#navleft li {
   display: inline-block;
}
/* this is the list inside the grey nav bar*/

#navright li {
   list-style: none;
   display:inline-block;
} /*this is the list inside in the navright bar*/

#navrightsub 

Answer 1

你必须学习很多东西，比如如何使用 float 元素、位置属性和样式等等。我已经修改了您的代码并使其正常工作。

HTML

<ul id="navleft">
 <li> <a href='/user/login.php'>Login</a></li>
 <li> <a href='/user/register.php'>Register</a> </li>
</ul>


<ul id="navright">
 <li> <a href=/ user/addreview.php>Add Review</a> </li>
 <li> <a href=/ user/addbusiness.php>Add Business</a> </li>
 <li> <a href=/ business/businesscentre.php>Business Centre</a></li>
 <li> <a href=/ user/trending.php>Trending</a>
  <ul id="navrightsub">
     <li> <a href=/ user/trendingwords.php>Words</a> </li>
     <li> <a href=/ user/trendingareas.php>Areas</a> </li>
  </ul>    
 </li>   
</ul>

CSS

a {
 font-family: Arial;
 font-size: 15px;
 text-decoration: none;
 padding: 5px;
}
a:hover {
 color: #ff4500;
}
#navleft {
 list-style: none;   
 background-color: #f5f5f5;
 padding: 5px;
}
#navleft li {
  display: inline-block;
}
#navright li {
  list-style: none;
  position:relative;
  display:inline-block;
} 
#navright li ul{display:none;}
#navright li:hover ul{display:block;}
#navright li ul{position:absolute; top:20px; left:-35px;}
#navleft{float:left; padding:0;margin:0;}
#navright{float:right; padding:0; margin:0;}

DEMO