0
ul에 ul 자식이있는 곳에 CSS 오른쪽 화살표를 추가하고 싶습니까? 아래 삼각형 오른쪽 CSS입니다. 사용자가이 메뉴에 하위 메뉴가 있음을 알 수 있도록 내 메뉴에 추가하고 싶습니다.CSS-ckeck 및 오른쪽 화살표 추가 lul ul
li에 ul.children의 하위 항목이있는 경우 어떻게 순수 CSS에서 감지 할 수 있습니까?
내 삼각형 - 오른쪽 화살표를 아래에 추가하고 싶습니다. Plz 도움. 메뉴에 대한
PHP 코드 : 메뉴 바
<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>
내 메뉴를 확인하기위한
<?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는 리
[CSS 부모 선택 도구가 있습니까?] (https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – Adrian
가능한 경우 jsfiddle을 추가하십시오. – claudio
편리한 : http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css – Snowmonkey