Jesin's Blog

Welcome to the Portal of Technology

  • Facebook
  • GitHub
  • Google+
  • RSS
  • Twitter
  • Home
  • Categories
    • Domains
    • Linux
    • Networking
    • PHP
    • Virtualization
    • Web Design
    • Web Servers
    • Windows
  • WordPress Plugins
    • Custom Error Pages
    • HTTP Digest Authentication
    • Mailgun Email Validator
  • Toolbox
    • DNS Lookup Tool
    • htdigest Generator Tool Online
    • htpasswd Generator Tool Online
    • HTTP Headers Lookup Tool
    • MD5 Encryption Tool
    • Open Port Check Tool
    • SHA-1 Encryption Tool
    • URL Encoding/Decoding Tool
  • About Me
  • Contact Me
  • Sitemap
Home ›
css

How to create a horizontal drop down menu in CSS

November 2, 2011 Web Design Jesin A Leave a Comment

web design category thumbnail

Its been a long time since I wrote an article in this category (Web Design) so I decided to write an article on creating a horizontal drop down menu purely with HTML and CSS. To create a simple menu see CSS Horizontal Navigation Menu. Since the horizontal drop down menu uses only CSS and HTML it doesn’t work with Internet Explorer 6. The whole drop down menu concept makes use of the CSS pseudo class :hover, when you place the mouse pointer over a parent menu the CSS “display” attribute changes to “block” and displays the drop down menu, when you move the mouse pointer away from the menu the “display” attribute changes to “none” so the drop down menu disappears.Continue Reading…

Tags: css, html

CSS Tableless Design Tutorial

June 25, 2011 Web Design Jesin A 3 Comments

web design category thumbnail

This tutorial teaches you how to create your website neatly sans tables. All along people used tables to create column layouts and templates for their websites because they shied away from learning CSS and <div>s. If you thought creating web pages with divs are difficult you are about to change your mind after reading this tutorial, because HTML tables have many problems which can be overcome using divs. Take an example of changing the size of a column while using <table> tag, expanding a column also expands the column next to it. Of course you can use colspan and rowspan attributes to correct this to an extent but that makes it cumbersome and eats up precious bytes. With tableless design in CSS you can overcome all these problems and have complete control over your design, whats more search engines also start liking your website.Continue Reading…

Tags: css, html

CSS Horizontal Navigation Menu

January 4, 2011 Web Design Jesin A 2 Comments

web design category thumbnail

CSS Horizontal Navigation Menu is the basic menu sent on most of the websites just below theĀ  logo. It is very easy to create this type of menu using HTML unordered lists and CSS. It is search engine friendly and uses a tableless design. The CSS Horizontal Menu will be created with a hover effect to spice up things. This will change the color and style of a menu item when the mouse pointer is moved over it. Lets start step-by-step building the CSS Horizontal MenuContinue Reading…

Tags: css, html

Get a wealth of information delivered to your inbox. Subscribe and never miss a single article.

  • Tutorials and howtos
  • Code, scripts and commands
  • Online Tools

* No spam, unsubscribe anytime

Hire Me

  • SSL installation and hardening (A+ on Qualys SSL test)
  • Apache & Nginx configuration
  • Email deliverability improvement (10/10 on Mail Tester & MailGenius)
  • WordPress customization, optimization and migration
  • and much more…

    Tools

    • DNS Lookup Tool
    • htdigest Generator Tool Online
    • htpasswd Generator Tool Online
    • HTTP Headers Lookup Tool
    • MD5 Encryption Tool
    • Open Port Check Tool
    • SHA-1 Encryption Tool
    • URL Encoding/Decoding Tool

    Nav

    • Home
    • About Me
    • Contact Me
    • Privacy Policy
    • Sitemap
    Vultr SSD VPS

    Creative Commons License
    Jesin's Blog by Jesin A is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
    Based on a work at websistent.com.