0
我只是在玩一个例子,并陷入了一些东西。 我想知道什么可能会造成你在下面的截图中看到的差距,一直在尝试不同的事情,但我想我需要一些帮助。下拉列表使用css行为不当(项目之间的空白)
的代码如下:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="menuhovercss.css">
<base target="main" />
<title>
home
</title>
</head>
<body>
<div>
<ul>
<li><a href="">Home</a> </li>
<li><a href="#">Tracks</a>
<ul>
<li><a href="">SD</a>
<ul>
<li><a href="">Schedule</a></li>
<li><a href="">Materials</a></li>
<li><a href="">Contacts</a></li>
</ul>
</li>
<li>
<a href="">GIS</a>
<ul>
<li><a href="">Schedule</a></li>
<li><a href="">Materials</a></li>
<li><a href="">Contacts</a></li>
</ul>
</li>
<li>
<a href="">UI</a>
<ul>
<li><a href="">Schedule</a></li>
<li><a href="">Materials</a></li>
<li><a href="">Contacts</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Web of the week</a> </li>
</ul>
</div>
</body>
</html>
CSS
ul {
padding: 0; /*Remove Indentation*/
list-style: none; /*Remove leading bullet*/
/*position:relative;
display:block;*/
}
ul li {
float: left; /*Force it to one line*/
width: 130px; /*Set each menu item to specific width*/
text-align: center; /*centers each inside its own 'cell'*/
/*display:list-item;*/
/*border-bottom: 5px solid #2ecc71;*/
}
ul li a {
display: block;
padding: 5px 10px; /* Create Padding for each link*/
color: #333;
background-color: #f2f2f2;
text-decoration: none;
border-bottom: 4px solid green;
}
ul li a:hover { /* Change color when hovering */
color: #fff;
background-color: #939393;
}
ul ul {
display: none; /*Hide the submenus*/
}
ul li:hover > ul {
display: list-item; /*Show the submenus when hovering > means direct child*/
/*float: left;*/
}
ul ul > li { /*Submenu*/
float: left;
position: relative;
border-bottom: none;
}
ul ul ul li { /*Sub-submenu*/
position: absolute relative;
top: -25px;
left: 130px;
}
,并从该行删除'absolute':'的位置是:绝对相对;''你UL UL UL li'规则内(它不乱任何东西,它只是马虎) – myfunkyside 2014-10-06 23:53:38
完美的作品:) – AngelicCore 2014-10-07 00:13:05