Page Custom CSS Styles

The following CSS rules hide default header elements and advertisement sections:

/* Hide default header and ads */
#header { visibility: hidden; }
#ad_t2, #cnblogs_c1, #under_post_news, 
#cnblogs_c2, #under_post_kb { display: none !important; }

/* Navigation container styling */
#nav-container ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background: #2c3e50;
}

#nav-container li {
    float: left;
}

#nav-container li a, .menu-btn {
    display: inline-block;
    color: #ecf0f1;
    background-color: #34495e;
    text-align: center;
    text-decoration: none;
    padding: 16px 20px;
    transition: background 0.3s ease;
}

#nav-container li a:hover, .dropdown-menu:hover .menu-btn {
    background-color: #1abc9c;
}

/* Dropdown menu styling */
#nav-container .dropdown-menu {
    display: inline-block;
    position: relative;
}

#nav-container .submenu {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 180px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    z-index: 1000;
}

#nav-container .submenu a {
    display: block;
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
}

#nav-container .submenu a:hover {
    background-color: #f1f1f1;
}

/* Show submenu on hover */
#nav-container .dropdown-menu:hover .submenu {
    display: block;
}

Sidebar Announcement Section

Configure the sidebar with profile information and social links:

<div class="profile-section">
    <img src="avatar.jpg" style="width:100%;border-radius:8px;"/>
    <h3 style="text-align:center">Developer Blog</h3>
    <p style="text-align:center">Software Engineer</p>
    <p style="text-align:center">Focus on Quality Assurance</p>
    <div style="text-align:center;margin:15px 0;">
        <a href="group-link" target="_blank">
            <img src="group-button.png" alt="Join Group"/>
        </a>
    </div>
</div>

<!-- Donation widget -->
<script>
var donationConfig = {
    imagePrefix: "https://cdn.example.com/images/",
    cssPrefix: "https://cdn.example.com/css/",
    buttonImageId: 1,
    buttonTip: "support",
    list: {
        alipay: { qrimg: "alipay-qr.png" },
        weixin: { qrimg: "wechat-qr.png" }
    }
};
</script>
<script src="donation.js"></script>

Header HTML Structure

Build a custom navigation menu with dropdown support:

<header class="blog-header">
    <h1 style="text-align:center;font-size:28px;padding:20px;">
        Welcome to My Technical Blog
    </h1>
</header>

<nav id="nav-container">
    <ul>
        <li class="dropdown-menu">
            <a href="/" class="menu-btn">Home</a>
            <div class="submenu">
                <a href="/about">About Me</a>
                <a href="/contact">Contact</a>
            </div>
        </li>
        
        <li class="dropdown-menu">
            <a href="/python" class="menu-btn">Python</a>
            <div class="submenu">
                <a href="/python/basics">Basics</a>
                <a href="/python/advanced">Advanced</a>
            </div>
        </li>
        
        <li class="dropdown-menu">
            <a href="/linux" class="menu-btn">Linux</a>
            <div class="submenu">
                <a href="/linux/commands">Commands</a>
                <a href="/linux/scripts">Scripts</a>
            </div>
        </li>
        
        <li><a href="/testing" class="menu-btn">Testing</a></li>
        
        <li><a href="/tools" class="menu-btn">Tools</a></li>
    </ul>
</nav>

<!-- GitHub corner badge -->
<a href="https://github.com/username" class="github-corner" target="_blank">
    <svg width="70" height="70" viewBox="0 0 250 250" 
         style="fill:#e74c3c;color:#fff;position:absolute;top:0;right:0;">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
    </svg>
</a>

Footer Interactive Effects

Add mouse click animation effects:

<!-- Click effect script -->
<script src="https://cdn.example.com/js/click-effect.js"></script>

Solution for Dropdown Menu Display Issue

The key fix for ensuring dropdown submenus appear correctly involves adding the :hover state properly:

/* Critical: ensure parent has position:relative */
.dropdown-menu {
    position: relative;
}

/* Submenu must be absolutely positioned */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
}

/* Show on hover */
.dropdown-menu:hover .submenu {
    display: block;
}

Ensure the submenu container is nested inside the dropdown-menu element for the hover selector to work correctly.