Scribd
Upload
12 views

Blog

This document contains the CSS code for styling an HTML blog menu. The CSS defines styles for the menu container, menu items, links, hover states, and a dropdown menu. It positions and styles the menu, items, links, and dropdown absolutely and relatively to create an expandable navigation menu for the blog.

Uploaded by

Nadya Putri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views

Blog

This document contains the CSS code for styling an HTML blog menu. The CSS defines styles for the menu container, menu items, links, hover states, and a dropdown menu. It positions and styles the menu, items, links, and dropdown absolutely and relatively to create an expandable navigation menu for the blog.

Uploaded by

Nadya Putri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

HTML BLOG

<style type="text/css">

/*CSS MENU*/

#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}

#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}

#menu ul{height:35px}

#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0


#000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}

#menu li:first-child{border-left: none}

#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}

#menu li:hover > a,#menu li a:hover{background:#111}

#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}

#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-


align:center}

#menu label span{font-size:12px;position:absolute;left:35px}

#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-
index:99;display:none;border:0;}

#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}

#menu li:hover ul.menus{display:block}

#menu a.home {background: #c00;}

#menu a.sub{padding:0 27px 0 14px}

#menu a.sub::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-


color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}

#menu ul.menus a:hover{background:#333;}

</style>

<!-- Mulai Area Menu -->

<nav id="menu">
<input type="checkbox" />

<label>Navigation</label>

<ul>

<li><a class="home" href="/">Home</a></li>

<li>Media Pembelajaran Fisika</li>

<li><a href="#">TTMPF</a></li>

<li><a href="#">TMMPF</a></li>

<li><a href="#">TTPLF</a></li>

<li><a href="#">TMPLF</a></li>

<!-- Mulai Area Menu Dropdown -->

<li><a class="sub" href="#">Menus</a> <ul class="menus">

<li><a href="#" title="Menus">Menus 1</a></li>

<li><a href="#">Page</a></li>

<li><a href="#">Menus2</a></li>

<li><a href="#">Menus 3</a></li>

<li><a href="#">Menus 4</a></li>

<li><a href="#">Menus 5</a></li>

</ul>

</li>

<!-- Area Dropdown Selesai--> </ul>

</nav>

<!-- Area Menu Selesai-->

You might also like