Scribd
Upload
24 views3 pages

Blog

The document provides a CSS style guide for creating a horizontal menu with submenus for a blog page. It includes styling for the main navigation bar and sub-navigation items, as well as links to various sections such as 'Home', 'Profile', 'Service Standards', and 'Information'. The structure is designed to enhance user navigation and accessibility on the blog site.

Uploaded by

drh. Sri Wardiyah
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
24 views3 pages

Blog

The document provides a CSS style guide for creating a horizontal menu with submenus for a blog page. It includes styling for the main navigation bar and sub-navigation items, as well as links to various sections such as 'Home', 'Profile', 'Service Standards', and 'Information'. The structure is designed to enhance user navigation and accessibility on the blog site.

Uploaded by

drh. Sri Wardiyah
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

[Link]

com/2014/01/Cara-Memasang-Menu-Bar-dan-Sub-Menu-Bar-di-Halaman-
[Link]

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;width:100%margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px


solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-


weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-


height:1; background:#0d5e88; }

#secnav a { font-family:Georgia, &quot;Times New Roman&quot;, Times, serif; font-style:italic; font-


weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:50px; text-
decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li { height:30px; border-top:1px solid #fff; }

#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0


10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav [Link] ul ul, #secnav [Link] ul ul ul
{ left:-999em; }

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav [Link] ul, #secnav li
[Link] ul, #secnav li li [Link] ul { left: auto; }

#secnav li:hover,#secnav [Link] { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>
<div id='cat-nav'>

<ul class='fl' id='secnav'>

<li><a href='[Link]
[Link],[Link]
[Link]'>BERANDA</a></li>

<li><a href='#'>PROFIL</a></li>

<li><a href='#'>STANDART PELAYANAN</a>

<ul id='sub-custom-nav'>

<li><a href='[Link]
[Link]'>STANDART PELAYANAN PUBLIK DAN SOP</a></li>

<li><a href='[Link]
[Link]'>PENERAPAN SNI ISO/IEC:17025:2017</a></li>

<li><a href='[Link]
[Link]'>KEBIJAKAN DAN SASARAN MUTU</a></li>

<li><a href='[Link]
[Link]'>MANFAAT PELAYANAN SNI ISO/IEC:17025:2017</a></li>

<li><a href='[Link]
PENGADUAN</a></li>

<li><a href='[Link]
[Link]'>MONITORING DAN EVALUASI</a></li>

</ul>

</li>

<li><a href='#'>JENIS PELAYANAN</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Mikrobiologi</a></li>

<li><a href='#'>Serologi</a></li>

</ul>

</li>

<li><a href='#'>INFORMASI</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Kontak</a></li>
<li><a href='#'>Sub Menu4b </a></li>

</ul>

You might also like