下拉菜单 CSS [英] Dropdown Menu CSS

查看：27 发布时间：2021/12/28 19:01:11 css drop-down-menu

本文介绍了下拉菜单 CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我无法弄清楚我的下拉菜单有什么问题.当我越过主链接时，下拉菜单会出现在屏幕左侧而不是主链接下方.我已经研究了几个小时，任何帮助将不胜感激.

这是html部分:


<ul id="菜单"><li><a href="#" class="current">首页</a></li><li><a href="#">开胃菜</a><ul><li><a href="#">子链接1</a></li><li><a href="#">子链接2</a></li><li><a href="#">子链接3</a></li><li><a href="#">子链接4</a></li><li><a href="#">Entre</a><ul><li><a href="#">子链接1</a></li><li><a href="#">子链接2</a></li><li><a href="#">子链接3</a></li><li><a href="#">子链接4</a></li><li><a href="#">主菜</a><ul><li><a href="#">子链接1</a></li><li><a href="#">子链接2</a></li><li><a href="#">子链接3</a></li><li><a href="#">子链接4</a></li><li><a href="#">甜点</a><ul><li><a href="#">子链接1</a></li><li><a href="#">子链接2</a></li><li><a href="#">子链接3</a></li><li><a href="#">子链接4</a></li><li><a href="#">联系我们</a></li>

和 .css :

ul#menu {向左飘浮;边距:0；宽度:自动；填充:0px 40px 0px;背景:#333；颜色:#fff;行高:100%；}ul#menu li {显示:内联；}/* 顶级链接 */ul#menu a {向左飘浮;填充:10px 16px；边距右:0px；背景:#789；颜色:#fff;文字装饰:无；右边框:1px 实心 #e2e2e2;}/* 主级链接悬停 */ul#menu a.current {背景:#f60；颜色:#fff;}ul#menu li:hover >一个 {颜色:#fff;背景:#ff4500；文字装饰:下划线；}/* 落下 */ul#menu li:hover >ul{显示:块；/* 在悬停时显示子菜单(li 的子菜单) */}/* 子级列表 */ul#menu ul {显示:无；/* 隐藏子菜单，直到你将鼠标悬停在它上面 */边距:0；填充:0；宽度:140px；位置:绝对；顶部:35px；左:0；背景:#000；边框:实心 1px #ccc;}ul#menu ul li {浮动:无；边距:0；填充:0；}ul#menu ul a {字体粗细:正常；背景:#9BB3BF；颜色:#036；}/* 子级别链接悬停 */ul#menu ul li a:hover {颜色:#036；背景:#DDDF99；}

解决方案

如果您可以随意更改 CSS 样式，为什么不考虑做这样的事情.为什么不试试这种 CSS 样式?

HTML

<li><a href="#">菜单 1</a><ul><li><a href="#">子菜单项</a></li><li><a href="#">子菜单项</a></li><li><a href="#">子菜单项</a></li>
<li><a href="#">菜单 2</a><ul><li><a href="#">子菜单项</a></li><li><a href="#">子菜单项</a></li><li><a href="#">子菜单项</a></li><li><a href="#">菜单 3</a><ul><li><a href="#">子菜单项</a></li><li><a href="#">子菜单项</a></li><li><a href="#">子菜单项</a></li>

CSS

* {font-family: "Segoe UI", Tahoma;}ul.nav {border-bottom: 1px solid #999;}ul.nav li a {显示:块；文字装饰:无；颜色:#333；填充:5px；边框:1px 实心 #fff;}ul.nav >li:hover {border: 1px solid #666;边框底部:1px 实心 #fff;}ul.nav li a:hover {背景:#ccc;边框:1px 实心 #999;}ul.nav >li {显示:内联块；位置:相对；边框:1px 实心 #fff;}ul.nav >li ul {显示:无；位置:绝对；左:-1px；宽度:150px；边框:1px 实心 #666；边框顶部颜色:#fff;边距顶部:1px;}ul.nav >li:hover ul {显示:块；}ul.nav >li ul li {display: block;}/* 垂直菜单 */ul.nav >li ul li {display: inline-block;}/* 水平菜单 */

小提琴:
http://jsfiddle.net/vMuxA/(垂直菜单)
http://jsfiddle.net/vMuxA/1/(水平菜单)

I cannot figure out what is wrong with my dropdown menu. When I over over the main level link, the drop down appear but at the left of my screen instead of underneath the main link. I have been on this for a couple of hours and any help would be greatly appreciated.

Here is the html part :

<div class="nav">

        <ul id="menu">
           <li><a href="#" class="current">Home</a></li>
              <li><a href="#">Apetiziers</a>
              <ul>
               <li><a href="#">Sub-Link 1</a></li>
               <li><a href="#">Sub-Link 2</a></li>
               <li><a href="#">Sub-Link 3</a></li>
               <li><a href="#">Sub-Link 4</a></li>
              </ul>
              </li>

              <li><a href="#">Entree</a>
             <ul>
             <li><a href="#">Sub-Link 1</a></li>
             <li><a href="#">Sub-Link 2</a></li>
             <li><a href="#">Sub-Link 3</a></li>
             <li><a href="#">Sub-Link 4</a></li>
             </ul>
              </li>

              <li><a href="#">Main Course</a>
             <ul>
             <li><a href="#">Sub-Link 1</a></li>
             <li><a href="#">Sub-Link 2</a></li>
             <li><a href="#">Sub-Link 3</a></li>
             <li><a href="#">Sub-Link 4</a></li>
             </ul>      
              </li>

              <li><a href="#">Dessert</a>
             <ul>
              <li><a href="#">Sub-Link 1</a></li>
              <li><a href="#">Sub-Link 2</a></li>
              <li><a href="#">Sub-Link 3</a></li>
              <li><a href="#">Sub-Link 4</a></li>
             </ul>      
              </li>


              <li><a href="#">Contact Us</a></li>
        </ul>

 </div>

And the .css :

ul#menu {
   float: left;
  margin: 0;
  width: auto;
    padding: 0px 40px 0px;
    background: #333; color: #fff;
    line-height: 100%;
}

ul#menu li {
  display: inline; 
}


/* top level link */
ul#menu a {
  float: left;
  padding: 10px 16px;
  margin-right: 0px;
  background: #789; color: #fff;
  text-decoration: none;
  border-right: 1px solid #e2e2e2;
}

/* main level link hover */
ul#menu a.current {
  background: #f60; color: #fff;
}


ul#menu li:hover > a {
  color: #fff; background: #ff4500;
  text-decoration: underline;
}

/* dropdown */
ul#menu li:hover > ul {
    display: block; /* shows the sub-menu (child ul of li) on hover */
}

/* sub level list */
ul#menu ul {
    display: none; /* hides the sub-menu until you hover over it */
    margin: 0;
    padding: 0;
    width: 140px;
    position: absolute;
    top: 35px;
    left: 0;
    background: #000;
    border: solid 1px #ccc;
}

ul#menu ul li {
    float: none;
    margin: 0;
    padding: 0;
}

ul#menu ul a {
    font-weight: normal;
    background: #9BB3BF; color: #036;
}

/* sub levels link hover */
ul#menu ul li a:hover {
color: #036; background: #DDDF99;
}

解决方案

If you are free to change the CSS style, why not think of doing something like this. Why not try with this CSS style?

HTML

<ul class="nav">
    <li>
        <a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
</ul>

CSS

* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */

Fiddle:
http://jsfiddle.net/vMuxA/ (Vertical Menu)
http://jsfiddle.net/vMuxA/1/ (Horizontal Menu)

这篇关于下拉菜单 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

下拉菜单 CSS [英] Dropdown Menu CSS

问题描述

HTML

CSS

小提琴:
http://jsfiddle.net/vMuxA/(垂直菜单)
http://jsfiddle.net/vMuxA/1/(水平菜单)

HTML

CSS

Fiddle:
http://jsfiddle.net/vMuxA/ (Vertical Menu)
http://jsfiddle.net/vMuxA/1/ (Horizontal Menu)

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

下拉菜单 CSS [英] Dropdown Menu CSS

问题描述

HTML

CSS

小提琴: http://jsfiddle.net/vMuxA/(垂直菜单) http://jsfiddle.net/vMuxA/1/(水平菜单)

HTML

CSS

Fiddle: http://jsfiddle.net/vMuxA/ (Vertical Menu) http://jsfiddle.net/vMuxA/1/ (Horizontal Menu)

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

小提琴:
http://jsfiddle.net/vMuxA/(垂直菜单)
http://jsfiddle.net/vMuxA/1/(水平菜单)

Fiddle:
http://jsfiddle.net/vMuxA/ (Vertical Menu)
http://jsfiddle.net/vMuxA/1/ (Horizontal Menu)

登录关闭