我在这个网站上工作,我需要制作当您将鼠标悬停在导航菜单上时展开的导航菜单,并且具有分隔条目的白色垂直条。一直到右边就是搜索的能力。
站点是:http://www.problemio.com我说的是在屏幕顶部附近有背景图像的元素,上面有“问题支持”字样
我有那个 div 的 html:
<div class="nav_bar">
<!-- connect buttons and menu go here -->
<div class="nav">
<div class="icons">
</div>
<div class="menusystem" id="site_nav">
<ul class="main_menu_ul">
<li class="main_menu_li"><a href="http://www.problemio.com/">Support</a>
</li>
<li class="main_menu_li"><a href="http://www.problemio.com/">Problems</a>
<ul class="child_menu_ul">
<li class="first"><a href="http://www.problemio.com/">Categories</a></li>
</ul>
</li>
</ul>
<form name="form" method="post">
Search: <input type="text" size="20"></input>
<input type="submit" class="button" value="Search"></input>
</div>
</div>
我有这个 nav_bar 的 css
.nav_bar
{
background-image: url('http://www.problemio.com/img/ui/problemiomainbluebar.png');
background-repeat: repeat-x;
border-bottom: 1px solid #462c1f;
border-top: 1px solid #462c1f;
margin-top: 5px;
}
/* styles for nav_bar: */
.nav_bar a
{
z-index: 20;
width:100%;
/* background:#ffce2e; the comehike strip with orange */
/* background:#2e6ea4; the comehike strip with blue */
color: white;
position: relative;
}
.nav_bar .nav
{
width:60em;
height: 40px;
margin: 0 auto;
position: relative;
z-index: 20;
}
.nav_bar .icons
{
position: absolute;
left: 0;
display: inline-block;
}
.nav_bar .icons div
{
display: inline-block;
position: relative;
top: 10px;
float:left;
}
.nav_bar .nav #site_nav
{
position: absolute;
right: 0.5em;
top: 0.2em;
z-index: 20;
}
以及构成下拉菜单的
.menusystem
{
position: absolute;
font-size: 1em;
}
.menusystem ul, .menusystem li
{
margin: 0;
padding: 0;
}
.menusystem li
{
list-style: none outside none;
}
.menusystem ul
{
list-style: none;
/*
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
*/
}
.menusystem ul li
{
position: relative;
/*
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
*/
}
.menusystem ul li ul
{
display: none;
position: absolute;
top: 1.6em;
right: 0;
width: 10em;
}
.menusystem li a {
display: block;
padding: 5px 10px;
/* dark blue */
/* border: 1px solid #2e6ea4; */
text-decoration: none;
}
.menusystem ul li.main_menu_li {
float:right;
width: 10em;
margin-right:0.2em;
text-align: center;
}
/* IE-Win (Holly hack) reads the list item line breaks, so lets hide those \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
.menusystem li:hover ul, .menusystem li.mouseHover ul {
display: block;
}
.menusystem li ul.child_menu_ul li a
{
/*
color: #fff;
*/
color: #fff;
/* light blue */
/* background: #7ba9c9; */
font-size: 80%;
text-shadow: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-bottom: 1px solid #2e6ea4;
border-top: 0px;
background: none repeat scroll 0 0 #2E6EA4;
}
.menusystem li ul.child_menu_ul li.first a
{
-moz-border-radius-topleft: 14px;
-moz-border-radius-topright: 14px;
-webkit-border-top-left-radius: 14px;
-webkit-border-top-right-radius: 14px;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
border-top: 1px solid #2e6ea4;
}
.menusystem li ul.child_menu_ul li.last a
{
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-bottomleft: 14px;
-moz-border-radius-bottomright: 14px;
-webkit-border-bottom-left-radius: 14px;
-webkit-border-bottom-right-radius: 14px;
}
.menusystem li ul.child_menu_ul li.only a
{
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
}
.menusystem li ul.child_menu_ul li a:hover {
color: #ff0;
background: #2e6ea4;
}
/*.menusystem li.main_menu_li a */
.menusystem ul.child_menu_ul a
{
color: #fff;
/*
background: -moz-linear-gradient(100% 100% 90deg, #668eb8, #2e6ea4 );
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#668eb8), to(#2e6ea4));
*/
text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
/*
-moz-text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
-webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
*/
}
.menusystem li.main_menu_li a:hover
{
/* background-color: #2e6ea4; */
color: #ff0;
}
ul li.spaced
{
padding-bottom: 10px;
font-weight: normal;
}
最佳答案
为什么不是简单的边框?
#site_nav>ul>li+li {
border-left: solid 2px white;
}
这会在 ul
的任何 li
直接兄弟的左侧添加一个 2px 厚的白色边框(因此,不是第一个)紧邻 ul
立即在 #site_nav
内。
关于html - 如何在结构为 <ul> <li> 的菜单之间添加分隔符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7649874/