2017-12-29 3 views
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> 

答えて

0

は残念ながらCSSがネイティブ 'HASPARENT' セレクタを持っていますが、あなたが本当に 純粋に必要がある場合-cssのようなものを試すことができます:

li { 
 
    position: relative; 
 
    float: left; 
 
    clear: left; 
 
} 
 

 
li > ul::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 5px; 
 
    right: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 5px solid transparent; 
 
    border-left: 5px solid red; 
 
    border-bottom: 5px solid transparent; 
 
}
<ul> 
 
    <li>lorem</li> 
 
    <li>lorem</li> 
 
    <li>lorem</li> 
 
    <li>lorem</li> 
 
    <li> 
 
    lorem 
 
    <ul> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
    </ul> 
 
    </li> 
 
</ul>

関連する問題