当前位置： 文江博客话题详情

带缩略图的 CSS 下拉菜单

发布于 2024-12-02 19:41:19 字数 2728 浏览 1 评论 0原文

您好，我正在构建一个下拉菜单，左侧必须有一个缩略图。目前，我使用

    &
  • s 构建菜单，并且下拉菜单可以正常工作。我遇到的问题是，当尝试将图像添加到左侧时，如果有意义的话，它只会将其自身添加到列表的底部。

目前我已经开始工作了，但我希望有人能提出更好的方法

，这是我的代码

<!--the css for the nav bar-->
#navbar
{
     clear: both;
      position: absolute;
     left: 488px;
     width: 466px;
}

#navbar ul{


float:left;
display:block;
}   
#navbar ul li img
{
padding:0px;
margin:0px;
border:none;

}
#navbar ul li{
text-align: center;
display:block;
float:left;
width:55px;
border-left:thin #666 solid;
border-right:thin #666 solid;
}




#navbar li li, #navbar li li a{
height:0px;
margin-top: -100px;
text-align: center;
  zoom: 1;
  background-color:#666;
text-decoration: none;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
border:thin #000 solid;
width:93px;
display:table-row;

}

 .navbar link{
color: #ff6600;
text-decoration: none;
}

#navbar li:hover li{
height:auto;
margin-top:0px;
margin-bottom: 0px;
}



#navbar li:hover li a{
color:#FFF;

text-decoration: none;
}

#navbar li li a:hover{
color:#333;
}

#navbar ul ul{
background:black;
}   

#navbar li li:hover li li{
height:auto;
margin-top:0px;
margin-bottom: 0px;
margin-left:-100px;
margin-top:-30px;

}

#navbar li:hover li li{
height:77px;
margin-top:-79px;
margin-bottom: 0px;
margin-left:-96px;
}

#thum
{
width:70px;
z-index:-2;
}

#thum li
{
height:auto;
z-index:-50;
 }


<!--html of nav bar-->
<div id="navbar">
        <ul id="items" >
            <li><a href="#"><img src="img/home_button_56_44.png"/></a></li>
            <li><a href="#"><img src="img/product_56_42.png"/></a>
                    <ul>

                        <li><a href="#">About</a></li>
                        <li><a href="#">About2</a></li>
                        <li><a href="#">About3</a></li>
                        <li>about4
                        <ul id="thum"><li><img src="img/home_button_56_44.png"/></li>     </ul>
                        </li>


                    </ul>


            <li><a href="#"><img src="img/lifestyle_57_42.png"/></a></li>

            <li><a href="#"><img src="img/about_54_42.png" /></a></li>
            <li><a href="#"><img src="img/contact_54_42.png"  /></a></li>
        </ul>
        </div>
}

，希望这是有道理的，我知道它有点混乱，我会在网站上线之前将其删除，

谢谢 担

原文

hi im building a drop down menu that has to have a thumbnail to the left. at the moment im using <ul>&<li>s to build the menu and ive got the drop down working. the issue im having is when trying to add an image to the left had side it just addes its self to the bottom of the list if that makes sense.

at the moment ive got it working but im hopping someone could suggest a better way

here is my code

<!--the css for the nav bar-->
#navbar
{
     clear: both;
      position: absolute;
     left: 488px;
     width: 466px;
}

#navbar ul{


float:left;
display:block;
}   
#navbar ul li img
{
padding:0px;
margin:0px;
border:none;

}
#navbar ul li{
text-align: center;
display:block;
float:left;
width:55px;
border-left:thin #666 solid;
border-right:thin #666 solid;
}




#navbar li li, #navbar li li a{
height:0px;
margin-top: -100px;
text-align: center;
  zoom: 1;
  background-color:#666;
text-decoration: none;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
border:thin #000 solid;
width:93px;
display:table-row;

}

 .navbar link{
color: #ff6600;
text-decoration: none;
}

#navbar li:hover li{
height:auto;
margin-top:0px;
margin-bottom: 0px;
}



#navbar li:hover li a{
color:#FFF;

text-decoration: none;
}

#navbar li li a:hover{
color:#333;
}

#navbar ul ul{
background:black;
}   

#navbar li li:hover li li{
height:auto;
margin-top:0px;
margin-bottom: 0px;
margin-left:-100px;
margin-top:-30px;

}

#navbar li:hover li li{
height:77px;
margin-top:-79px;
margin-bottom: 0px;
margin-left:-96px;
}

#thum
{
width:70px;
z-index:-2;
}

#thum li
{
height:auto;
z-index:-50;
 }


<!--html of nav bar-->
<div id="navbar">
        <ul id="items" >
            <li><a href="#"><img src="img/home_button_56_44.png"/></a></li>
            <li><a href="#"><img src="img/product_56_42.png"/></a>
                    <ul>

                        <li><a href="#">About</a></li>
                        <li><a href="#">About2</a></li>
                        <li><a href="#">About3</a></li>
                        <li>about4
                        <ul id="thum"><li><img src="img/home_button_56_44.png"/></li>     </ul>
                        </li>


                    </ul>


            <li><a href="#"><img src="img/lifestyle_57_42.png"/></a></li>

            <li><a href="#"><img src="img/about_54_42.png" /></a></li>
            <li><a href="#"><img src="img/contact_54_42.png"  /></a></li>
        </ul>
        </div>
}

hope this makes sense i know its a bit cluttered i will be cutting it down before the site goes live

thanks
dan

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

猫性小仙女 2024-12-09 19:41:19

我会将拇指图像放置在子菜单的第一个 li 中。给它一个类并将其浮动到左侧。这可能需要根据图像的大小进行一些调整。这应该允许以下 li 位于其旁边。

 <html>
<head>
<style type="text/css">
<!--the css for the nav bar-->
#navbar
{
     clear: both;
      position: absolute;
     left: 488px;
     width: 466px;
}

#navbar ul{


float:left;
display:block;
}   
#navbar ul li img
{
padding:0px;
margin:0px;
border:none;

}
#navbar ul li{
text-align: center;
display:block;
float:left;
width:55px;
border-left:thin #666 solid;
border-right:thin #666 solid;
}




#navbar li li, #navbar li li a{
height:0px;
margin-top: -100px;
text-align: center;
  zoom: 1;
  background-color:#666;
text-decoration: none;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
border:thin #000 solid;
width:93px;
display:table-row;

}

 .navbar link{
color: #ff6600;
text-decoration: none;
}

#navbar li:hover li{
height:auto;
margin-top:0px;
margin-bottom: 0px;
}



#navbar li:hover li a{
color:#FFF;

text-decoration: none;
}

#navbar li li a:hover{
color:#333;
}

#navbar ul ul{
background:black;
}   

#navbar li li:hover li li{
height:auto;
margin-top:0px;
margin-bottom: 0px;
margin-left:-100px;
margin-top:-30px;

}

#navbar li:hover li li{
height:77px;
margin-top:-79px;
margin-bottom: 0px;
margin-left:-96px;
}

#thum
{
width:70px;
z-index:-2;
}

#thum li
{
height:auto;
z-index:-50;
 }
#navbar li li.my-thumb {width:40px;}
#navbar li .thumb-menu {width:140px;padding:0;}
</style>
</head>
<body>

<!--html of nav bar-->
<div id="navbar">
        <ul id="items" >
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a>
                    <ul class="thumb-menu">
                        <li class="my-thumb"><img width="40" height="40" src="img/home_button_56_44.png"/></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">About2</a></li>
                        <li><a href="#">About3</a></li>
                    </ul>
            <li><a href="#">Item 3 </a></li>

            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
        </ul>
        </div>
</body>
</html>

I would place the thumb image in the first li of the sub menu. Give it a class and float it to the left. This may require a few tweaks depending on the size of your image. This should allow the following lis to fall beside it.

 <html>
<head>
<style type="text/css">
<!--the css for the nav bar-->
#navbar
{
     clear: both;
      position: absolute;
     left: 488px;
     width: 466px;
}

#navbar ul{


float:left;
display:block;
}   
#navbar ul li img
{
padding:0px;
margin:0px;
border:none;

}
#navbar ul li{
text-align: center;
display:block;
float:left;
width:55px;
border-left:thin #666 solid;
border-right:thin #666 solid;
}




#navbar li li, #navbar li li a{
height:0px;
margin-top: -100px;
text-align: center;
  zoom: 1;
  background-color:#666;
text-decoration: none;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
border:thin #000 solid;
width:93px;
display:table-row;

}

 .navbar link{
color: #ff6600;
text-decoration: none;
}

#navbar li:hover li{
height:auto;
margin-top:0px;
margin-bottom: 0px;
}



#navbar li:hover li a{
color:#FFF;

text-decoration: none;
}

#navbar li li a:hover{
color:#333;
}

#navbar ul ul{
background:black;
}   

#navbar li li:hover li li{
height:auto;
margin-top:0px;
margin-bottom: 0px;
margin-left:-100px;
margin-top:-30px;

}

#navbar li:hover li li{
height:77px;
margin-top:-79px;
margin-bottom: 0px;
margin-left:-96px;
}

#thum
{
width:70px;
z-index:-2;
}

#thum li
{
height:auto;
z-index:-50;
 }
#navbar li li.my-thumb {width:40px;}
#navbar li .thumb-menu {width:140px;padding:0;}
</style>
</head>
<body>

<!--html of nav bar-->
<div id="navbar">
        <ul id="items" >
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a>
                    <ul class="thumb-menu">
                        <li class="my-thumb"><img width="40" height="40" src="img/home_button_56_44.png"/></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">About2</a></li>
                        <li><a href="#">About3</a></li>
                    </ul>
            <li><a href="#">Item 3 </a></li>

            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
        </ul>
        </div>
</body>
</html>
回复 原文
~没有更多了~

关于作者

允世

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

離殇

文章 0 评论 0

小姐丶请自重

文章 0 评论 0

Aik

文章 0 评论 0

国产ˉ祖宗

文章 0 评论 0

猥琐帝

文章 0 评论 0

半仙

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文