كيفية جعل قائمة Bootstrap submenu دائماً مفتوحة

To make the Bootstrap submenu always open without requiring a click on the menu name, you can achieve this by adding the show class to the submenu ul element. Here’s the updated code:

html
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Navtitle>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
    .nav-item {
        position: relative;
    }

    .nav-link::after {
        content: '▾';
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    .dropdown-menu {
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
    }

    .nav-item:hover .dropdown-menu {
        display: block;
    }

    .dropdown-menu a {
        display: block;
        padding: 0.5rem 1rem;
        color: #333;
        text-decoration: none;
    }
style>
head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Homea>
            li>
            <li class="nav-item">
                <a class="nav-link" href="#">Abouta>
                <ul class="dropdown-menu show">
                    <li><a href="#">Historya>li>
                    <li><a href="#">Teama>li>
                    <li><a href="#">Contacta>li>
                ul>
            li>
            <li class="nav-item">
                <a class="nav-link" href="#">Servicesa>
            li>
            <li class="nav-item">
                <a class="nav-link" href="#">Portfolioa>
            li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contacta>
            li>
        ul>
    div>
nav>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">script>
body>
html>

بهذا التحديث، تم إضافة الكلاس show إلى عنصر ul للقائمة الفرعية submenu، وهذا يجعلها مفتوحة دائمًا بدون الحاجة للنقر على اسم القائمة.

المزيد من المعلومات

كيفية إضافة مستودع Github إلى GitKraken

كيفية فحص النصوص للانعكاس في Python