php+css菜单鼠标悬停
时间: 2023-07-25 08:20:47 浏览: 94
您好!要实现鼠标悬停菜单的效果,可以使用PHP和CSS配合实现。以下是一个简单的示例:
HTML代码:
```
<ul class="menu">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
</ul>
```
CSS代码:
```
.menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li:hover > ul {
display: block;
}
.menu ul {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
margin: 0;
list-style: none;
background: #fff;
border: 1px solid #ccc;
}
.menu ul li {
display: block;
}
.menu ul li a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
.menu ul li a:hover {
background: #f2f2f2;
}
```
PHP代码:
```
<?php
$menu_items = array(
array('text' => '菜单1', 'url' => '#'),
array('text' => '菜单2', 'url' => '#'),
array('text' => '菜单3', 'url' => '#'),
array('text' => '菜单4', 'url' => '#')
);
?>
<ul class="menu">
<?php foreach ($menu_items as $item) { ?>
<li>
<a href="<?php echo $item['url']; ?>"><?php echo $item['text']; ?></a>
<!-- 子菜单 -->
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<?php } ?>
</ul>
```
这里的PHP代码只是用来生成菜单项,您可以根据自己的需要进行修改。关键的部分是CSS代码,它实现了鼠标悬停时显示子菜单的效果。您可以根据自己的需求进行修改CSS。希望这个示例对您有所帮助!
阅读全文
相关推荐
















