CODEWITHSUNDEEP
htmlcss
raghu
raghu

Reputation: 317

How to use vertical menus in HTML and css?

How to use vertical menus and I have tried the vertical menu bar.Iam not using jquery or javascript only html and css.While iam mouseover this vertical menu it is not properly working.Please help me.

Here is the code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical menu</title>
<style type="text/css">
.headerouter1{clear:both;}
.headerinner1{ margin:0 auto; width:990px;}
.menustart{ background:url(images/menustart.png) no-repeat; width:16px; height:40px; float:left;}
.menumiddle{background:url(images/menumiddle.png) repeat-x; width:900px; height:40px; float:left; }
.menumiddle ul li{ float:left; font-family:Arial, Helvetica, sans-serif; padding:15px 20px 0px 20px;font-size:14px; background:url(images/menudivider.png) no-repeat;}
.menumiddle ul li a{text-decoration:none; font-family:Arial, Helvetica, sans-serif;padding:15px 20px 0 20px;color:#FFFFFF;}
.menumiddle ul li a:hover{ color:#000;}
.menuend{ background:url(images/menuend.png) no-repeat; width:15px; height:40px;float:left;}
.menumiddle ul{ margin:0px; }
.menumiddle ul li{ list-style:none; float:left; }
.menumiddle ul li a{ text-decoration:none;}
.menumiddle ul li a:hover{ }
.menumiddle ul li a.active{ }
.menumiddle ul li ul{display: none;}
.menumiddle ul li:hover ul{ margin-top:6px;position:absolute;width:195px;display:block;padding:15px 0px 0px 0px;background:#fff;  margin-left:-10px;border-bottom:2px solid #000;border-left:2px solid #000;border-right:2px solid #000;}
.menumiddle ul li:hover ul li a{float:left;clear:both;width:185px;font:bold 12px arial;color:#000;background:none; padding:0px 5px 4px 5px; border-bottom:1px solid #fafafa; border-radius:15px;margin-left:-20px; }
.menumiddle ul li:hover ul li a:hover{ color:#009cff;}
</style>
</head>

<body>
<div class="headerouter1">
<div class="headerinner1 ">

<div class="menustart"></div>
        <div class="menumiddle">
            <ul>
            <li><a href="#">Home</a>
            <ul style="list-style:none;">
            <li><a href-"#">sdsd</a></li>
            <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
            </ul></li>
            <li><a href="#">Home</a>
            <ul style="list-style:none;">
            <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
            </ul></li>
            </li>

<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
<div class="menuend"></div>

</div>
</div>
</div>
</div>
</body>
</html>

Upvotes: 2

Views: 1453

Answers (2)

ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

Reputation: 2804

Your CSS is very poorly written. You should only have an element listed once and all the properties defined within. Also when creating an HTML anchor use = instead of -.

<a href="#">sdsd</a>

Here's the basics of what you're trying to achieve in HTML5.

<!DOCTYPE html>
<html>
    <head>
        <title></title>

        <style type="text/css">
            .menumiddle ul {list-style: none; padding: 0px; font-family:Arial, Helvetica, sans-serif;}
            .menumiddle li a {text-decoration: none;}
            .menumiddle li a:hover {text-decoration: underline;}
        </style>


        <meta charset="UTF-8">
    </head>
    <body>
        <div class="menumiddle">
            <ul>
                <li><a href="page1.html">Page 1</a></li>
                <li><a href="page2.html">Page 2</a></li>
                <li><a href="page3.html">Page 3</a></li>
            </ul>
        </div>
    </body>
</html>

By default list elements are position underneath each other (block) if you would prefer to change this to a horizontal list add the following CSS statement.

.middlemenu li {display: inline;}

You do not need to use float: left at any time when position elements within a list.

Upvotes: 0

w3uiguru
w3uiguru

Reputation: 5895

Raghu do you need some thing like that http://jsfiddle.net/K6dvs/ in which you vertical dropdown menu is sliding down when hover.

.menumiddle > ul{height:40px; overflow:hidden;}

and change some padding see in fiddle.

Upvotes: 1

Related Questions