超快速CSS和HTML：2导航条子导航-Java 学习之路

我目前是CSS新手，我希望得到一个关于如何设置一个有2个导航栏（并排）的页面的响应 .

1侧（左侧导航栏）有：登录和注册

1侧（右侧导航栏）具有：添加商家，添加商家，商务中心，趋势（以及趋势，还有单词和数据的子菜单）

我目前无法：

让我的右侧导航栏与左侧导航栏位于同一行
让词汇和数据的子菜单在趋势下很好地适应

请帮忙，因为我一直试图找出它近一天！

<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

1 回答

你必须学习很多东西，如如何使用浮动元素，定位保护和样式等 . 我修改了你的代码并使其正常工作 .

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

回复于 2024-04-26T03:16:20+08:00

超快速CSS和HTML：2导航条子导航

1 回答

相关问题