Css Menu Create In Html

alim · #1 (**permalink**) 12-28-2008, 3:20 PM

How can i learn abt css popup menu creating easily.. i have seen many videos bt haven't got any video abt creating Css menu, i have viewed many sites bt their created menus are so complicated as long as i think .. i have to learn the simple thing abt css menu..

like i have found a example

Html Command

Code:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a> 
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>

Css command

Code:

ul#navlist { font-family: sans-serif; }

ul#navlist a
{
font-weight: bold;
text-decoration: none;
}

ul#navlist, ul#navlist ul, ul#navlist li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}

ul#navlist li { float: left; }

ul#navlist li a
{
color: #ffffff;
background-color: #003366;
padding: 3px;
border: 1px #ffffff outset;
}

ul#navlist li a:hover
{
color: #ffff00;
background-color: #003366;
}

ul#navlist li a:active
{
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
}

ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }

ul#subnavlist li a
{
padding: 0px;
margin: 0px;
}

ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}

ul#navlist li:hover ul#subnavlist li a
{
display: block;
width: 10em;
border: none;
padding: 2px;
}

ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }

bt dn't u think its very complicated for first time learning.. i have much knwledge in css bt.. that how the keys and ids and selector works bt this css menu command i think really to complex to learn .. can u pleople help me to learn this...

On other think .. i have learned that

Code:

Display:None

will hide any object .. n

Code:

display:block

will shows that object .. am i right or wrong .. i dn't knw..

can anyone provide me a simple learning file of creating Css submenu -> submenu ..

thanks in advance

JohnH · #2 (**permalink**) 12-28-2008, 4:40 PM

Something from help: Using CSS and Styles with the Menu Control
Note that this is a ASP.Net forum, I think you perhaps have misunderstood that.

alim · #3 (**permalink**) 12-29-2008, 1:59 PM

thanks for helping i have seen it now ..

can you give me any address of only HTML and CSS menu creating learning..

or if you can send me a simple example of creating one menu item

JohnH · #4 (**permalink**) 12-29-2008, 2:32 PM

If you want to use ASP.Net you can have a look at the link I posted, also check out what you can do with AJAX. If ASP.Net is not your deal you can search the internet for pure DHtml solutions, there are many tutorials available. There also exist many non-ASP.Net forum sites for Html and Javascript (DHtml), but this one is for ASP.Net.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)