使用 CSS 格式化下拉菜单答案

【问题标题】：formatting drop down menus with css使用 CSS 格式化下拉菜单
【发布时间】：2014-05-23 21:24:59
【问题描述】：

我遇到以下问题：

我想要导航栏顶部和底部的内边距为 8 像素。
标题左对齐。
链接右对齐。
导航栏的背景宽度为 100%，但宽度为 1080 像素（居中）
下拉菜单只有一个水平边框分隔每个链接
并从下拉菜单中填充为上下 4px 和缩进 4px

这是我的 jsfiddle 的链接：http://jsfiddle.net/6L8jJ/

HTML

<header>

  <div class="nav_top_bar">
    <nav class="nav_top_menu">
      <ul>
        <li class="nav_top_title"><b>title</b></li>
        <li><a href="" class="blue">option</a>
          <ul>
            <li><a href="" class="blue">suboption</a></li>
          </ul>
        </li>
        <li><a href="" class="green">option</a>
          <ul>
            <li><a href="" class="green">suboption 1</a></li>
            <li><a href="" class="green">suboption 2</a></li>
          </ul>
        </li>  
        <li><a href="" class="orange">option</a>
          <ul>
            <li><a href="">suboption 1</a></li>
            <li><a href="">suboption 2</a></li>
          </ul>
        </li>
        <li><a href="" class="purple">option</a></li>
        <li><a href="" class="yellow">option</a></li>
      </ul>
    </nav>
  </div>

</header>

CSS

.nav_top_bar {
 background-color: #333333;
 padding: 8px 0;
 width: 100%;
clear: both;
}

.nav_top_menu {
color: #c3c3c3;
font-size: 1em;
margin: 0 auto;
text-align: left;
width: 1080px;
}

.nav_top_title {
padding-right: 50px;
}

.nav_top_menu ul {
list-style: none;
text-align: left;
margin: 0;
padding: 0;
}

.nav_top_menu ul li {
display: inline;
float: left;
position: relative;
}

.nav_top_menu ul li a {
color: #c3c3c3;
display: block;
margin-left: 1px;
/* padding: 8px 16px; */
padding: 8px 20px 8px 0px;
white-space: nowrap;
}

.nav_top_menu ul li a:hover {
color: #ffffff;
}

.nav_top_menu li ul {
background-color: #333;
display: none;
}

.nav_top_menu li:hover ul {
border-top: 1px #ccc solid;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
display: block;
position: absolute;
}

.nav_top_menu li:hover li {
border-bottom: 1px #ccc solid;
float: none;
font-size: 0.8em;
font-weight: bold;
padding-left: 4px;
text-align: left;
}

【问题讨论】：

标签： html css navigation

【解决方案1】：

你必须使用更多的 CSS 来获得准确的样式，但我认为这是你想要的方向：

http://jsfiddle.net/6L8jJ/1/

<header>

  <div class="nav_top_bar">
    <nav class="nav_top_menu">
      <ul>
        <li><a href="" class="blue">option</a>
          <ul>
            <li><a href="" class="blue">suboption</a></li>
          </ul>
        </li>
        <li><a href="" class="green">option</a>
          <ul>
            <li><a href="" class="green">suboption 1</a></li>
            <li><a href="" class="green">suboption 2</a></li>
          </ul>
        </li>  
        <li><a href="" class="orange">option</a>
          <ul>
            <li><a href="">suboption 1</a></li>
            <li><a href="">suboption 2</a></li>
          </ul>
        </li>
        <li><a href="" class="purple">option</a></li>
        <li><a href="" class="yellow">option</a></li>
      </ul>
    </nav>
    <h1>Title</h1>
  </div>

</header>

还有 CSS

.nav_top_bar {
  background-color: #333333;
  padding: 8px;
  width: 100%;
}
h1 {
    font-size: 14px;
    color: #fff;
}
nav {
    float: right;
}
.nav_top_menu ul {
  list-style-type: none;
  text-align: left;
  margin: 0;
  padding: 0;
}
.nav_top_menu ul li {
  display: inline;
  float: left;
  position: relative;
}
.nav_top_menu ul li > ul li {
  display: block;
  padding: 8px;
}
.nav_top_menu ul li > ul li a {
  display: inline;
}
.nav_top_menu ul li a {
  color: #c3c3c3;
  display: block;
  margin-left: 1px;
  padding: 8px 20px 8px 0px;
  white-space: nowrap;
}
.nav_top_menu ul li a:hover {
  color: #ffffff;
}
.nav_top_menu li ul {
  background-color: #333;
  display: none;
}
.nav_top_menu li:hover ul {
  border: 1px #ccc solid;
  display: block;
  position: absolute;
}
.nav_top_menu li:hover li {
  border-bottom: 1px #ccc solid;
  float: none;
  font-size: 0.8em;
  font-weight: bold;
  padding-left: 4px;
  text-align: left;
}

【讨论】：