Menu Bar appears with no sub menus

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
Bean
Forum Newbie
Posts: 3
Joined: Mon Nov 29, 2010 11:03 am

Menu Bar appears with no sub menus

Post by Bean »

pickle | Please use [ syntax=php ], [ syntax=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.


Hi hello, i hava a menu that is not showing as i espected.

Is a menu bar horizontal whith submenus, but is only showing the horizontal bar and does not show the submenus.

Here is the html code to print the menu in is totality.

Code: Select all

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title></title>
    <style media="all" type="text/css">@import "menu_style.css";</style>
    </head>
    
    <body>
        <div>
        <ul class="menu">
        <li class="top"><a href="" target="_self" class="top_link"><span>Inserir</span></a>
        <ul class="sub">
            <li><a href="" target="_self">Clientes</a></li>
            <li><a href="" target="_self">Viaturas</a></li>
            <li><a href="" target="_self">Dispositivos</a></li>
        </ul>
        </li>
            <li class="top"><a href="" target="_self" class="top_link"><span>Passagem do Veiculo</span></a>
        <ul class="sub">
           <li><a href="" target="_self">Passagem na Portagem</a></li>
        </ul>
        </li>
            <li class="top"><a href="" target="_self" class="top_link"><span>Factura</span></a>
                <ul class="sub">
                    <li><a href="" target="_self">Calcular</a></li>
                </ul>
            </li>
        </ul>
        </div>
    </body>
</html>
here is also the css code, i apologize for the extansibility of the code

Code: Select all

.bg {background: url(images/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #009900; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#42c555; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#42c555 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#42c555 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}
I can figure it out why this is happening.
Pleased if anyone helps thanks a lot.


pickle | Please use [ syntax=php ], [ syntax=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.
User avatar
McInfo
DevNet Resident
Posts: 1532
Joined: Wed Apr 01, 2009 1:31 pm

Re: Menu Bar appears with no sub menus

Post by McInfo »

Keep it simple.

Code: Select all

ul.menu li ul {
    display: none;
}
ul.menu li:hover > ul {
    display: block;
}
Post Reply