html - 如何编辑水平下拉菜单-6ren

html - 如何编辑水平下拉菜单

转载作者：行者123 更新时间：2023-11-28 14:22:06

我正在学习创建网站并使用预先创建的 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;}

有没有简单的方法来获取子菜单？

最佳答案

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

关于html - 如何编辑水平下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8376037/

文章推荐： javascript - 具有固定位置内容的大型下拉菜单

文章推荐： html - Flex 元素不会正确包裹和收缩

文章推荐： CSS3 过渡影响父 div

文章推荐：本地主机上的 Css 3 Pie

haskell - 水平、垂直和对角线上的数字相乘
我目前正在研究一个项目欧拉问题(www.projecteuler.net)，但遇到了一个绊脚石。其中一个问题提供了一个 20x20 的数字网格，并要求直线上 4 个数字的最大乘积。这条线可以是水平的、
join - 水平 UNION ALL
我有两个表，我需要从每个表中选择一列。这必须在单个查询中完成。好消息是这两列以正确的方式排序，并且它们都包含相同数量的行。现在，我知道我可以通过 rowid 加入两个表，但它很慢，因为它必须进行
iphone - 水平 UITableView
我想在我的 iPad 应用程序中实现一个布局，该布局具有一个可左右滚动而不是上下滚动的合适 View : 所以而不是第 1 行第 2 行第 3 行(垂直滚动)这将是 :第 1 行、第 2 行、第 3
imagemagick - 并排合并图像(水平)
我有五个尺寸的图像:600x30、600x30、600x30、600x30、810x30。它们的名称分别是:0.png、1.png、2.png、3.png、4.png。如何使用 ImageMagic
java - 滚动浏览多个列表(水平)
我正在寻找一个选项来滚动多个列表(水平)，如附件中的图片所示。您可以向左或向右滑动以进入下一个 ListView 。顶部应该有一些按钮可以单击或滚动我尝试将 ListViews 放入类似此代码的内容
camera - 水平、垂直和对角线视野之间的关系
这些值之间是否存在数学关系？如果我知道 hFOV 和 vFOV，我可以计算对角 FOV 而不涉及焦距等其他值吗？我的第一个想法是使用毕达哥拉斯定理，但也许这是错误的。最佳答案感兴趣的物理量是传感
c++ - 水平/垂直均匀分布网格单元？
我正在尝试在 game_width=640 和 game_height=480 的窗口内绘制网格。网格单元的数量是预定义的。我想在水平和垂直方向上均匀分布单元格。 void GamePaint(HDC
水平 ScrollView 上的android绘图线
你好，我已经发布了我的 iphone 应用程序 Micro-Pitch，现在正在将它移植到 android 上。我不知道如何在 ScrollView 中画线，想知道我做错了什么。这是我的 Scrol
css - 对齐图像 - 水平
如果您访问我的网站:www.ryancoughlin.com - 如果您在页面右侧看到 Google、Yahoo 等 RSS 按钮。我试图让它们均匀对齐，它们的图像高度都相同，我一直试图让它们均匀对齐
javascript - 居中问题(水平)
我想将此 Material 水平居中: 最佳答案将 text-align:center 添加到您的 anchor 。我假设您的 zoom1 具有 display
html - 旋转木马共享行 - 水平
我正在努力做到这一点，以便我的旋转木马可以与其他文本共享一个水平行，但由于某种原因它无法正常工作，当它设置为 40% 时它占据了 100% 的宽度。我将在下面发布代码和屏幕截图。在上图中，它显示了
html - 如何将元素的宽度设置为从特定位置到页面末尾(水平)
问题来了。我正在尝试放置一些彼此相邻的元素。 div 的宽度s 未指定，取决于它们的内容。我正在使用下面的 CSS 代码来定位彼此相邻: #div{ height: 50px; f
css - 无法并排打印表格(水平)
我正在尝试使用这样的 Bootstrap 并排打印表格但是当我尝试打印预览时，我得到了这个我的代码如下。我尝试了所有可能的解决方案，但我不知道为什么我无法打印我看到的页面。请指导我解决这个问题。
html - 两种背景颜色(水平)
我想知道是否可以在背景中使用两种不同的颜色，并通过 Bootstrap 在每一侧扩展 100%。这是我的意思的截图，左侧为红色，右侧为深色，为更大的屏幕放大 100%。有什么简单的解决方案吗？最
javascript - jquery滚动垂直/水平
我正在尝试制作一个包含所有事件的滚动触发的整个网站。我只需要帮助来实现这种效果: 我有一个网站，其中包含一些填满所有视口(viewport)的 div，我希望用户能够向下滚动到一个命名的 div，然后
html - 按钮之间的间距相等(水平)
我的代码是 Show All Show Valid Show Pending Save Clear Download As CSV 我希望那些输入日期和按钮在 class="buttons" di
javascript - 可扩展的菜单框(水平)
我在玩这个想法: 在这个 block 中我有 2 作为按钮和并尝试了 float荷兰国际集团他们让他们粘在一起。实现这种效果的主要思想是操纵 ul 的宽度/显示状态。或者只是菜单部分。 Log
html - 如何将此幻灯片移动到页面的中心(水平)？
这个问题在这里已经有了答案: How can I horizontally center an element? (134 个回答) 关闭 4 年前。
jquery - 水平/垂直跨浏览器居中图像
我遇到了一个 CSS 问题，需要帮助。我在目录中有许多不同大小的图像，我正在动态列出它们以显示以下 View :(我仅显示两个图像作为示例) 这是我的 HTML:
android - 水平 ListView
这个问题在这里已经有了答案: 关闭 9 年前。 Possible Duplicate: How can I make a horizontal ListView in Android? 我已经多次使

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何编辑水平下拉菜单