Css 垂直下拉菜单
我正在尝试创建一个下拉菜单类似于在这个网站上找到的 我已经创建了下拉菜单,但我不知道如何定位像在网站上找到的列表。和网站一样,我也想知道如何在标题下定位列表。非常感谢您提供的任何帮助Css 垂直下拉菜单,css,drop-down-menu,Css,Drop Down Menu,我正在尝试创建一个下拉菜单类似于在这个网站上找到的 我已经创建了下拉菜单,但我不知道如何定位像在网站上找到的列表。和网站一样,我也想知道如何在标题下定位列表。非常感谢您提供的任何帮助 /* NAVIGATION START */ nav { display: block; width: 960px; margin: 100px auto; text-align: center; } nav select { display: none; } #men
/* NAVIGATION START */
nav {
display: block;
width: 960px;
margin: 100px auto;
text-align: center;
}
nav select {
display: none;
}
#menu {
width: 608px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#menu ul {
margin: 0px;
padding: 0px;
}
#menu ul li {
background-color: #666;
float: left;
border: 1px solid #CCC;
position: relative;
list-style-type: none;
}
#menu ul li:hover ul {
visibility: visible;
background-color: #333;
}
#menu ul li a {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 30px;
color: #FFF;
text-decoration: none;
text-align: center;
display: block;
height: 30px;
width: 150px;
}
#menu ul ul {
position: absolute;
visibility: hidden;
left: -1px;
top: 31px;
}
#menu ul li:hover {
background-color: #333;
}
#menu ul li ul li a:hover {
background-color: #069;
}
#menu ul li a:hover {
color: #0FF;
}
#leftmenu {
position: absolute;
left: 165px;
top: 20px;
}
#rightmenu {
position: absolute;
right: 164px;
top: 20px;
}
/* NAVIGATION END */
<nav>
<div id="menu">
<ul id='leftmenu'>
<li><a href="#">BOAT</a>
<ul>
<li><a href='#'>Specs & Boat Plans</a></li>
<li><a href='#'>Itineraries</a></li>
<li><a href='#'>Exteriors</a></li>
<li><a href='#'>Diving & Water Toys</a></li>
</ul>
</li>
</ul>
<ul id='rightmenu'>
<li><a href="#">LIFE ON BOARD</a>
<ul>
<li><a href='#'>Itineraries</a></li>
<li><a href='#'>Dining</a></li>
<li><a href='#'>Family Fun</a></li>
<li><a href="#">Lifelong Learning</a></li>
<li><a href="#">The Crew</a></li>
</ul>
</li>
</ul>
</div>
</nav>
以下是一些CSS帮助您入门:
/* NAVIGATION START */
nav {
display: block;
width: 960px;
margin: 100px auto;
text-align: center;
}
nav select {
display: none;
}
#menu {
width: 608px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#menu ul {
margin: 0px;
padding: 0px;
}
#menu ul li {
background-color: #666;
float: left;
border: 1px solid #CCC;
position: relative;
list-style-type: none;
}
#menu ul li:hover ul {
visibility: visible;
}
#menu ul li a {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 30px;
color: #FFF;
text-decoration: none;
text-align: center;
display: block;
height: 30px;
width: 150px;
}
#menu ul ul {
position: absolute;
visibility: hidden;
left: -1px;
top: 31px;
}
#menu ul li:hover {
background-color: #333;
}
#menu ul li ul li a:hover {
background-color: #069;
}
#menu ul li a:hover {
color: #0FF;
}
#leftmenu {
position: absolute;
left: 165px;
top: 20px;
}
#leftmenu li>ul>li {
margin:1em 0;
}
#leftmenu li:nth-child(2) {
margin-left:20px;
}
#leftmenu li:nth-child(3) {
margin-left:40px;
}
#leftmenu li:nth-child(4) {
margin-left:60px;
}
#rightmenu {
position: absolute;
right: 164px;
top: 20px;
}
#rightmenu li>ul>li {
margin:1em 0;
}
#rightmenu li:nth-child(2) {
margin-left:-20px;
}
#rightmenu li:nth-child(3) {
margin-left:-40px;
}
#rightmenu li:nth-child(4) {
margin-left:-60px;
}
#rightmenu li:nth-child(5) {
margin-left:-80px;
}
和a.您可以简化
#menu {
width: 608px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
到
为此。。。呃。。。级联效应,您可能需要使用类似
<li style="padding-left: some value here">
并且随着时间的推移而减少,因为你把它们浮到了正确的位置。此外,菜单必须与从最左边的菜单项到最右边的空间一样宽;它不能与一个菜单项一样宽
<li style="padding-left: some value here">