我有div
具有特定大小,800px宽和50px高,里面我有一个无序的6个元素列表,与div
的中心对齐,到目前为止一切正常。
然后我想从每个元素创建一个下拉列表。现在我将第二个ul
对齐到容器div
的左侧。
我试图让它与每个元素的中心保持一致,而ul
元素的宽度不能相同。以下是我到目前为止:jsFiddle。有什么建议吗?
#bar {
width: 800px;
left: 50%;
transform: translate(-50%);
-webkit-transform: translate(-50%);
height: 50px;
background-color: lime;
position: absolute;
top: 20px;
}
.test-navbar ul {
width: 100%;
margin: 0 auto;
padding: 0;
list-style: none;
background-color: ;
text-align: center;
font-family: sans-serif;
}
.test-navbar li {
display: inline-block;
width: auto;
margin: 0;
padding: 0;
}
.test-navbar a {
text-align: center;
padding: 9px;
margin: 0;
display: block;
text-decoration: none;
color: #313131;
font-family: 'Oswald', sans-serif;
margin-top: 0px;
font-size: 23px;
background-color: ;
}
.test-navbar a:hover {
color: #f50057;
}
.test-navbar ul ul {
display: none;
position: absolute;
left: 0%;
background: #fff;
margin-left: 0px;
text-align: center;
width: 200px;
line-height: 40px;
padding: 10px;
}
.test-navbar ul ul li {
float: none;
width: 100%;
background-color: ;
}
.test-navbar ul ul a {
line-height: 0px;
padding: 5px 5px;
width: 100%;
background-color: ;
}
.test-navbar ul li:hover > ul {
display: block;
}

<div id="bar">
<div class="test-navbar">
<ul>
<li>
<a href="#">PASION</a>
<ul>
<li><a href="">EXTRA FROM PASION1</a></li>
<li><a href="">EXTRA FROM PASION2</a></li>
<li><a href="">EXTRA FROM PASION3</a></li>
<li><a href="">EXTRA FROM PASION4</a></li>
<li><a href="">EXTRA FROM PASION5</a></li>
<li><a href="">EXTRA FROM PASION6</a></li>
</ul>
</li>
<li><a href="#">EXTRA AREA</a></li>
<li><a href="#">VIDEO</a></li>
<li>
<a href="#">ANOTHER LINK</a>
<ul>
<li><a href="">EXTRA FROM PASION1</a></li>
<li><a href="">EXTRA FROM PASION2</a></li>
<li><a href="">EXTRA FROM PASION3</a></li>
<li><a href="">EXTRA FROM PASION4</a></li>
<li><a href="">EXTRA FROM PASION5</a></li>
<li><a href="">EXTRA FROM PASION6</a></li>
</ul>
</li>
<li><a href="#">LINK5 STYLE</a></li>
<li><a href="#">BYE</a></li>
</ul>
</div>
</div>
&#13;
答案 0 :(得分:2)
您可以使用相对+绝对位置,使用转换技巧。
.test-navbar li {
position: relative;
}
.test-navbar ul ul {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<强> jsFiddle 强>
答案 1 :(得分:0)
我对你的问题感到有点困惑,但我相信你正试图达到以下效果:http://demos.inspirationalpixels.com/dropdown-with-html-css-demo/
为此,您可以按照本教程进行操作:http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css
这是一个JS小提琴:https://jsfiddle.net/8apu5yp6/
HTML:
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li>
<a href="#">Movies <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li><a href="#">In Cinemas Now</a></li>
<li><a href="#">Coming Soon</a></li>
<li><a href="#">On DVD/Blu-ray</a></li>
<li><a href="#">Showtimes & Tickets</a></li>
</ul>
</li>
<li><a href="#">T.V. Shows</a></li>
<li class="current-item"><a href="#">Photos</a></li>
<li><a href="#">Site Help</a></li>
</ul>
</nav>
</div>
CSS:
body {
background:#bf5c71 url('body-bg.jpg');
}
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#3e3436;
}
.menu {
width:1000px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
font-family:'Ek Mukta';
}
.menu a {
transition:all linear 0.15s;
color:#919191;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#be5b70;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:19px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#2e2728;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#2e2728;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#3e3436;
}
答案 2 :(得分:0)
/* NAV BAR */
.test-navbar {
background-color: #333;
margin-bottom: 2px;
height: 40px;
color: white;
border-radius: 10px;
}
.test-navbar ul {
list-style: none;
overflow: hidden;
}
.test-navbar ul li {
float: left;
border-right: 2px solid #dede0e;
font-size: 1.5em;
}
.test-navbar ul li a {
color: white;
display: block;
text-decoration: none;
padding: 6px 10px;
}
.test-navbar ul li:hover {
background-color: #000000;
}
/* DROP DOWN MENU */
.test-navbar ul ul {
display: none;
list-style: none;
color: blueviolet;
background: #a80000;
position: absolute;
}
.test-navbar ul ul li {
float: none;
font-size: 1em;
border: none;
position: relative;
top: 100%;
left: 0;
border-top:3px solid white;
}
.test-navbar ul ul li a {
border-right: none;
padding: 0 20px;
}
.test-navbar ul li:hover > ul
{
display: block;
}
试试这个
来自我的演示nevbar