php - Add right arrow to menu bar

552

I want to add css right arrow where ul has a ul child? Below is triangle right css. I want to add in my menu so that users know this menu has sub menu.

How is it possible to detect in pure css if ali has children of ul.children?

I want to add below triangle-right arrow to my css. Plz help.

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

php code for the menu:

<?php
$stmt = $pdo->query('SELECT * FROM `category` where `parent_id` = 0');
$stmt->execute();
?>

<ul >
  <?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 >
            <?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 >
                  <?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 for the menu bar

<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>
324

Answer

Solution:

Unfortunately css has no native 'hasParent' selector, but if you really do need pure-css you could try something like:

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>



People are also looking for solutions of the problem: property [id] does not exist on this collection instance.
Source

Share


Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.


Similar questions

Find the answer in similar questions on our website.

150 php - Add right arrow to menu bar
803 php - Can I create a menu with sub-menus in Agile Toolkit?
773 php - How to pass more than one argv variable using add slashes?
911 php - php5: convert svg to png base64 encoded
608 cakephp - How to track downloads using php
320 php - On how to use phpexcel reader
997 validate email address and URL? Convert from javascript to PHP
311 php - I'm adding a record which contains a price, £9.50, and it's being rounded up/down?
233 php - How to add browser file or image button in Tinymce
915 php - Why does PHPSESSID not exists in cookies.sqlite in Firefox?

People are also looking for solutions to the problem: php - How can I link a composer lib to a local source?

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.