Automatski dropdown sub menu

Web dizajn i grafika
1

pozz svima,

moze li mi neko napisati komandu u css-u koja bi u mom navbaru na samo pointiranje misem, spustilaa submenu automatski. nesto kao dropdown menu (ne znam dal se tako zove)
siguran sam da znate sta mislim

nisam bas ni siguran da li je to uopste css komanda i dali za takve stvari mozda treba javascript

hvala puno

2

Ja mislim da treba JS!

3

suckerfish menu ako se ne varam

4

pa moguce je da se zove suckerfish menu… ma vidjeli smo svi to sto puta na sajtovim gad na pokaz misem submenu sa nekoliko linkova sam padne

stvarno nemam drugi nacin da objasnim :slight_smile: sry

5

Evo nešto što sam ja radio za jedan site. samo css nikakav JS ili tako nešto.

/* Main navigation menu, always visible */
#nav {
	background-color: #260e02;
}
#nav ul {
	display: block;
	height: 5em;
}

#nav ul li {
	background: transparent url(i/nav_bg.png) top left repeat-x;
	display: block;
	float: left;
	position: relative;
	height: 5em;
}

#nav ul li a {
	padding-top: 1.4em;
	width: 10em;
	display: block;
	line-height: 0.714;
	font-weight: bold;
	font-family: Helvetica, Arial, sans-serif;
	color: #fff;
	font-size: 1.4em;
	text-shadow: -1px 1px 0 #000;
	text-align: center;
	height: 2.17em;
}

#nav ul li a:hover, #nav ul li:hover {
	background: transparent url(i/nav_active_bg.png) top left repeat-x;
	color: #030;
	text-shadow: -1px 1px 0 #96ff00;
}

#nav ul li:hover a {
	color: #030;
	text-shadow: -1px 1px 0 #96ff00;
}

#nav ul li.active a {
	background: transparent url(i/nav_active_bg.png) top left repeat-x;
	color: #030;
	text-shadow: -1px 1px 0 #96ff00;
}

#nav ul li.first {
	background: transparent url(i/nav_bg_left.png) left 50% no-repeat;
	width: 3em;
	height: 5em;
}

#nav ul li.last {
	background: transparent url(i/nav_bg_right.png) right 50% no-repeat;
	width: 3em;
	height: 5em;
}

/* End main */

/* show submenu */
#nav ul li:hover ul {
	display: block;
}

/******************/

/* Submenu - show hide menu */

#nav li ul, #nav li li, #nav li li a, #nav li.active li a {
	background: none; /* remove any backgrounds */
	padding: 0;
}

#nav li ul {
	display: none;
	position: absolute;
	left: 0;
	height: 2.5em;
	top: 4.9em;
	z-index: 100;
}

#nav li li {
	height: 2.5em;
}

#nav li li a, #nav li.active li a {
	width: 15.41em;
	height: 2.083em;
	display: block;
	background-color: #94d50e;
	color: #030;
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 1.2em;
	font-weight: normal;
	text-shadow: -1px 1px 1px #96ff00;
	padding-left: 1.25em;
	line-height: 2.083;
	text-align: left;
}

#nav li li a:hover {
	background: transparent url(i/subnav_hover_bg.png) top left repeat-x;
	color: #fff;
	text-shadow: none;
}

a ovakova ti je struktura menua:
[HTML]

  •  
  • ><?=anchor( 'home', 'Home'); ?>
		<li <?php echo (is_page('about')) ? 'class="active"' : null ?>>
			<?=anchor('about', 'About Us'); ?>
			<ul>
				<li><?=anchor('about/mission', 'Mission and history'); ?></li>
				<li><?=anchor('about/mission#philosophy', 'Philosophy and approach'); ?></li>
				<li><?=anchor('about/leadership', 'Leadership'); ?></li>
				<li><?=anchor('about/leadership#board', 'Boards'); ?></li>
				<li><?=anchor('about/sponsors', 'Sponsors and Donors'); ?></li>
				<li><?=anchor('about/transparency', 'Transparency'); ?></li>
			</ul>
		</li>
		
		<li <?php echo (is_page('program')) ? 'class="active"' : null ?>>
			<?=anchor('program', 'Our programs'); ?>
			<ul>
				<li><?=anchor('program/tanzania', 'Tanzania: The Living School'); ?></li>
				<li><?=anchor('program/congo', 'DRC: Chicken and Rabbit Farms'); ?></li>
				<li><?=anchor('program/sharechange', 'Sharechange'); ?></li>
			</ul>
		</li>
		
		<li <?php echo (is_page('kids')) ? 'class="active"' : null ?>>
			<?=anchor('kids', 'For Kids'); ?>
			<ul>
				<li><?=anchor('kids#adventures', 'Animal Adventures'); ?></li>
				<li><?=anchor('kids#animals', 'Fun Animal Facts'); ?></li>
				<li><?=anchor('kids#africa', 'Fun Africa Facts'); ?></li>
			</ul>
		</li>
		
		<li <?php echo (is_page('blog')) ? 'class="active"' : null ?>>
			<?=anchor('http://blog.theslatefoundation.org/', 'Blog'); ?>
			<ul>
				<li><?=anchor('http://blog.theslatefoundation.org/search/label/drc', 'Notes from the field: DRC'); ?></li>
				<li><?=anchor('http://blog.theslatefoundation.org/search/label/tanzania', 'Notes from the field: Tanzania'); ?></li>
				<li><?=anchor('http://blog.theslatefoundation.org/search/label/news', 'Slate Foundation News'); ?></li>
			</ul>
		</li>
		
		<li <?php echo (is_page('getinvolved')) ? 'class="active"' : null ?>>
			<?=anchor('getinvolved', 'Get Involved'); ?>
			<ul>
				<li><?=anchor('getinvolved#donate', 'Donate'); ?></li>
				<li><?=anchor('getinvolved#volunteer', 'Volunteer'); ?></li>
				<li><?=anchor('getinvolved#events', 'Events'); ?></li>
				<li><?=anchor('getinvolved#contact', 'Contact Us'); ?></li>
			</ul>
		</li>
		<li class="last">&nbsp;</li>
	</ul>
</div>[/HTML]

ovo je na codeigniteru pa nemaš standardnih nego anchor() funkciju ali ćeš se nadam se snaći.