如何编辑水平下拉菜单

时间：2011-12-04 14:39:14

标签： html css

我正在学习创建一个网站并使用预先创建的HTML模板，所以我想知道如何获得现有菜单样式的下拉菜单导致现有菜单样式的颜色和一切都非常适合整个网站，但它并没有真正让我得到任何下拉菜单

所以我猜我需要使用javascript和一些css魔法。 所以这里是html文件中的代码，直到菜单代码

     <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>

这是css代码

         @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;}

有一个简单的方法来获取子菜单吗？

1 个答案:

答案 0 :(得分：0)

我会使用像SuckerFish这样的东西：http://www.htmldog.com/articles/suckerfish/dropdowns/
如果您将SuckerFish代码放在您的网站上，让它工作，然后根据您的模板进行相应调整，这可能会更容易。

相关问题
最新问题