我按照指南制作下拉菜单,即使我希望它们向右弹出,而不是向下弹出。但它不起作用。
我会把CSS和HTML放在这里。
编辑:忘了我可以轻松缩进Vim中的所有代码,这使得复制所有文本并在代码块中获取更容易。
CSS:
#menubox
{
width: 8%;
height: 30%;
border: 10% solid #C7D93D;
border-radius: 5%;
position: fixed;
margin-top: 12%;
margin-left: 18%;
font-family: Ubuntu, Lucida console, Futura;
list-style: none;
float: left;
}
#menubox ul li a
{
text-align: left;
font-size: 200%;
color: #FFF0A5;
}
#menubox ul li
{
color: #468966;
font-family: Ubuntu, Lucida console, Futura;
float: left;
margin-right: 10px;
position: relative;
}
#menubox ul
{
color: #468966;
font-family: Ubuntu, Lucida console, Futura;
}
#menubox ul ul
{
position: absolute;
left: -9999px;
list-style: none;
}
#menubox ul ul li
{
padding-top: 1px;
float: none;
}
#menubox ul ul a
{
white-space: nowrap;
}
#menubox ul li a:hover
{
color: #FFB03B;
}
#menubox ul li:hover ul
{
left: 0;
}
#menubox ul li:hover a
{
text-decoration: none;
}
#menubox ul li:hover ul li a:hover
{
text-decoration: none;
}
div p
{
color: #FFF0A5;
text-align: center;
position: relative;
vertical-align: middle;
display: inline-block;
margin-top: 300px;
line-height: 60px;
}
div ul ul
{
}
#circle
{
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
background-color: #B64926;
width: 500px;
height: 500px;
display: block;
position: fixed;
margin-top: 9%;
margin-left: 52%;
text-align: center;
}
#title
{
text-color: #FFF0A5;
font-size: 350%;
display: inline;
text-align: center;
}
body
{
height: 100%;
width: 100%;
background-color: #468966;
font-family: Ubuntu, Lucida console, Futura;
}
.link
{
text-color: #FFF0A5;
text-decoration: none;
text-align: left;
}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<title>Home</title>
</head>
<body>
<div ID="menubox">
<ul>
<li><a href="http://folk.ntnu.no/arnstekl/" class="link">Home</a></li>
<li><a href="#" class="link">Music</a></li>
<ul>
<li><a href="https://soundcloud.com/arnsteinkleven/" class="link">My music</a></li>
<li><a href="http://folk.ntnu.no/arnstekl/gilberto.html" class="link">The Joao Gilberto project</a></li>
</ul>
<li><a href="https://www.github.com/arnstein" class="link">Github</a></li>
<li><a href="http://www.flickr.com/photos/92472314@N03/" class="link">Pictures</a></li>
</ul>
</div>
<div ID="circle">
<p ID="title"> A <br> r <br> n <br> s <br> t <br> e <br> i <br> n </p>
</div>
</body>
</HTML>
答案 0 :(得分:1)
您要在li
之前关闭ul
代码,但由于ul
中唯一有效的孩子是li
,您需要在之后关闭它。
<li><a href="#" class="link">Music</a>
<ul>
<li><a href="https://soundcloud.com/arnsteinkleven/" class="link">My music</a></li>
<li><a href="http://folk.ntnu.no/arnstekl/gilberto.html" class="link">The Joao Gilberto project</a></li>
</ul>
</li>
答案 1 :(得分:0)
Jquery + JqueryUI。看看文档。我曾经都是纯粹的CSS和HTML。尽量减少javascript。但是,有这么多现代网站(Facebook,谷歌)广泛使用javascript,jquery等。我正在使用javascript来完成我的大部分工作,而css只是设置格式。