How to edit horizantal drop down menu


Tags: html,css

Problem :

I am learning to create a website and using a pre-created HTML template so i would like to know how to get the drop down menu with the existing menu style cause the existing menu style the color and everything is very suitable to the whole site but it doesnot really allow me to get any drop down menus

so i am guessing i need to use javascript and some css magic. So here is the code in the html file until the menu code

     <head>
       <title>Home</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <link href="style.css" rel="stylesheet" type="text/css" />
       <script type="text/javascript" src="js/jquery.js"></script>
       <script type="text/javascript" src="js/easySlider1.5.js"></script>
    <script type="text/javascript" src="js/stuHover.js"></script>
     <script type="text/javascript" charset="utf-8">
       // <![CDATA[
        $(document).ready(function(){   
    $("#slider").easySlider({
        controlsBefore: '<p id="controls">',
        controlsAfter:  '</p>',
        auto: true, 
        continuous: true
    }); 
      });
     // ]]>
         </script>
      <style type="text/css">
      .gallery { width:890px; height:326px; margin:0 auto; }
         #slider { margin:0; padding:0; list-style:none; }
           #slider ul,
          #slider li { margin:0; padding:0; list-style:none; }
        /* 
           define width and height of list item (slide)
         entire slider area will adjust according to the parameters provided here
           */
          #slider li { width:890px; height:326px; overflow:hidden; }
         p#controls { margin:0; padding:0; position:relative; }                                   #prevBtn { display:block; margin:0;                               overflow:hidden;    width:32px;             height:66px; position:absolute; left:-41px; top:-200px; }
     #nextBtn { display:block; margin:0; overflow:hidden; width:32px;  height:66px;        position:absolute; left: 906px; top:-200px; }
    #prevBtn a { display:block; width:32px; height:66px; background:url(images/l_arrow.gif) no-repeat 0 0; }
      #nextBtn a { display:block; width:32px; height:66px; background:url(images/r_arrow.gif) no-repeat 0 0; }
</style>
</head>
<body>
<div class="main">
  <div class="blok_header">
    <div class="header">
      <div class="logo"><a href="index.html"><img src="images/logo.gif" width="309" height="109" border="0" alt="logo" /></a></div>
      <div class="simple_text"><a href="#">Email</a> | <a href="#">Client Login</a></div>
      <div class="search">
        <form id="form1" name="form1" method="post" action="">
          <label>
            <input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Search..." />
            <input name="b" type="image" src="images/search.gif" class="button" />
          </label>
        </form>
      </div>
      <div class="clr"></div>
      <div class="menu">
        <ul>
          <li><a href="index.html" class="active">Home</a></li>
          <li><a href="services.html">Services</a></li>
          <li><a href="services.html">Services</a></li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="contact.html">Contact us</a></li>
        </ul>
      </div>

this is the css code

         @charset "utf-8";
body { margin:0; padding:0; width:100%; background: #fff;}
html { padding:0; margin:0;}

a { text-decoration:none;}
a:hover { text-decoration:underline;}
/* main */
.main { padding:0; margin:0 auto;}
.main h2 { font: bold 17px Arial, Helvetica, sans-serif; color:#ffffff; margin:5px 0; padding:10px 5px; border-bottom:1px solid #296c78;}
/********** header **********/
.blok_header { margin:0; padding:0; background:url(images/header_bg.gif) top repeat-x;}
.header { width:1000px; margin:0 auto; padding:0;}
.header img.twitter { float:right; margin:2px; padding:0;}
/* logo */
.logo { padding:0; margin:0; width:309px; float:left;}
/* simple_text */
.simple_text { text-align:right; font: normal 14px Arial, Helvetica, sans-serif; color:#737a7f; width:550px; float:right; padding:2px; margin:0;}
.simple_text a { font: normal 11px Arial, Helvetica, sans-serif; color:#fff; text-decoration:none;}
.simple_text a:hover { text-decoration:underline;}
/* search */
.search { padding:10px 0 0 0; margin:5px 0; width:220px; float:right;}
.search span { display:block; float:left;}
.search form { display:block; float:left; padding:5px 0;}
.search form .keywords { float:left; background: url(images/search_bg.gif) left top no-repeat; border:0; height:14px; width:180px; padding:5px 5px; margin:0; font:normal 11px Arial, Helvetica, sans-serif; color:#a1a1a1;}
.search form .button { float:left; margin:0; padding:0;}
/* menu     */
.menu { padding:3px 0 0 0; margin:0; width:450px; float:left; height:65px;}
.menu ul { padding:0; margin:0; list-style:none; float:left; border:0;}
.menu ul li { float:left; margin:0; padding:0 5px; border:0;}

.menu li:hover ul { display: block; position: absolute; }
.menu li:hover li { float: none;font-size: 11px;    }
.menu li:hover a { background: #617F8A; }
.menu li:hover li a:hover { background: #95A9B1; }
.menu ul li a { text-transform:uppercase; float:left; margin:0; padding:25px 15px; color:#fff; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a:hover { background: url(images/hover.gif) repeat-x right;}
.menu ul li a.active {background:url(images/hover.gif) repeat-x right;}
       /* sub-menus*/


/*header_text*/
.header_text { height:326px; margin:0; padding:0; background:url(images/slider_bg.gif) top center repeat-x;}
.header_text_resize {  width:982px; margin:0 auto; padding:0; }
.header_text .div { float:right; width:890px; padding:10px 0; margin:0;}
.header_text img.screen { float:left; margin:9px 0 0 0;}
.header_text .div .left1 { float:right; width:600px; padding:0; margin:0;}
.header_text .div .left1 img { float:left; padding:0 20px 0 10px; margin:0;}
.header_text .div .left1 h2 { border:0; font:bold 36px Arial, Helvetica, sans-serif; color:#fff; padding:10px; margin:0; text-transform:uppercase;}
.header_text .div .left1 h2 span {
    color:#01355d;
}
.header_text p { font: normal 11px   Arial, Helvetica, sans-serif; color:#fff; padding:10px; margin:0;}
.header_text p span { font: bold 18px Arial, Helvetica, sans-serif; color:#fff;}
/* header_text2 */
.header_text2 {height:144px; margin:0; padding:0; background:url(images/slider_bg2.gif) top center repeat-x;}
.header_text_resize2 {  width:982px; margin:0 auto; padding:0; }
.header_text2 h2 { width:300px; float:left; font:bold 36px Arial, Helvetica, sans-serif; color:#fff; padding:50px 0 0 0; margin:0; text-transform:uppercase; border:0;}
.header_text2 p { width:600px; float:left; font: normal 11px   Arial, Helvetica, sans-serif; color:#fff; padding:53px 0 0 0; margin:0;}
.header_text2 p span { font: bold 18px Arial, Helvetica, sans-serif; color:#fff;}
/********** body **********/
.body_resize { margin:0; padding:0;}
.body { width:1000px;  margin:0 auto; padding:0;}
.body h2 { border:0; font: normal 24px Arial, Helvetica, sans-serif; color:#0b4f7d; margin:0 0 10px 0; padding:15px 5px; border-bottom:1px solid #d3d6d8;}
.body img { float:left; padding:0; margin:10px;}
.body img.floated { float:right; padding:0; margin:10px;}
.body p { font:normal 11px  Arial, Helvetica, sans-serif; color:#5d5d5d; line-height:1.8em; padding:5px; margin:0;}
.body p span { font: bold 11px Arial, Helvetica, sans-serif; color:#3f3f3f;}
.body em { font: italic 11px Arial, Helvetica, sans-serif; color:#525252;}
.body a { text-decoration:underline; color:#7daf0e; line-height:1.8em;}
.body_small { width:300px; float:left; margin:0; padding:20px;}
.body_small p.test { height:143px; background:url(images/test.gif) top no-repeat; width:239px; padding:10px 15px; margin:10px 0;}
.body_small p.borded { border:1px solid #c3c7ca;}
.body_big { width:620px; float:left; margin:0; padding:20px;}
/* Navigation */    
ul.Navigation { padding:0; margin:0 40px 0 0; list-style:none; border:0;}
ul.Navigation li { margin:0; padding:3px 10px; border:0; line-height:0px;}
ul.Navigation li a { display:block; padding:5px 0 5px 25px; border-bottom:1px dashed #c4c4c4; background:url(images/sub_ul_li.gif) 10px center no-repeat; color:#737373; font:normal 11px  Tahoma, Geneva, sans-serif; text-decoration:none; line-height:1.6em;}
ul.Navigation li a:hover {  text-decoration:underline;}
ul.Navigation li a.active { text-decoration:underline;}
/*buttonss*/
.buttonss { width:150px; float:right; margin:10px; padding:5px;}
.buttonss a { border:1px solid #d6d6d6; background:#96148f; font: normal 11px   Tahoma, Geneva, sans-serif; color:#fff; padding:1px 4px; margin:2px 1px; text-decoration:none;}
.buttonss a:hover {text-decoration:none; color:#fff; background:#5e1496;}
/* END_bloga*/
/* FBG */
.FBG_top {background:#1d2226 url(images/FGB_bg.gif) top repeat-x; margin:0; padding:0;}
.FBG {  margin:0 auto; padding:0; width:1000px;}
.FBG_resize { width:290px; float:left; margin:15px 0; padding:20px;}
.FBG_resize2 { border-right:1px dashed #33393e; border-left:1px dashed #33393e; width:290px; float:left; margin:15px 0; padding:20px;}
.FBG h2 { border:0; font: normal 24px  Arial, Helvetica, sans-serif; color:#fff; padding:15px 5px; margin:0;}
.FBG p { font: normal 11px  Arial, Helvetica, sans-serif; color:#fefdfe; padding:5px; margin:0; line-height:1.8em;}
.FBG img { float:left; margin:0; padding:5px 10px;}
/********** footer **********/
.footer { margin:0; padding:0; height:76px; background:#14181b; border-top:1px solid #2b3136;}
.footer_resize { margin:0 auto; padding:0; width:1000px;}
.footer ul { margin:0; padding:30px 10px 10px 10px; list-style:none; float:left;}
.footer img { display:inline; margin:5px 10px; padding:0;}
.footer ul li { margin:0; padding:0 10px; float:left;}
.footer p { margin:0; padding:30px 20px 10px 20px; float:right; color:#373d42; font:normal 11px Arial, Helvetica, sans-serif; line-height:1.8em;}
.footer a { color:#46820d; font:normal 11px Tahoma, Geneva, sans-serif; text-decoration:none; line-height:1.8em;}
.footer a:hover { text-decoration:underline;}
/********** contact form **********/
.form { float:left; width:560px; margin-top:40px; margin-left:10px;}
/********** contact form **********/
#contactform { margin:0; padding:5px 10px;}
#contactform * { color:#F00;}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label { float:left; margin:0; width:100px; padding:5px 0; font:normal 13px Arial, Helvetica, sans-serif; color:#6e6e6e; text-transform:capitalize;}
#contactform label span { font:normal 10px Arial, Helvetica, sans-serif;}
#contactform input.text { width:430px; border:1px solid #c5c5c5; margin:5px 0; padding:5px 2px; height:15px; background:#fff;}
#contactform textarea { width:430px; border:1px solid #c5c5c5; margin:10px 0; padding:2px; background:#fff; height:250px;}
#contactform li.buttons input { padding:3px 0; margin:0 0 0 100px; border:0; color:#FFF;}
p.response { text-align:center; color:#2c2c2c; font:bold 11px Arial, Helvetica, sans-serif; line-height:1.8em; width:auto;}

p.clr, .clr { clear:both; padding:0; margin:0;}
li.bg, .bg { clear:both; border-bottom:1px dashed #c7c7c7; padding:10px 0 0 0; margin:0 0 10px 0; background:none; list-style:none;}
li.line, .line { border-top:1px solid #c7c7c7; padding:0; margin:20px 0; background:none; list-style:none;}

is there an easy way to get the submenus?



Solution :

I would using something like SuckerFish: http://www.htmldog.com/articles/suckerfish/dropdowns/
It is probably easier if you put the SuckerFish code on your site, get it working, then adjust accordingly for your template.


    CSS Howto..

    CSS — How to skin a select box with css

    How do I vertically align elements within a div in CSS?

    how to insert a ribbon inside a div how background without images only pure css? [closed]

    How do I make half a hexagon shape using CSS with a border over a rectangle with a border with an image in the middle of the half hexagon

    How can I translate with webkit-transform enough so that

    Show hidden image with jQuery

    How can I change CSS Class of a textbox on failed Validation and then again change it back on successful validation?

    Show/hide stuff according to checkboxes using CSS: Why this code won´t work?

    How to write Hover property with CSS for a piece wih :after and :before properties?

    How can I change the color CSS property of an element using jQuery

    How to Style Social Media Links Correctly

    How to change the background image of input button with jquery

    How to use nth-child with :hover to style multiple children?

    html css: how to draw dotted box around
    ?

    How do I apply CSS Transition to my responsive menu?

    How to find Sharepoint 2013 CSS Classes?

    How to keep a very tight control over the order of CSS files in Yii Framework

    How to highlight the parent item in active state without the children being affected in wordpress navigation?

    How to align text sideways using css transform

    background-image: url(“images/plaid.jpg”) no-repeat; wont show up

    How to set the padding of QTableView cells through CSS?

    CSS - How to horizontally center table whos position is absolute

    How can I use a CSS3 transform on an element without stretching the text inside it?

    How to create overlaying papers (pile) - CSS / HTML

    How to display 20 columns in html design

    how are large quantities of css templates produced?

    How to create this quote box with (preferably) HTML5/CSS3?

    how to change 'inner' lineheight of css text

    How to put an image in div with CSS?

    How to add css to my page via Git Hub raw?