Fatal编程技术网
  • javascript/
  • Javascript 将鼠标悬停下拉菜单添加到我的导航栏，该导航栏是一系列切片图像

Javascript 将鼠标悬停下拉菜单添加到我的导航栏，该导航栏是一系列切片图像

javascript jquery html css drop-down-menu

Javascript 将鼠标悬停下拉菜单添加到我的导航栏，该导航栏是一系列切片图像,javascript,jquery,html,css,drop-down-menu,Javascript,Jquery,Html,Css,Drop Down Menu,我目前正试图找到最好的方法来添加一个下拉菜单，它会出现在我的导航栏上。需要注意的几点： 我在Photoshop中设计了自己的导航标题并拼接了图像。我的整个标题将只包含.jpeg，当我将鼠标悬停在按钮或图像上时，我需要找到一种方法来添加下拉菜单 2这将用于企业，因此需要在合理的版本日期内兼容所有浏览器。即包括在内 请参阅下面我的代码： <html> <head> <title>DropDown Design2</title> <meta htt

我目前正试图找到最好的方法来添加一个下拉菜单，它会出现在我的导航栏上。需要注意的几点：

我在Photoshop中设计了自己的导航标题并拼接了图像。我的整个标题将只包含.jpeg，当我将鼠标悬停在按钮或图像上时，我需要找到一种方法来添加下拉菜单

2这将用于企业，因此需要在合理的版本日期内兼容所有浏览器。即包括在内

请参阅下面我的代码：

<html>
<head>
<title>DropDown Design2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (DropDown Design2.psd) -->
<style type="text/css">
<!--

#Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:864px;
    height:216px;
}

#DropDown-Design2-01 {
    position:absolute;
    left:0px;
    top:0px;
    width:139px;
    height:50px;
}

#DropDown-Design2-02 {
    position:absolute;
    left:139px;
    top:0px;
    width:131px;
    height:50px;
}
-->
</style>
<!-- End ImageReady Styles -->
</head>






<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (DropDown Design2.psd) -->
<div id="Table_01">
    <div id="DropDown-Design2-01">
        <img src="images/DropDown-Design2_01.jpg" width="139" height="50" alt="">
    </div>
    <div id="DropDown-Design2-02">
      <img src="images/DropDown-Design2_02.jpg" width="131" height="50" alt=""
    </div>
    <div id="DropDown-Design2-03">
        <img src="images/DropDown-Design2_03.jpg" width="22" height="50" alt="">
    </div>
    <div id="DropDown-Design2-04">
        <img src="images/DropDown-Design2_04.jpg" width="133" height="50" alt="">
    </div>
    <div id="DropDown-Design2-05">
        <img src="images/DropDown-Design2_05.jpg" width="20" height="50" alt="">
    </div>
    <div id="DropDown-Design2-06">
        <img src="images/DropDown-Design2_06.jpg" width="134" height="50" alt="">
    </div>
    <div id="DropDown-Design2-07">
        <img src="images/DropDown-Design2_07.jpg" width="18" height="50" alt="">
    </div>
    <div id="DropDown-Design2-08">
        <img src="images/DropDown-Design2_08.jpg" width="1" height="50" alt="">
    </div>
    <div id="DropDown-Design2-09">
        <img src="images/DropDown-Design2_09.jpg" width="132" height="50" alt="">
    </div>
    <div id="DropDown-Design2-10">
        <img src="images/DropDown-Design2_10.jpg" width="134" height="50" alt="">
    </div>
    <div id="DropDown-Design2-11">
        <img src="images/DropDown-Design2_11.jpg" width="347" height="166" alt="">
    </div>
    <div id="DropDown-Design2-12">
        <img src="images/DropDown-Design2_12.jpg" width="103" height="142" alt="">
    </div>
    <div id="DropDown-Design2-13">
        <img src="images/DropDown-Design2_13.jpg" width="223" height="166" alt="">
    </div>
    <div id="DropDown-Design2-14">
        <img src="images/DropDown-Design2_14.jpg" width="191" height="166" alt="">
    </div>
    <div id="DropDown-Design2-15">
        <img src="images/DropDown-Design2_15.jpg" width="103" height="24" alt="">
    </div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
我知道在下拉列表方面没有做太多的编码，但目前这些图像都设置为形成标题，顶部有一个导航栏。至少，如果有人能把我链接到一个包含我要完成的内容的教程，我会非常感激

谢谢大家!

在文章中包含代码，不要链接到pastebin。使用内置的代码格式。对不起，最好的方法是什么？我目前的代码大约有200行。。我必须手动为每行留出4个空格吗？因此，首先，如果可以的话，我会尽量缩小示例的大小。如果它的每一部分都是相关的，那么就把它包括进去，但是如果问题只能用部分代码来演示，那么就这样做。至于实际缩进，如果您将其粘贴到编辑器中，然后选择它，然后单击工具栏中的“代码”按钮，它将为您缩进它。您也可以使用编辑器支持的任何快捷方式在编辑器中缩进它，然后将其粘贴到缩进中。好的，我为您做了这些。它包括CSS和HTML。CSS对于每个拼接的图像几乎相同，减去位置和高度/宽度px等。