我遇到以下问题:
- 我想要在导航栏的顶部和底部留出 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;
}
最佳答案
您将不得不使用更多的 CSS 来获得准确的样式,但我认为这是您要走的方向:
<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;
}
关于html - 使用CSS格式化下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23838531/