0
ulにulの子がある場合、右矢印を追加しますか?以下は三角形の右のCSSです。このメニューにサブメニューがあることをユーザーに知らせるために、メニューに追加したい。メニューバーに右矢印を追加
li
にul.childrenの子がある場合、どのようにして純粋なCSSで検出することができますか?
私は三角形の右矢印をCSSに追加したいと思います。 Plzヘルプ。
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
メニューのPHPコード:
<?php
$stmt = $pdo->query('SELECT * FROM `category` where `parent_id` = 0');
$stmt->execute();
?>
<ul class="top-level-menu">
<?php while($menu1 = $stmt->fetch()){ ?>
<li><a href="<?php echo $menu1['category_link'] . "\n"; ?>"><?php echo $menu1['product'] . "\n"; ?></a>
<?php $stmt1 = $pdo->prepare('SELECT * FROM category WHERE parent_id = ?');
$stmt1->execute([$menu1['id']]);
?>
<ul class="second-level-menu">
<?php while($menu2 = $stmt1->fetch()){ ?>
<li><a href="<?php echo $menu2['category_link'] . "\n"; ?>"><?php echo $menu2['product'] . "\n"; ?></a>
<?php
$stmt2 = $pdo->prepare('SELECT * FROM category WHERE parent_id = ?');
$stmt2->execute([$menu2['id']]);
?>
<ul class="third-level-menu">
<?php while($menu3 = $stmt2->fetch()){ ?>
<li><a href="<?php echo $menu3['category_link'] . "\n"; ?>"><?php echo $menu3['product'] . "\n"; ?></a>
</li>
<?php } ?>
</ul>
</li>
<?php } ?>
</ul>
</li>
<?php } ?>
</ul>
メニューバーのCSS
<style>
/* Menu Styles */
.third-level-menu
{
position: absolute;
top: 0;
right: -220px;
width: 220px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li
{
height: 30px;
background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }
.second-level-menu
{
position: absolute;
top: 30px;
left: 0;
width: 200px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li
{
position: relative;
height: 30px;
background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu
{
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu > li
{
position: relative;
float: left;
height: 30px;
width: 100px;
background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu li:hover > ul
{
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a /* Apply to all links inside the multi-level menu */
{
font: bold 14px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
/* Make the link cover the entire list item-container */
display: block;
line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }
</style>